Как просмотреть фильмы, сериалы в HTML5 видео плеер для Yandex browser. Как сделать собственный видео-плеер на HTML5 Video Добавление субтитров и заголовков

• Tutorial

Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека . Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.

Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls .

API для управления воспроизведением

Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.

Интерфейс HTMLMediaElement

Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к базовым возможностями работы с медиа-контентом: контроль источника контента, управление воспроизведением, изменение уровня звука и обработка ошибок. Основные свойства и методы, которые нам понадобятся:

Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео

Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука
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-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:

#controls span { display:inline-block; } #playpause { background:#eee; color:#333; padding:0 5px; font-size:12pt; text-transform:uppercase; width:50px; }

Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).

Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:
$(document).ready(function(){ var controls = { video: $("#myvideo"), playpause: $("#playpause") }; var video = controls.video; 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(); });

Текущий результат:

Прогресс

Теперь давайте перейдем к отображению прогресса проигрывания. Для начала необходимо добавить несколько элементов, которые будут использоваться для отображения текущего состояния и управления текущей позицией:

​ 00:00 / 00:00

И соответствующие стили:

#progress { width:290px; } #total { width:100%; background:#999; } #buffered { background:#ccc; } #current { background:#eee; line-height:0; height:10px; } #time { color:#999; font-size:12pt; }
И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:
var controls = { ... total: $("#total"), buffered: $("#buffered"), progress: $("#current"), duration: $("#duration"), currentTime: $("#currenttime"), hasHours: false, ... };

Первым делом, нам нужно понять, какова длительность ролика — для этого у 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)); var progress = Math.floor(video.currentTime) / Math.floor(video.duration); controls.progress.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; });

Также будет полезным показывать буферизацию видео, для этого можно отталкиваться от события onprogress, срабатывающего при загрузке новых порций видео:

Video.addEventListener("progress", function() { var buffered = Math.floor(video.buffered.end(0)) / Math.floor(video.duration); controls.buffered.style.width = Math.floor(buffered * controls.total.width()) + "px"; }, false);

Важный нюанс относительно свойства buffered , который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.

Промежуточный результат:

Звук

Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):

С соответствующими стилями для включенного и выключенного состояний:
#dynamic { fill:#333; padding:0 5px; } #dynamic.off { fill:#ccc; }
Для переключения состояния динамика нам понадобится свойство mute :

