Вставка Html5 проигрывателя
видео

Вставка Html5 проигрывателя

Nikel, 30.03.2019

Сегодня речь пойдет о том, как встраивать на сайт проигрыватель на чистом html, без применения дополнительных плагинов.

Использование Flash плагина было вынужденной мерой, когда браузеры не могли обеспечить воспроизведение видео. Однако, все изменилось с приходом html5, появились новые стандарты, которым нужно было следовать и новый тег video, служил обеспечению постепенного отказа от использования каких-то сторонних решений. Браузеры должны были научиться воспроизводить видео самостоятельно. В настоящее время так и происходит, флеш постепенно умирает, все больше ограничивается его применение  и скоро от него совсем откажутся.

Хотя, если быть честными, на практике до сих пор встречается большое количество сайтов, например, посвященных фильмам, где для просмотра кино используются именно старые проигрыватели на основе Adobe Flash player.  Это можно объяснить их удобством, по сути это неплохие плееры, ведь технология флеш просуществовала много лет.

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

Вставка видео на страницу при помощи тега video

Элемент <video> служит для добавления вашего видеофайла на сайт. В настоящий момент этот тег достаточно хорошо поддерживается. Браузеры внедрили его довольно давно, работает в IE 9.0+, Edge 12+, Chrome 4.0.

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

Мы можем видеть здесь открывающий и закрывающий тег video, а внутри него несколько тегов source.   В каждом source обязательно должен присутствовать атрибут type( это так называемый MIME-тип, тип данных, передаваемых по сети), в котором будет указан формат видеоролика. Такое количество форматов нужно для полной поддержки всеми браузерами.

Дополнительно добавим еще пару фишек:

  • сообщение для тех, чей браузер не поддерживает элемент <video> — Этот браузер не поддерживает html5 видеоплеер!
  • ссылку на скачивание видео — <a href="/wp-content/uploads/2018/07/wd.mp4">Скачать видео</a>

Атрибуты video

У элемента video, как видно из кода, присутствует ряд атрибутов. Разберем их поподробнее.

autoplay
Автоматическое проигрывание видео после загрузки страницы
controls
Показывает элементы управления плеером (громкость, пауза, проигрывание и т.п.)
height
Высота области отображения видеоролика
loop
Воспроизведение ролика по кругу, зацикливание
muted
Отключение звука при проигрывании видео
poster
Адрес изображения, которое будет показываться когда видеоролик недоступен и до нажатия кнопки Play. Если не задано берется первый кадр видео.
preload
Предварительная загрузка видеофайла. Может принимать 3 значения: auto(полная загрузка видеоролика), metadata(загрузка метаданных видео, таких как размер, список дорожек, продолжительность, и небольшого фрагмента самого видеоролика ), none(отсутствие загрузки)
src
URL-адрес загружаемого видеофайла, который будет проигрываться
width
Ширина области отображения видеоролика

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

  • область отображения нашего ролика 400 на 300 пикселов,
  • показываются элементы управления,
  • в качестве заставки до проигрывания видео задана картинка.

Казалось бы все прекрасно с нашим видеопроигрывателем, он работает во всех браузерах. Но есть один существенный недостаток — Mozilla, Chrome и IE отображают его совершенно по-разному, абсолютно отличаются элементы управления.

Internet Explorer 11

Chrome

Firefox

Есть два варианта решения этой проблемы:

  • Создание собственного html5 плеера с нуля, с использованием jQuery и css, когда вы подключаете свои собственные элементы управления. Это не такая уж трудная задача, как кажется на первый взгляд, но это довольно долго и не всегда есть такая необходимость, создавать свой кастомизированный плеер.
  • Так как нашей целью является прежде всего одинаковость отображения в разных браузерах, можем воспользоваться готовым решением, использовать html5 проигрыватель MediaElement. Мы воспользуемся именно этим способом.

Добавление на страницу html5 плеера MediaElement

