Як додати відео в html5?
Зміст:
Щоб додати відео використовується спеціальний HTML-тег <,video>, . Він має важливий атрибут src, значенням якого буде шлях до потрібного відеофайлу.
Який формат відео підтримує HTML5?
Які формати підтримує відео HTML5? Взагалі кажучи, є три типи відеоформатів, які можуть бути сумісні з HTML5 Video: MP4, WebM та Ogg/Ogv.
Який елемент HTML5 відповідає за відтворення відео?
HTML5 video — елемент, включений у проект специфікації HTML 5, який використовується для відтворення відео, частково замінюючи елемент <,object>,.
Habr
Як зробити власний відеоплеєр на HTML5 Video / Хабр
Як зробити власний відеоплеєр на HTML5 Video
Раніше ми вже розглянули загальні питання використання HTML5 Audio та Video і почали занурюватися в деталі, розпочавши завдання визначення підтримки браузером потрібного кодека. Сьогодні ми розглянемо завдання створення власного відеоплеєра на HTML5 Video.
Нагадаю, що video-елемент сам собою вже забезпечує необхідний набір контролів для управління програванням. Щоб було видно панель керування відтворенням, достатньо вказати атрибут controls.
Однак, як я зазначав у вступній статті, зі стандартними контролами є проблема, яка полягає саме в тому, що вони виглядають нестандартно. Іншими словами, у кожному браузері вони виглядають по-своєму (перевірити, як виглядають контроли в різних браузерах, можна на прикладі Video Format Support на ietestdrive.com просто відкрийте його в двох-трьох різних браузерах).
API для керування відтворенням
Стандарт HTML5 для роботи з відео вводить в DOM новий інтерфейс HTMLVideoElement, що у свою чергу успадковує інтерфейс HTMLMediaElement.
Інтерфейс HTMLMediaElement
Це загальний інтерфейс для обох медіа-елементів (аудіо та відео), що описує доступ до базових можливостей роботи з медіа-контентом: контроль джерела контенту, керування відтворенням, зміна рівня звуку та обробка помилок. Основні властивості та методи, які нам знадобляться:
Стан мережі та готовність до роботи
src Посилання (url) на контент, що відтворюється
buffered Буферизовані шматки відео
Відтворення та контролі
currentTime поточний момент програвання (с.)
duration Тривалість медіа-контенту (с.)
paused Чи є відтворення на паузі
ended Чи закінчилося програвання
muted — увімкнення/вимкнення звуку
volume рівень звуку [0, 1]
play() Почати програвання
pause() Поставити на паузу
Події
oncanplay можна почати програвання
ontimeupdate — змінено позицію програвання
onplay Запущено програвання
onpause Натиснута пауза
onended Відтворення закінчилося
Важливо: це далеко не всі методи та властивості, що виставляють через інтерфейс HTMLMediaElement.
Інтерфейс HTMLVideoElement
Відео відрізняється від аудіо кількома додатковими властивостями:
width і height — ширина та висота контейнера для програвання відео,
videoWidth і videoHeight Внутрішнє значення ширини та висоти відео, якщо розміри не відомі, дорівнюють 0,
poster Посилання на картинку, яку можна показувати, поки відео недоступне (зазвичай це один
з перших непорожніх кадрів).
Різниця між width/height та videoWidth/videoHeight у тому, що останні — це власні характеристики відео, зокрема, з урахуванням співвідношення сторін та інших характеристик, тоді як контейнер для відео може бути будь-яких розмірів (більше, менше, з іншою пропорцією) ).
Play & Pause
Створення нашого власного відео-плеєра ми почнемо із простого завдання: навчимося запускати відео на програвання та зупиняти відтворення.Для цього нам знадобляться методи play() і pause() і кілька властивостей, що описують поточний стан відео-потоку (ми також використовуватимемо бібліотеку jQuery, не забудьте її підключити).
Насамперед нам необхідний video-елемент, яким ми хочемо керувати, і елемент на який можна натискати для керування поточним станом:
Зверніть увагу на інвертування стану кнопки (paused) та дії (play).
Тепер треба додати трохи js-коду, щоб натискання на кнопку play перемикало її стан і відповідно запускало відеоролик або ставило його на паузу:
$(document).ready(function()<, var controls = <, video: $(#myvideo), playpause: $(#playpause) >,, var video = controls.video[0], controls.playpause. click(function() <, if (video.paused) <, video.play(), $(this).text(Pause), >,else <, video.pause(), $(this).text(Play ),>,$(this).toggleClass(paused), >,),>,), За бажання можна відразу додати кілька css-стилів для кнопок управління та їх різних станів.
… здавалося б, все вже чудово працює, але не тут було! Є кілька дрібниць, які нам також потрібно врахувати.
Програвання спочатку
По-перше, нам потрібно правильно обробити закінчення програвання відео-ролика (якщо, звичайно, воно не зациклене), і в цей момент потрібно переключити кнопки управління так, щоб замість стану pause був стан play:
video.addEventListener(ended, function() <, video.pause(), controls.playpause.text(Play), controls.playpause.toggleClass(paused), >,),Контекстне меню
По-друге, браузери зазвичай додають можливість керувати відтворенням через контекстне меню. Це означає, що користувач, взагалі кажучи, може щось змінити в обхід наших елементів управління. Цей момент потрібно також відловити та внести необхідні зміни у зовнішній вигляд контролів. Для цього достатньо передплатити події onplay і onpause.
video.addEventListener(play, function() <, controls.playpause.text(Pause), controls.playpause.toggleClass(paused), >,), video.addEventListener(pause, function() <, controls.playpause.text(Play), controls.playpause.toggleClass(paused), >,),Так як у нас стає забагато місць, де змінюється зовнішній вигляд, саме час принагідно зробити невеликий рефакторинг, прибравши з початкового перемикання режимів тепер уже дублюючу зміну зовнішнього стану:
var controls = <,. togglePlayback: function() <, (video.paused) ? video.play(): video.pause(), >,. >,, controls.playpause.click(function()<, controls.togglePlayback(), >,),Клікабельне відео
Нарешті, напевно, нам захочеться, щоб програвання та пауза перемикалися після натискання на відео, тому потрібно додати ще кілька рядків:
controls.video.click(function() <, controls.togglePlayback(), >,),
Поточний результат:
Прогрес
Тепер давайте перейдемо до відображення прогресу відтворення. Для початку необхідно додати кілька елементів, які будуть використовуватися для відображення поточного стану та керування поточною позицією:
#progress <,width:290px, >,#total <, width:100%, background: # 999, >,#buffered <, background:#ccc, >,#current <, background:#eee, line-height:0, height:10px, >,#time
Насамперед, нам потрібно зрозуміти, яка тривалість ролика — для цього video-елемент має властивість duration. Відстежити це значення можна, наприклад, у момент готовності ролика до програвання за подією oncanplay:
video.addEventListener(canplay, function() <, controls.hasHours = (video.duration / 3600) >,= 1.0, controls.duration.text(formatTime(video.duration, controls.hasHours)), controls.currentTime.text (formatTime(0),controls.hasHours), >,, false),У даному випадку ми попутно визначаємо, чи потрібно відображати кількість годин у відео-плеєрі (до речі, взагалі кажучи, специфікація передбачає, що тривалість ролика може змінюватися в цей момент спрацьовує подія ondurationchange, і до того ж бути нескінченною наприклад, при стрімінг радіо).
Також ми використовуємо спеціальну функцію formatTime для переведення секунд у формат HH:mm:ss або mm:ss:
function formatTime(time, hours) <, if (hours) <, var h = Math.floor(time / 3600), time = time - h * 3600, var m = Math.floor(time / 60), var s = Math.floor(time % 60), return h.lead0(2) + : + m.lead0(2) + : + s.lead0(2), >,else <, var m = Math.floor(time / 60), var s = Math.floor(time % 60), return m.lead0(2) + : + s.lead0(2), >,>, Number.prototype.lead0 = function(n) <, var nz = + this, while (nz.length <, n) <, nz = 0 + nz, >,return nz, >,,Для відображення процесу програвання нам знадобиться подія ontimeupdate, що спрацьовує при зміні поточного моменту:
video.addEventListener(timeupdate, function() <, controls.currentTime.text(formatTime(video.currentTime, controls.hasHours))), controls.progress[0].style.width = Math.floor(progress * controls.total.width()) + px, >,, false),Властивість currentTime видає за секунди поточний час. Його ж можна використовувати, щоб змінити час відтворення:
controls.total.click(function(e) <, var x = (e.pageX - this.offsetLeft)/$(this).width(), video.currentTime = x * video.duration, >,),Також буде корисним показувати буферизацію відео, для цього можна відштовхуватися від події напрогрес, що спрацьовує при завантаженні нових порцій відео:
video.addEventListener(progress, function() <, var buffered = Math.floor(video.buffered.end(0)) / Math.floor(video.duration), controls.buffered[0].style.width = Math .floor(buffered * controls.total.width()) + px, >,, false),Важливий нюанс щодо якості buffered, який потрібно мати на увазі, полягає в тому, що він надає не просто час у секундах, а проміжки часу як обєкт TimaRanges. У більшості випадків це буде тільки один проміжок з індексом 0 і починається з позначки 0c.Однак, якщо браузер використовує HTTP range запити до сервера, наприклад, у відповідь на спроби перейти до інших фрагментів відео потоку, проміжків може бути кілька. Також треба враховувати, що в залежності від реалізації браузер може видаляти з буфера памяті програні шматки відео.
Проміжний результат:
Звук
Нарешті, давайте додамо ще невеликий штрих до нашого відео-плеєра можливість вмикати та вимикати звук. Для цього додамо невеликий контроль з динаміком (SVG-іконка взята із сайту The Noun Project):
З відповідними стилями для включеного та вимкненого станів:
Для перемикання стану динаміка нам знадобиться властивість mute:
controls.dynamic.click(function() <, var classes = this.getAttribute(class), if (new RegExp(boffb).test(classes)) <, classes = classes.replace( off, ), >,else <,classes = classes + off, >,this.setAttribute(class, classes), video.muted = !video.muted, >,),(Стандартні методи jQuery для перемикання css-класів не працюють із SVG-елементами.)
Якщо ви хочете також змінювати рівень гучності, то вам допоможе властивість volume, Що приймає значення в діапазоні [0, 1].
Фінальний результат:
Що ще.
- перевірка підтримки браузером HMTL5 Video,
- програмне визначення та перемикання підтримуваних кодеків,
- підтримка субтитрів, у тому числі для забезпечення доступності.
video.addEventListener(canplay, function() <, . >,, false),Або потрібно робити відповідні перевірки чи відловлювати можливі винятки. Винятки взагалі треба відловлювати, наприклад, подію onerror, що виникає при помилці завантаження відео-потоку
З додаткових опцій, які можуть знадобитися: зміна швидкості програвання. Для цього є властивість playbackRate та відповідна подія onratechange.
Готові плеєри
How to build a Custom HTML5 Video Player з JavaScript
Ця програма буде писати вам, як створити cross-browser HTML5 відеоплеєр з JavaScript використовуючи Media and Fullscreen APIs.
Watching and sharing video content is one of the most common uses of the web, and the way video is embedded on webpage has evolved over the years. Nowadays, adding video files до веб-сторінок може бути використана з елементом, який працює в всіх сучасних браузерах і supports з безліччю відео форматів.
Домашній кавярень, коли ви використовуєте, що витрачений відеоплеєр буде варіювати залежно від браузера, який не є ідеальним, якщо ви намагаєтеся забезпечити спільний user experience. Це why it useuse to build your own interface that features custom controls instead of using the browser defaults.
У цьому словнику, Ill ви можете вибрати через custom video player with JavaScript. purpose is describe how to leverage the HTML5 Media API в браузері, щоб побудувати те, що дотримується на зєднаннях.
Програвач буде будувати в цьому словнику, щоб побачити безліч того, що є на YouTube тому, що я думаю, що це добре, щоб переконатися, що певна функціональність, що в деяких людях є більш вільним.
We won’t be implementing all the features found in YouTube player as that will make for a longer, more complicated tutorial. However, once youve completed this tutorial, Im confident that you will be able to plug in any new functionality with ease.
Ви можете переглядати live demo of what well be building, або check out the source code on GitHub.
Prerequistes
Ви повинні мати основний підхід JavaScript і DOM для того, щоб перейти до цього курсу. I also recommend using the останньої версії Chrome, як деякі з них, щоб бути adding (так як Picture-in-Picture) працює тільки в Chrome на час написання.
Get started
Ive prepared the starter files for this tutorial on GitHub. Вам потрібно clone it to your machine and open the project directory in your text editor.Ви будете керувати маркуванням і стилями для програвача в index.html і стилі.css файли respectively, як добре, як відео файл that well be testing the player with. Включено index.js file is where well add all the code необхідно для the player to work.
Налагодження npm встановлюється в terminal to install browser-sync як розвиток dependencie для запуску веб-серверу і автоматично опрацювання на сторінці, коли будь-який з них змінює зміни, наведений на npm start to open up the project in your browser on http://localhost :3000.
What has been done so far
На момент, на відеоплеєрі відображаються природні засоби управління, які працюють just as you’d expect. Markup for the custom controls have already been defined in the #video-controls element but they’re hidden by default.
Toggle the playback state
Lets start with the basics. Ви повинні бути здатні до грати і переміщення відео за допомогою кнопки програти і піктограму значок зміни до матчу відео. We’ll start by selecting the video та play button at the top of index.js as follows:
Following that, let’s update the time elapsed when the video is being played. Here’s the function that helps us achieve what we want:
Here’s the code that helps us achieve that. Add it below the other event listeners.
document.addEventListener(DOMContentLoaded, () => if (!(pictureInPictureEnabled in document)) pipButton.classList.add(hidden), > >),Як ми повинні бути через цей літературу, нам потрібно вибрати відповідний контроль першого:
const pipButton = document.getElementById(pip-button)Вони створюють функцію, яка торкається Picture-in-Picture mode:
// togglePip toggles Picture-in-Picture mode on the video async function togglePip() try if (video !== document.pictureInPictureElement) pipButton.disabled = true, await video.requestPictureInPicture(), > else await document.exitPictureInPicture(), > > catch (error) console.error(error) > finally pipButton.disabled = false, > >Ive зробить кнопкиPip функція є synchronous so that we can catch errors in case the requestPictureInPicture() метод rejects, які може happen for anumber of reasons. У реальному слові app, ви можете скористатися повідомленням про помилку message до користувача, щоб переконатися, що ви збираєтеся на консолі.
Далі, надрукований для click event on the pipButton and add the togglePip функція є handler for the event.
pipButton.addEventListener(click, togglePip),Новий, натиснувши на pipButton слід вводити або вийти Picture-in-Picture mode. Ви можете також зєднати PiP window за допомогою кнопки на зупинці кнопки вгорі.
Sorry, ваш браузер не підтримує HTML5 відео, але ні, не можна download it і watch it with your favourite video player!
Toggle the video controls
Video controls проходять деякі місця і блоки user’s view of some of the content. It is better to hide them when they are not in use, and show them again when hovering over the video.
Write the 2 functions below for this purpose:
// hideControls hides the video controls when not in use // if the video is paused, the controls must remain visible function hideControls() if (video.paused) return, > videoControls.classList.add(hide), > // showControls displays the video controls function showControls() videoControls.classList.remove(hide), >What we want to do here is hide the controls when the cursor leaves the video interface. Але ми повинні робити, як controls are always shown when the video is paused, hence the conditional in hideControls() .
Для того, щоб скористатися цим, ми скористаємося автомобілем і наряду, щоб вибрати handlers на одному з елементів і відеозаписів, як показано нижче:
video.addEventListener(mouseenter, showControls), video.addEventListener(mouseleave, hideControls), videoControls.addEventListener(mouseenter, showControls), videoControls.addEventListener(mouseleave, hideControls),Add keyboard shortcuts
Останній час, щоб скористатися нашим гравцем є здатність до використання клавіатури для керування відео. Its really just a matter of running the functions weve already written when a specific key is pressed. The shortcuts well implement here are as follows:
- k : Play або pause the video
- m : Mute or unmute the video
- f : Toggle fullscreen
- p : Toggle Picture-in-Picture mode
What we’ll do here is listen for the keyup event on the document, detekt the key that pressed and run the relevant functions for key.
// KeyboardShortcuts executes the relevant functions for // each supported shortcut key function keyboardShortcuts(event) const key > = event, switch(key) case k: togglePlay(), animatePlayback(), if (video.paused) showControls(), > else setTimeout(() => hideControls(), >, 2000), > break, case m: toggleMute(), break, case f: toggleFullScreen(), break, case p: togglePip(), break, > >На перемиканні станції використовується для визначення того, що кнопка була натиснута і виконано відповідний код. Реакція hideControls called after two seconds is to imitate the behaviour on YouTube where, when using the keyboard shortcut to play the video, the controls to no hide immediately once the video starts playing but do so after a short delay.
document.addEventListener(keyup, keyboardShortcuts),Conclusion
Там є багато способів, щоб improve відеоплеєра, але tutorial був already get to to long so I had to stop here. If you’re interested in extending функціональність гравця, here are some ideas:
- Add support for captions and subtitles.
- Add speed support.
- Add the ability to fast-forward or rewind the video.
- Add ability до choose video resolution (720p, 480p, 360p, 240p).
I hope this tutorial був helpful to you. Якщо ви маєте будь-які запитання, скористайтеся коментарем далі і Ill get back to you. Don’t forget to checkout full source code on GitHub.
Thanks for reading, і happy coding!
About the Author
Ayo is a Software Developer by trade.He enjoys writing про diverse технології в web development, в основному в Go and JavaScript/TypeScript.
Learn more.