Controls.dynamic.click(function() { var classes = this.getAttribute("class"); if (new RegExp("\\boff\\b").test(classes)) { classes = classes.replace(" off", ""); } else { classes = classes + " off"; } this.setAttribute("class", classes); video.muted = !video.muted; });
(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume , принимающее значения в диапазоне .

Финальный результат:

Что еще...

Помимо того, что вы легко можете настроить стили элементов управления по своему усмотрению, есть еще несколько важных моментов, которые остаются за пределами этой статьи, но о которых полезно помнить в реальном проекте:

• проверка поддержки браузером HMTL5 Video,

Данные видеоплееры имеют открытый исходный код, а также они могут воспроизводить видео без adobe flash player. В дополнению к этому веб-разработчики могут добавлять свои функции видеоплееру через API jQuery. HTML5 всё больше и больше поддерживается разнообразными браузерами, но точную информацию о том какие браузеры поддерживают данный плеер находится на сайте разработчика..

Я уже писал раньше об одном видеоплеере и как его установить: .

А сейчас рассмотрим другие видеоплееры…

1. Open Standard Media (OSM) Player

На смену adobe flash player, который обеспечивал просмотр видео в хорошем качестве, пришел HTML5 OSM Player — новый стандарт просмотра видео в интернете.

2. HTML5 Video Org

Одной из важных функций HTML5 является то, что можно вставлять видео прямо через тег .

Используя HTML5 Javascript библиотеку видео будет работать как в новых мобильных устройствах, так и в старых браузерах.

3. OIPlayer jQuery плагин

Работает в Safari, Google Chrome, Firefox, IE. Но на компьютере должно быть установлено Flash или Java.

4. Projekktor видеоплеер

Данный видео плеер имеет также открытый исходный код. Видеоплеер написан на основе Javascript, поэтому поддерживает кроссбраузерность.

5.

Данный плеер на официальном сайте больше не доступен.

Вывод

Это 5 из множества разнообразных плееров на HTML5. Некоторые сайты уже пробуют применять видеоплееры на HTML5, но при этом чтобы в старых браузерах всё выглядело правильно.

Adobe Flash Player доживает свои последние годы. Данная платформа морально устарела, и разработчики перестанут поддерживать её уже к 2020 году. Многие компании, программисты и энтузиасты уже начали отказываться от проверенного формата в пользу прогрессивных, но ещё «сырых» технологий. Одним из таких новшеств является видеоплейер «HTML5», который, потенциально может заменить старый добрый Флэш Плеер.

Не все пользователи могут похвастаться мощными и современными персональными компьютерами со всеми обновлениями операционной системы (драйвера, кодеки). Не у всех установлена (чем выше версия, тем меньше ошибок при работе). Но всем интересна жизнь, кипящая в глобальной сети Интернет. Тысячи фильмов и сериалов, десятки тысяч клипов, сотни тысяч забавных любительских видеороликов можно найти и посмотреть через всемирную паутину в любой точке планеты Земля.

Если при просмотре видео на компьютере возникают графические искажения, пользователю не стоит расстраиваться и искать альтернативу для просмотра. Первое что надо сделать – это проверить работоспособность своего ПК, все ли обновления, драйвера и кодеки есть и в рабочем состоянии. Второй нюанс – это проверка видеоплейера, встроенного в сам интернет обозреватель Мозила. Разработчики из Mozilla Corporation стараются угодить всем своим фанатам и просто пользователям поисковой системы. Поэтому у каждого есть возможность просмотра видеоизображений через различные плееры: Flash Player или HTML5. Чтобы проверить, какой плеер включён в браузере фаерфокс, достаточно нажать правой кнопкой мыши по экрану с видеорядом.

Как отключить HTML5 в Firefox

Если пользовательский персональный компьютер уступает по техническим характеристикам своим современным собратьям, можно попробовать сменить плеер с HTML5 на Adobe Flash Player. Для этого необходимо зайти в скрытые настройки браузера, набрав в поисковой строке «about:config ». Разработчики любезно предупреждают о рисках, связанных с изменениями в «тонких» настройках. Принимаем ответственность на себя.

В окне «Поиск:», для простоты нахождения для изменения параметров, надо набрать английское слово «media».

Четыре параметра, которые могут быть включены по-молчанию, надо сменить с «true» на «false». То есть выключить их двойным щелчком левой кнопкой мыши.

• media.ogg.enabled
• media.wave.enabled
• media.webm.enabled
• media.windows-media-foundation.enabled

После перезагрузки браузера Mozilla Firefox настройки вступят в силу, и новый плеер HTML5 сменится на Adobe Flash Player.

Как включить HTML5 в Firefox

Если необходимо провести обратную манипуляцию и сменить старый проигрыватель от Adobe на прогрессивный аналог, пользователю нужно провести те же манипуляции с вышеупомянутыми параметрами с «false» на «true». Перезапустив интернет обозреватель, видео должно показывать без помех и сбоев.

Главным преимуществом видеозаписей в формате HTML-5 является возможность воспроизведения их в браузере даже без плагина Adobe Flash Player. Замечательным инструментом для конвертирования видеофайлов в этот формат является утилита Фри ХТМЛ5 Видео Плеер энд Конвертер. Вы можете наполнить свой сайт мультимедийным контентом, полезными видеороликами и не бояться несовместимости с браузерами посетителей. Для этого вам достаточно скачать бесплатно новую версию Free HTML5 Video Player and Converter и установить ее на компьютер.

Возможности:

• качественное конвертирование видеозаписей;
• выключение компьютера после завершения преобразования файлов;
• пакетное конвертирование видеозаписей;
• выбор директории для сохранения записей;
• встроенный редактор пресетов для более точной настройки качества видеофайлов;
• настройка выходного имени файлов;
• воспроизведение готовых файлов во встроенном проигрывателе

Принцип работы:

теперь ознакомимся с этой программой более детально. В первую очередь, следует отметить наличие русскоязычного меню, которое значительно облегчит использование Фри ХТМЛ5 Видео Плеер энд Конвертер. Его основная функция заключается в преобразовании видеофайлов в HTML-5-формат для корректного воспроизведения на сайтах и блогах. Можно выбирать нужное разрешение видеозаписи, детально настраивать пресеты и сохранять готовые записи в нужную вам директорию.
Установить Free HTML5 Video Player and Converter вы можете для Windows XP, Vista, 7 и 8.

Плюсы:

• поддержка многих видеоформатов;
• преобразованное видео совместимо со всеми современными браузерами;
• возможность скачать бесплатно Free HTML5 Video Player and Converter на компьютер;
• меню на русском языке;
• простой интерфейс.

Минусы:

• конвертирование только в оптимизированный формат для Интернет-сайтов.

Представленная программа идеально подойдет для владельцев сайтов и блогов. Благодаря оптимизации видео ваши Интернет-проекты будут отображаться корректно даже при отсутствии Adobe Flash Player в браузерах посетителей. Для этого мы рекомендуем вам скачать бесплатно последнюю версию Фри ХТМЛ5 Видео Плеер энд Конвертер. Однако, если вы не являетесь web-мастером, эта программа может быть для вас малополезной. Во всяком случае, программу стоит скачать и попробовать на своей рабочей системе.

Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент