НТВ плюс 

Проигрыватель html5 и от рутубе. Убираем этот плеер в Chrome и Opera. Убираем этот плеер в Firefox

Данные видеоплееры имеют открытый исходный код, а также они могут воспроизводить видео без 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, но при этом чтобы в старых браузерах всё выглядело правильно.

Если сравнить существующий сегодня YouTube с тем, который был еще 5-7 лет назад, то это совершенно два разных понятия……

Сотни терабайт эксклюзивного контента, постоянно растущая аудитория и – поменялось многое, но об о всем по порядку…………………….

→ Еще в преддверие 2017 года руководство YouTube анонсировало новый проигрыватель HTML5.

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

Не удивительно, что у новой функции появились сторонники и противники, поэтому ниже мы расскажем о технологии html5 на YouTube, а также как ее отключить ↓↓↓

Что это за Плеер???

Многие пользователи YouTube в конце 2016 года стали наблюдать проблемы с работой сервисом!!!

Как оказалось, причина крылась в очередной новинке – проигрывателе видео html5.

Пример проблемки ↓↓↓

Почему новая функция оказалась обузой для многих и, как ее отключить, — далее подробно ⇓

→ Проигрыватель html5 – новый стандарт воспроизведения видео, который сменил уже морально устаревший flash-плеер.

→ Еще в конце 2016 года все желающие могли протестировать функцию, активировав соответствующую кнопку ().

Разработчики обещали много интересных плюшек, среди которых:

  • отсутствие уязвимостей и торможения;
  • быстрое открытие роликов;
  • поддержка видео 64-бит;
  • воспроизведение новых стандартов (H.264, HTMLVideoElement и прочее).

На деле все оказалось намного плачевнее, ведь вместо обещанных «инноваций» пользователи получили много проблем:

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

Как оказалось, основные причины связаны в:

  1. устаревшем железе
  2. несоответствие ПО
  3. драйверов
  4. браузера и многое другое.

Теперь по адресу () можно наблюдать надпись «Сейчас используется проигрыватель HTML5 всегда, когда это возможно», следовательно, у большинства зрителей уже нет выбора.

Внимание!

Чтобы проверить, какой проигрыватель используется на данный момент, наведите курсор мыши на видео и кликните на правую кнопку.

Если в нижней части имеется пункт «О проигрывателе html5», то используется соответствующий плеер

Вот ↓

Именно поэтому мы подготовили лучшие способы, как отключить проигрыватель html5 на YouTube в различных браузерах.

Это вполне реально и не займет много времени, поэтому читайте внимательно. ⇓⇓⇓

Убираем этот плеер в Firefox

На Firefox проблему можно решить, как минимум, двумя способами:

1) Посредством специальных дополнений (Disable Youtube HTML5 Player)

2) Или ручным способом.

В первом случае достаточно просто установить соответствующее расширение, чтобы отключить плеер html5 в YouTube.

Но наиболее простой метод мы рассмотрим ниже: ↓↓↓

  • Введите в поисковую строку «about:config», после чего откроется панель разработчика.
  • Скопируйте эти компоненты в отдельный документ: «media.ogg.enabled», «media.wave.enabled», «media.webm.enabled», «media.windows-media-foundation.enabled».
  • Каждый из них копируем в соответствующую строку поиска, находим в списке и отключаем. Для этого можно дважды кликнуть на запись.
  • Это действие необходимо проделать с каждым компонентом, приведенным выше.
  • Теперь выполните перезагрузку браузера.

Вы можете заметить, что теперь воспроизведение роликов осуществляется через flash-плеер !!!

В целом, ничего сложного и уже через 5 минут вы сможете наслаждаться любимыми роликами.

А теперь узнаем, как это выполнить в других браузерах ⇓⇓⇓

Убираем этот плеер в Chrome и Opera

Теперь мы рассмотрим другой метод, как отключить этот плеер при помощи специального приложения — Disable Youtube HTML5 Player ↵

Данный способ подойдет для браузеров Opera, а также Chrome.

