Как транслировать видео с помощью HTML509.08.2016 16:18

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

Введение


В этой статье я объясню и покажу как сделать живую видео трансляцию на вашем сайте. Недавно меня наняли с целью реализовать данный функционал для клиента. Я посоветовал реализовать это с помощью HTML5 для mp4 видео форматов и flash для его .flv файлов.

Основы


Тем кто хочет реализовать видео стриминг для начала нужно ознакомиться с тем какие есть видео форматы и что может, а что не может быть воспроизведено. Существует большое количество видео форматов таких как: .flv, .mp4, .swf и другие. Рассмотрим .flv и .swf, которые являются файлами flash формата. Эти два формата не могут быть воспроизведены с помощью HTML5. Напротив MP4 может проигрываться с помощью HTML5 без flash плеера.

Вы можете найти много статьей и туториалов в сети на тему стриминга .swf и .flv файлов. Обратите внимание на то что .swf плеер не будет воспроизводить .flv файлы. Они оба flash, но с разными требованиями. В сети много противоречивой информации на данный счет. Вы лишь потратите свое время пытаясь заставить .swf запустит .flv, но в итоге удостоверитесь что это невозможно.

Как реализовать .mp4 в HTML5:

Пару вещей которые стоит запомнить:
  • Видео нужно присвоить id
  • Нужно добавить расширение файла в source.
  • Если вы хотите открыть для пользователя доступ к панели управления тогда разместите тэг controls.
  • Нужно разместить полный URL файла в source. Пример: www.mysite.com/video/myvideo.mp4

HTML5 воспроизводит аудио и видео. Вам просто нужно указать тип файла.

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

Причиной того что видео не работает на сайте может быть отсутствие доступа к серверу, некорректное имя файла, не полный исходный URL или просто Apache (если вы используете его), не распознает тип расширения или тип mime.

Настройка Apache Web Server


Вам нужно добавить mime типы в расширение, либо в файл apache.conf или в mime.conf. После внесения измененный перезапустите сервер.

Вот и все. После этого у вас появится возможность транслироваться видео из сайта. Но помните, существуют ограничения на форматы в HTML5, это могут быть .swf или shockwave flash или .flv.

Как реализовать стриминг с flash


В сети много различной информации, где большая часть будет о реализации воспроизведения .swf или Shockwave flash формат, используя что-то вроде SWFObject. Вкратце, SWFObject это JavaScript библиотека, которая позволит вам проигрывать только .swf форматы и больше она ничего не делает.

Чтобы реализовать трансляцию для .swf файлов нужно:

1. Загрузить SWFObject из Git или с других источников.

2. Разместить его на странице:

3. Этот код должен быть размещен в шапке файла.

4. Вы можете реализовать его с помощью тэга Object tag или:

5. Теперь вам нужно прописать следующее: 


        

        
Alternative content

6. Это запустит .swf файл на вашей странице. Вы можете управлять многими параметрами, с помощью следующего кода: 

var params = {
	allowScriptAccess: "sameDomain",
	allowFullScreen: "true",
	wmode: "opaque",
	quality: "high",
	menu: "false"
      };

FlowPlayer


Если у вас есть много видео, которые сделаны с использованием flash и они в формате .flv, то вам необходимо создать flash плеер. Есть много видео-плееров и услуги, которые доступны по разным ценам. Я выбрал FlowPlayer. Он на рынке достаточно давно и уже обзавелся большим сообществом.

Есть несколько вариантов для реализации FlowPlayer. FlowPlayer.org имеет две версии: флэш-плеер под названием Flowplayer flash и HTML5 implementation. Вторая имеет бесплатный вариант для разработчиков, в то время как для flash нужно купить лицензию.

Flash Flowplayer имеет необходимые файлы для воспроизведения файлов .flv, в то время как, HTML5 плеер стандартные форматы HTML5 файлов (MP4). Итак, почему стоит выбрать версию HTML5? Она предлагает довольно много вещей, с которыми можно заставить ваш плеер делать вещи без самостоятельного программирования. Все зависит от ваших потребностей.

Некоторые встраивают плеер на сайт в то время как хостинг видео находится в другом месте. Мы же встроим видео плеер в наш сайт и разместим файлы локально. Для этого нужно:

1. Убедиться, что следующие файлы загружены:

  • flowerplayer-3.2.x.min.js → есть более поздние версии, так что вам нужно будет загрузить последнюю, если это не сработает вернуться к .12/.13
  • flowplayer-controls-3.2.15.swf
  • flowplayer-3.2.16.swf

2. В шапку HTML нужно добавить следующее:

3. В теле вашей веб-страницы, вам нужно установить плеер с src файлом:

В этом примере я использовал переменную, основанную на выборе пользователя из предыдущей страницы.

Убедитесь что вы используете полный URL файла: yourwebsite.com/yourfilelocation/nameofyourfile.flv

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

Вы добавили файл и id, теперь нужно прописать код который запустит файл:

Итог


После прочтения этой статьи вы должны иметь хорошее понимание ключевых элементов, необходимых для работы mp4 и .flv файлов на вашем сайте. Конечно, вы можете управлять параметрами и делать другие вещи, но целью этой статьи было дать вам, понимание деталей, при настройке стримминга.

Комментарии (1)

  • 9 августа 2016 в 16:14

    0

    ↑

    ↓

    Как использовать HTML5, для проигрывания различных стриминговых видео файлов, включая .flv
    По сути прочитал статью только чтобы найти ответ на этот вопрос, но ответа не было
    После прочтения этой статьи вы должны иметь хорошее понимание ключевых элементов, необходимых для работы mp4 и .flv файлов на вашем сайте.
    В статье всё сумбурно и не содержится полезной информации, только запутывает

    Чтобы упорядочить свои знания, стоит проглядеть хотя бы эти ссылки:
    http://uppod.ru/help/html5/
    http://uppod.ru/help#video

© Habrahabr.ru