Заходим на сайт mediaelementjs.com и нажимаем скачать плеер.

Вы скачаете целую папку файлов, из которых нужно выбрать, что нам нужно. Нам понадобятся скрипты mediaelement-and-player.min.js и demo.js, стили mediaelementplayer.css(находится в папке src/css), оттуда же достаем mejs-controls.svg(файл отвечающий за изображение кнопок). 

С index.html скопируем код самого плеера, он будет таким:

Следите, чтобы везде были указаны правильные пути, это во многом зависит от структуры папок вашего сайта. Допустим стили поместим в папку css, изображение кнопок — в папку img, а скрипты — в папку js.

Подключаем стили(указываем в пути папку css)

Подключаем скрипты (находящиеся в папке js)

Так как пути расположения файла стилей изменились, надо его открыть и подредактировать путь к кнопкам mejs-controls.svg, заменяем его везде в файле mediaelementplayer.css на ../img/mejs-controls.svg 

В тестовом примере параметры плеера зависели от выбора параметра language и stretch селектов

Нам это не нужно, и придется подредактировать файл demo.js(скачать модифицированный demo.js).  Удаляем эти куски кода, отвечающие за lang и stretch.

Заменяем в функции входную переменную на 'en'

stretching:stretching заменяем на stretching:auto, а pluginPath:'../build/' на pluginPath:' '

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

Вставка видео с популярных видеохостингов Youtube, Rutube, Vimeo

Видео с Youtube

Открываем Youtube, под роликом находим ссылку Поделиться и нажимаем ее. Открывается окошко, в котором находится кнопка Встроить.


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

Встраиваем на страницу видео после настроек. Панель управления отключена, во время проигрывания никаких кнопок не отображается, начало воспроизведения — с 1:00 минуты. Размер плеера можно изменить уже после встраивания, указав другие width и height в iframe.

Я изменила на 360 и 212 пикселей (против стандартных 560 на 315), главное, чтобы пропорция сторон сохранялась.

Конечно это не все возможности отображения плеера Youtube, существуют шаблоны для разработчиков и функции YouTube Player API , но это тема отдельной статьи.

Видео с Rutube

Чтобы вставить видео с Rutube нужно открыть видеоролик и под ним найти пункт  Поделиться. При нажатии на этот пункт, помимо кнопок соцсетей вы увидите ссылку Код вставки плеера и плейлиста. Когда мы откроем эту ссылку, то увидим код самого плеера, который можно сразу скопировать и вставить. Но можно также настроить параметры плеера: изменить размеры, основной цвет, место с которого видео воспроизводится, а также показ заголовка или автора ролика.

В данном примере я указала ширину плеера 304, основной цвет кнопок не голубой, а зеленый, и воспроизведение не с начала, а с 10 минуты.

ПЕСНИ, 2 сезон, 7 выпуск (30.03.2019) от ПЕСНИ на Rutube

Видео с Vimeo

Открываем категории на Vimeo, например у меня https://vimeo.com/categories/food. Открываем нужное видео и под ним находим кнопку Share. Нажав на эту кнопку, мы можем видеть код iframe в разделе Embed(внедрение). Это и есть сам плеер. Можно скопировать код сразу, а можно открыть опции(кликнув на ссылку Show Options), которых здесь очень много.


Мы можем задать для видео фиксированный размер или выбрать Responsive, адаптивный, который будет подстраиваться под ширину страницы. Также можно изменить стандартный голубой цвет элементов управления vimeo, например на оранжевый.

Параметр Intro отвечает за отображение на видео заголовка, иконки-логотипа(тут это тарелка) и автора видеоролика.

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

Итак, у нас получилось встроенное видео на странице, шириной 640 пикселей, с оранжевыми элементами управления, ссылкой под видео, заголовком, логотипом и именем автора(на видеоролике в левом углу).

Baked omelette from allrecipes uk on Vimeo.