Ниже мы опишем, как установить этот расширение на примере браузера Google Chrome:

  • пройдите по ссылке, которую мы привели выше;
  • кликните на кнопку «Установить» и дождитесь окончания процесса;
  • перезагрузите браузер.

В разделе «Настройки» — «Дополнительные инструменты» — «Расширения» вы можете увидеть, что утилита установлена.

P.S — Убедитесь, что активирован чекбокс «Включить».

Откройте любой ролик и кликните правой кнопкой мыши и заметите, что уже работает Flash-плеер.

При необходимости можно отключить в расширениях disable YouTube html5 player и тогда Flash-плеер снова не будет работать. В браузере Opera процедура аналогична, поэтому описывать ее подробно нет смысла.

Как показывает опыт, этот метод помогает избавиться от постоянного торможения роликов, а также других проблем с воспроизведением.

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

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». Перезапустив интернет обозреватель, видео должно показывать без помех и сбоев.

ХТМЛ – это язык разметки веб-страниц, по сути он отвечает за правильное отображение всех элементов на странице. Постепенно выпускаются новые спецификации языка, последней является пятая версия, которая принесла упразднение старых и внедрение новых тегов и функций. C HTML5 Yandex браузер стал поддерживать проигрывание видео через собственный Video Player, который не требует установку других плагинов, вроде Adobe Flash Player. Встроенный функционал языка позволяет воспроизвести любой фильм на сайте, поддерживающий HTML5.

При отсутствии HTML5 для браузера Яндекс для воспроизведения видео и части музыки приходилось пользоваться Flash Player. Получалась ситуация, при которой стандартными средствами браузера невозможно было прослушать музыку. Наибольший приток пользователей к Flash был спровоцирован появлением крупнейшего видеохостинга YouTube. Со временем другие крупные компании, например, Apple, стали использовать его для обработки видео.

Прирост пользователей продолжался долгое время, сразу после выхода HTML 4.01 наблюдался большой скачок популярности. Отток произошёл лишь после выпуска новой спецификации HTML5, которая впервые появилась в 2012 году, но полноценный запуск произошёл в 2014 году.

К переходу на HTML5 видео проигрыватель подталкивает несколько основных недостатков плагина от Adobe:

  • Необходимость дополнительно устанавливать в систему. Со временем его добавили в Google Chrome по умолчанию;
  • Низкая скорость работы и частые перебои в загрузке;
  • Плохая стабильность работы, нередко появлялись сбои, конфликты, часто приходилось перезагружать страницу.

Преимущества HTML5 в сравнении с Adobe Flash Player

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

  • Открытый код. Программист самостоятельно может доработать код. Полезно для повышения безопасности бизнес-ресурсов и приложений;
  • Быстрое развитие. Разработкой занимается продвинутая компания W3C, которая черпает хорошие идеи у пользователей, дорабатывающих стандарт;
  • Совместимость с большинством платформ. Flash Player не поддерживается на Android до 2.01 и 4.1х и более новые варианты, также плагин несовместим с iPhone и iPod. Для работы нового проигрывателя требуется иметь относительно новую версию Yandex browser;
  • Энергоэффективная технология. Видео плеер HTML5 потребляет значительно меньше ресурсов процессора, соответственно, экономит заряд, что важно для любого мобильного телефона.

Что такое HTML5 Video Player для браузера Яндекс?

HTML5 Video Player является программой, предназначенной для конвертирования видеофайлов в формате HTML5. Дополнительно через приложение можно смотреть видео, но такой необходимости не возникает с современными возможностями Яндекс обозревателя. В программу можно загрузить любой файл распространённых видео форматов: mp4, AVI, MKV.

После обработки файла он будет пригоден для загрузки на сервер, функция публикации уже встроена в программу. До заливки на сервер видео можно просмотреть в браузере. Загрузить программу лучше с официального сайта .

Некоторые пользователи жалуются, что приложение не работает, закрываясь сразу после загрузки в неё файла. Устранить проблему помогает переустановка или отключение антивируса. Чтобы не заниматься поиском причин неисправности, лучше воспользоваться аналогичной программой — Free HTML5 Video Player.

Процесс использования обеих приложений аналогичен:


Чтобы вставить ролик на сайт, достаточно скопировать JavaScript код со страницы в браузере, которая открылась после конвертации, и вставить в блок для видео на веб-ресурсе.

Как посмотреть HTML5 Video в Яндекс браузере

На самом деле никаких особых методик для просмотра видео в интернет формате HTML5 не потребуется. Чтобы начать просмотр, достаточно перейти на видео и браузер всё сделает самостоятельно. Воспроизвести видео на YouTube и многих других сервисах не составляет труда, сегодня этот видеохостинг работает исключительно с форматом ХТМЛ5, только для устаревших обозревателей происходит автоматическое переключение на старый Flash Player.

Иногда не получается просмотреть видео в формате HTML5 при наличии ошибок. Технология относится к относительно стабильным способам просмотра визуального контента и звука, но периодические провоцирует ошибки:


Иногда помогает обновление Яндекс обозревателя:


Для рядового пользователя просмотреть видео в HTML не составляет сложности, но важно наличие поддержки формата со стороны сервиса. Известная социальная сеть Facebook не работает с HTML5, но есть способ открыть эту возможность посредством расширения HTML5 Video Player, его можно скачать по ссылке .

ХТМЛ 5 – это общедоступный формат, который поддерживается всеми современными браузерами, его не нужно отдельно устанавливать. С помощью программы HTML5 Video Player для Яндекс браузера можно посмотреть, загрузить видео и преобразовать различные форматы в ХТМЛ5, сделав их доступными для онлайн просмотра.

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

Классическим подходом для реализации проигрывателя видео является использование технологии Flash. Пожалуй, сложно найти более распространенный плагин для веб-браузера, чем Flash Player. Однако стоит заметить, что слабым местом подобного подхода является необходимость установки Flash plugin’а. А для многих устройств он вообще отсутствует. К примеру, настолько популярные iPhone и iPad не имеют возможности запускать Flash-приложения в браузере. Выходом из подобной ситуации является использование HTML5.

Данный современный стандарт языка HTML принес множество нововведений. Но ключевым для нас является возможность воспроизведения видео стандартными средствами веб-браузера. Для этого в спецификацию HTML5 введен тэг

  • Autoplay — при наличии данного атрибута со значением ‘autoplay’ воспроизведение начнется сразу после того, как загрузиться достаточны объем видео.
  • Controls – значение данного атрибута, равное ‘controls’ отобразит элементы управления воспроизведением.
  • Height – высота проигрывателя в пикселах.
  • Loop – данный атрибут, установленный в значение ‘loop’ заставит воспроизведение видео циклично повторяться по окончанию.
  • Muted – при значении ‘muted’ отключит звук у видео файла.
  • Poster – данный атрибут принимает url изображения, которое будет отображаться до начала воспроизведения контента.
  • Preload – атрибут определяет стратегию браузера по загрузке видео контента. Может принимать различные значения:
    • ‘Auto’ — если загрузка видео должна начаться при загрузке страницы.
    • ‘Metadata’ – если с загрузкой страницы должны загрузиться лишь метаданные контента.
    • ‘None’ – если при загрузке странице не должна начинаться загрузка видео.
  • Src – данный атрибут содержит url файла с видео контентом.
  • Width — содержит значение высоты проигрывателя.

Подводные камни и первые трудности

К сожалению не все так просто. HTML5 – достаточно молодой стандарт. Так что первое, что стоит отметить — ограниченную поддержку браузерами. Использование тега

  • IE 9+
  • Firefox 4.0+
  • Chrome 6+
  • Safari 5+
  • Opera 10.6+

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

Браузер Форматы
Ogg Theora H.264 VP8 (WebM)
Internet Explorer Требует установки расширения 9.0 Требует установки расширения
Mozilla Firefox 3.5 Нет 4.0
Google Chrome 3.0 Да 6.0
Safari Требует установки расширения 3.1 Требует установки расширения
Opera 10.50 Нет 10.60

Существует механизм для кроссбраузерного воспроизведения. Он заключается в добавлении внутрь

Обратите внимание, что в разных браузерах элементы управления воспроизведением будут выглядеть по-разному. Поэтому для унификации необходимо разрабатывать собственный интерфейс проигрывателя. Идея крайне проста: элементы управления представляют собой div’ы, спозиционированные поверх контейнера с видео.

Стоит заметить, что разные браузеры могут иметь различное поведение при работе с HTML5 video. Например на iOS устройствах невозможен автостарт воспроизведения .

Также отсутствует возможность каким-любо образом управлять размером видео буфера . Определить размер проигрываемого файла также не выйдет, равно как и скорость загрузки.

Начало работы

В стандарте HTML5 у элементов мультимедиа существует мощный API, позволяющий не только разработать единый интерфейс проигрывателя, но и реализовать дополнительный функционал. В качестве инструмента для работы с HTML5 Media API выступает JavaScript.

Допустим на странице существует следующий контейнер с видео:

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

Var player = $(‘#player’);

Все, теперь мы готовы управлять нашим плеером через JS! Для начала воспроизведения файла и для паузы достаточно выполнить следующий код соответственно:

Player.start(); player.pause();

HTML5 Media API позволяет получить информацию о проигрываемом видео. Например можно производить все манипуляции с проигрываемым контентом работая с полем ‘currentSrc’ :

Var currentSource = player.currentSrc; // получаем url проигрываемого // контента player.currentSrc = ‘path_to_new_media_source’; // заменяем контент // в проигрывателе

Аналогично обстоит работа с функцией перемотки видео. Данный функционал реализовывается через поле ‘currentTime ’ (принимает знaчение типа float, означает текущее время воспроизведения в секундах):

Var currentTime = player.currentTime; // текущее значение времени // воспроизведения player.currentTime = 60 // перемотка на позицию 1 минуты

Получить длительность проигрываемого файла можно обратившись к полю ‘duration’ . А вместе со значением текущего времени проигрывания несложно вычислить процент просмотренного контента:

Var duration = player.duration; // длительность контента в секундах var proportion = currentTime / duration; // соотношение времени // воспроизведения к // длительности видео.

Существует возможность управления громкостью воспроизведения через поле ‘volume’ :

Player.volume = 1; // включаем полную громкость (для выключения // звука полю нужно присвоить значение “0”)

На этом возможности HTML5 Media API не заканчиваются. Реализации сложных элементов управления может быть осуществлена через механизм событий. Для этого достаточно использовать функцию addEventListenter() . Например, для подписки на событие окончания воспроизведения достаточно выполнить следующее:

Var onEndFunc = function() { // функция, вызываемая при окончании // воспроизведения // какие-то действия } player.addEventListener(‘ended’, onEndFunc); // подписываем функцию // на окончание видео player.removeEventListener(‘ended’, onEndFunc); // отписываем функции // от окончания видео

Ниже представлены все события, существующие в HTML5 Media API.

  • o nabort – событие аварийного завершения проигрывания
  • oncanplay – событие готовности к воспроизведению видео после загрузки достаточной части в буффер
  • oncanplaythrough – событие готовности к воспроизведению после полной загрузки контента в буффер
  • ondurationchange — событие изменения длительности контента
  • onemptied – событие, вызываемое при разрыве соединения
  • onended – событие окончания воспроизведения
  • onerror — событие ошибки при загрузке файла контента
  • onloadeddata – событие загрузки контента
  • onloadedmetadata – событие загрузки метаданных.
  • o nloadstart – событие начала загрузки файла
  • onpause – событие остановки воспроизведения
  • onplay — событие начала воспроизведения
  • onplaying – событие воспроизведения (будет выполняться, пока видео не остановится)
  • onprogress – событие процесса загрузки видео (будет выполняться, пока не будет загружен весь контент)
  • onratechange – событие изменения скорости воспроизведения
  • onreadystatechange – событие изменения состояния готовности видео проигрывателя
  • onseeked – событие окончания перемотки видео
  • onseeking – событие, вызываемое при перемотке контента
  • onstalled – собтие, вызываемое при невозможности браузером получить контент
  • onsuspend – событие, вызываемое при остановке загрузки контента.
  • o ntimeupdate – событие, вызываемое при изменении текущего положения воспроизведения
  • onvolumechange – событие изменения громкости звука
  • onwaiting – событие остановки воспроизведения для буферизации данных

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

Динамическое изменения качества видео

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

Var bufferedTime = player.buffered.end(0); // временная граница // буферизованной части

А теперь самое интересное! Зная длительность контента в буфере можно реализовать динамическое определение качества проигрываемого контента. Для этого нужно реализовать метод, который будет оценивать скорость загрузки информации в буфер и в зависимости ее значения переключать качество видео.

Идея анализа заключается в следующем: мы рассчитываем скорость нарастания буфера, и если она ниже, чем скорость воспроизведения, то проводим расчёт времени до полной буферизации контента и сравниваем его с оставшимся временем воспроизведения. Если время буферизации с рассчитанной скоростью больше отставшего времени проигрывания, то переключаем контент на более низкое качество.

Var bufferAnalizer = function (playbackStartPoint, playbackEndPoint, bufferStartPoint , bufferEndPoint, duration) { var oldQualityObj = this.qualityObj, playbackStart = 0, // new playback start point bufferStart = 0; // new buffer start point if (oldQualityObj) { playbackStart = oldQualityObj.playbackEndPoint; bufferStart = oldQualityObj.bufferEndPoint; } else { playbackStart = playbackStartPoint; bufferStart = bufferStartPoint; } this.qualityObj = { "playbackEndPoint": playbackEndPoint, "bufferEndPoint": bufferEndPoint, "deltaBuffer": bufferEndPoint - bufferStart, // сколько забуферизовано "bufferSpeed": (bufferEndPoint - bufferStart) / (playbackEndPoint - playbackStart), "deltaPlayback": playbackEndPoint - playbackStart, // сколько было //воспроизведено "availTime": bufferEndPoint - playbackEndPoint // разница между буффером и // позицией воспроизведения } var restTime = duration - playbackEndPoint, bufferTime = (duration - bufferEndPoint) / this.qualityObj.bufferSpeed; if ((bufferTime > restTime) && ((this.qualityObj.availTime / this.qualityObj.deltaPlayback) < 2)) { if (this.quality == "normal") { this.quality = "low"; } } }

Подключение субтитров

В стандарте HTML5 существует специальный тэг для отображения субтитров, однако ни один популярный браузер на время написания статьи не поддерживает его. Тем не менее можно реализовать данный функционал руками. Пусть субтитры находятся в файле ‘subs.srt’. Для начала подключим его и занесем содержимое в специальный объект:

Var toSeconds = function(time) { var seconds = 0.0; if (time) { var p = time.split(":"); for (var i = 0; i < p.length; i++) seconds = seconds * 60 + parseFloat(p[i].replace(",", ".")) } return seconds; } $.get(subsSrc, function (data) { data = data.replace(/\r\n\r\n/g, "").split(""); for (var item in data) { var subItem = data.split(/\r\n/g); if (subItem.length > 3) { for (var i = 3; i < subItem.length; i++) { subItem += "
" + subItem[i]; } } var time = subItem.split(" --> "); self.subs.push({ id:subItem, sTime:self.toSeconds(time), eTime:self.toSeconds(time), text:subItem }); } }, "html");

Теперь осталось создать таймер, который будет в зависимости от текущего времени отображать нужные субтитры в div’е с классом ‘.subs’:

Var self = this, lastSub = "empty", currentSub; this.subsTimer = setInterval(function () { for (var item in self.subs) { var currentTime = self.player.currentTime; if ((self.subs.eTime > currentTime) && (self.subs.sTime <= currentTime)) { currentSub = self.subs.text; } else if ((self.subs.eTime < currentTime)) { // no subs now currentSub = " "; } } if (currentSub && (currentSub != lastSub)) { self.container.find(".subs").html(currentSub); lastSub = currentSub; } }, 500);

Preview thumbnails при перемотке

Навряд ли найдется человек, не оценивший удобство отображения кадра для перемещения при перемотке. Реализация данного функционала не является сложной задачей. Для создания preview необходимо поверх основного контейнера с видео создать новый меньшего размера с тем же видео контентом и спозиционировать его точно над курсором:

Self.container.find(".controls").append("");

А после перематываем в данном контейнере видео:

Var self = this; $(".seekbar).bind("mousemove", function (e) { self.cursorX = e.pageX; self.seek(self); }); this.scale = this.container .find(".seekbar").width() / player.duration; var seek = function (context) { $(".thumb").currentTime = (self.cursorX - self.container.find(".seekbar").offset().left) / self.scale; }

Переход в полноэкранный режим

В браузерах Firefox, Safari и Chrome существует специальный API для работы режимом полноэкранного отображения. Механизм позволяет отобразить выбранный div на весь экран. Функции, выполняющие данные действия в этих браузерах названы по-разному, так что Вам придется реализовать вызов обоих.

Var element = document.getElementById(‘player_container’); if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); // Разворачиваем для Firefox } else if (element.webkitRequestFullScreen) { element.width("100%"); element.height("100%"); element.webkitRequestFullScreen(); // Разворачиваем для Chrome и Safari }

Обратите внимание, что для Chrome и Safari помимо перевода контейнера в полный экран реализовано необходимо присвоить его высоте и ширине значения 100%. Это связано с тем, что вызов метода webkitRequestFullScreen() лишь затемнить весь экран и расположит по его центру целевой контейнер. Масштабирование контейнера целиком и полностью переложено на сторону разработчика.

Факт разворачивания на полный экран контейнера моно определить состоянием полей document.mozFullScreenElement для Firefox и document.webkitIsFullScreen для браузеров на WebKit.

Перевод контейнера обратно в режим нормального отображения возможеy функциями отмены.

// Определяем факт полноэкранного отбражения какого-либо контейнера. if (document.mozFullScreenElement || document.webkitIsFullScreen) { if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); // Сворачиваем для Mozilla } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); // Сворачиваем для Chrome и Safari } }

FullScreen API также реализует события изменения состояния отображения – ‘mozfullscreenchange’ и ‘webkitfullscreenchange’ соответственно. Выше было указанно, что масштабирование контейнера в WebKit лежит на разработчике, соответственно при возвращении к нормальному отображению также нужно изменить размеры контейнера с плеером:

Document.addEventListener("webkitfullscreenchange", this.WebkitFullscreenEvent = function() { if (!document.webkitIsFullScreen) { self.container.width(width); self.container.height(height); } });

Другой функционал

Определение размера загружаемого файла.

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

Переключение аудиодорожек

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

Получение скриншота проигрываемого видео

Если Вам потребовалось снимать скриншот видео, то о реализации этого с использованием можно прочитать .

Эффекты

Приятной особенностью HTML5 Video является то, что к проигрывателю могут быть применены любые эффекты, трансформации и маски, осуществимые через CSS3. Пример подобного функционала можно посмотреть .

HTML5 vs Flash

Существует распространенное мнение, что HTML5 Video является своеобразным «убийцей» Flash, т.к. предлагает схожий функционал. На деле все конечно не совсем так. Для разворачивания премиум видео сервисов HTML5 не подходит, т.к. не поддерживает следующие важные особенности:

  • Потоковое видео. HTML5 подходит лишь для воспроизведения видео файлов.
  • Защита контента. В тоже время Flash предоставляет возможность использование защитных технологий.
  • Единый API и его реализация для всех браузеров.
  • Стандартный формат видео. Разные браузеры = разные форматы видео для HTML5 плеера.

Пример реализации видео плеера

Выводы

Появление HTML5 принесло нам новый инструмент для доставки видео контента пользователю. Однако на данный момент в виду новизны стандарта существует ряд случаев, когда необходимо применение Flash-технологии. Решение о том, какой механизм использовать целиком и полностью должен зависеть от целей и потребностей сервиса.

Полезные ссылки

  • Руководство для разработчика по использованию HTML5 video и audio
  • Демонстрация видео эффектов
  • Доклад о будущем HTML5

PS

В ближайшее время ждите статью об аналитике проигрываемого HTML5 Video.