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

Основы


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

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

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


<video id="player" width="100%" height="auto" autoplay="autoplay" controls>
 <source src="Name of your file" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
</video>

Пару вещей которые стоит запомнить:

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

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

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

<script type='text/javascript'> 
 var elem = document.getElementById('player');
if (elem.requestFullscreen) {
 elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
 elem.webkitRequestFullscreen();
} ;
</script>

Причиной того что видео не работает на сайте может быть отсутствие доступа к серверу, некорректное имя файла, не полный исходный 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. Разместить его на странице:

<script type="text/javascript" src="../swfobject.js"></script>
	<script type="text/javascript">
	swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
	</script>


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

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

<script type="text/javascript">
	 swfobject.embedSWF("YourContentLocation.swf", "myContent", "300", "120", "9.0.0");
	 </script>


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

<body>
        <div id="myContent">
        <p>Alternative content</p>
	</div>
	</body>


5. Это запустит .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 нужно добавить следующее:

<script type='text/javascript' src='../yourdirectory/flowplayer-3.2.12.min.js'></script>
<script type='text/javascript' src='.../yourdirectory/flowpayer.control-3.2.16.swf'></script>


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

<a href="<?php echo $FinalName; ?>"
   style="display:block;width:525px;height:425px;"
   id="player">
</a>

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

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

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

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

<script language="JavaScript">
  flowplayer("player", "../private/flowplayer-3.2.16.swf");
</script>

Итог


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

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


  1. Shannon
    09.08.2016 16:14
    #9743408
    +5

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

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

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


  1. asd111
    09.08.2016 16:18
    #9743418

    Было бы неплохо добавить в статью stream серверы, например бесплатныйNimble и коммерческий wowza


  1. AigizK
    09.08.2016 17:09
    #9743520

    Расскажи следующие моменты для HTML5:
    1. когда пользователь переключается на fullscreen как подсунуть видео лучшего качества?
    2. как отдать начало видео из CDN, и если он продолжает смотреть, то остальные части из своего хранилища

    А вообще почитайте блог одноклассников здесь же, они очень подробно писали про свои решения


  1. bugs2bugs
    09.08.2016 17:20
    #9743540
    +2

    Ни слова про манипуляции с видео, какие есть event'ы, API для работы с видео, возможности прикрутить разные аудио дорожки, субтитры
    Хоть пару слов про DRM (widewine, play ready), что в разных браузерах — различные имплементации, организация манифест файла для стриминга
    Как организовать fallback на flash или, прости господи, silverlight

    uppod — если быстро прикрутить видео на сайт со своего хостинга (уловно-бесплатен)
    shaka player — opensource, который достоин отдельной статьи


  1. k0ldbl00d
    09.08.2016 17:32
    #9743570
    +6

    Воспроизведение файла с сервера — это не «живая видеотрансляция» и не потоковое видео. Увидев заголовок, надеялся увидеть что-то действительно новое, например воспроизведение HLS в Chrome Desktop без использования сторонних библиотек вроде hls.js.


    1. k0ldbl00d
      09.08.2016 18:32
      #9743666
      +4

      И, как мне показалось, у автора совершенно нет понимания что такое swf и Flash вообще.


    1. serega011
      10.08.2016 09:39
      #9744336

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


  1. f0rk
    09.08.2016 18:29
    #9743662
    +4

    Бестолковая статья. Во-первых — не про стриминг, во-вторых — даже описание воспроизведения файлов никуда не годится. Не надо такие писать.


  1. sashabeep
    10.08.2016 10:12
    #9744410
    +1

    А про трансляцию в какой части статьи написано?


  1. mushamib
    12.08.2016 01:39
    #9747704
    +1

    название немного не соответствует контенту