Воспроизведение с потоковой передачей файлов video.js ustream m3u8

Я пытался воспроизвести на веб-странице потоковый файл m3u8 с помощью video.js, но мне это не удалось, я не знаю, где ошибка.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>

  <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.12/video.js"></script>
 <script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
  <script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>Video</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='video/mp4'>
  </video>

  <script>
  </script>

</body>
</html>

javascript html streaming video.js m3u8
person grigione    schedule 30.03.2015    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Вместо type='video/mp4' вам нужно type='application/x-mpegURL'.

Также проверьте, разрешены ли междоменные запросы (CORS).

Особенности хостинга

В отличие от собственной реализации HLS, технология HLS должна соответствовать политикам безопасности браузера. Это означает, что все файлы, составляющие поток, должны обслуживаться из того же домена, что и страница, на которой размещен видеопроигрыватель, или с сервера, на котором настроены соответствующие заголовки CORS. Доступны простые инструкции для популярных веб-серверов, и у большинства CDN не должно возникнуть проблем с включением CORS для вашей учетной записи.

Источник: https://github.com/videojs/videojs-contrib-hls.

CORS HowTo: http://enable-cors.org/server.html

person aergistal    schedule 31.03.2015
comment
Я также разместил type='application/x-mpegURL, но не работает. Как проверить, разрешен ли междоменный доступ? Я думаю, что кросс-домен предназначен только для флеш-плеера .... также для html-плеера? - person grigione; 31.03.2015
comment
video.js предлагает запасной вариант Flash (video-js.swf), поэтому вам может потребоваться добавить crossdomain.xml на сервер. У вас нет ошибок в консоли? - person aergistal; 31.03.2015
comment
Я пытаюсь использовать jsfiddle. Я добавил несколько библиотек, которые нашел в этом примере: github.com/videojs/videojs-contrib-hls/blob/master/example.html это моя демонстрация: jsfiddle.net/066hfjge/5 - person grigione; 31.03.2015
comment
Я попробовал ваш исходный код со своим собственным потоком, и это сработало. Использование источника ustream.tv приводит к ошибке CORS (Access-Control-Allow-Origin). Я обновлю ответ с инструкциями. - person aergistal; 31.03.2015
comment
ах, хорошо, но я не могу получить доступ к серверу ustream, в который я должен вставить ‹FilesMatch \.(rss)$› набор заголовков Access-Control-Allow-Origin * ‹/FilesMatch›, поэтому это невозможно .... с ustream - person grigione; 31.03.2015

arrow_upward
2
arrow_downward

Я нашел две самые мощные библиотеки hls для видео js

1.videojs-http-потоковая передача

Эта библиотека была создана из videojs-contrib-hls на основе следующего описания.

Примечание: этот проект будет объявлен устаревшим, и его заменит videojs-http-streaming. VHS поддерживает HLS и DASH и встроен в video.js 7, см. сообщение в блоге video.js 7.

Краткое описание библиотеки videojs-http-streaming выглядит следующим образом.

Воспроизведение HLS, DASH и будущих протоколов потоковой передачи HTTP с помощью video.js, даже если они изначально не поддерживаются. Включено в video.js 7 по умолчанию!.

Ссылка на Github: https://github.com/yanwsh/videojs-panorama

2.videojs-hlsjs-плагин

Краткое описание этой библиотеки выглядит следующим образом

Добавляет поддержку воспроизведения HLS в video.js 5.0+ с использованием библиотеки hls.js.

Сила библиотеки в использовании ее из библиотеки hls.js

Ссылка на github videojs-hlsjs-plugin: https://github.com/streamroot/videojs-hlsjs-plugin

Ссылка на github hls.js: https://github.com/video-dev/hls.js/

заключение

Я использовал проекты из обеих этих библиотек, и мой опыт их использования заключается в том, что библиотека videojs-hlsjs-plugin из-за использования мощной библиотеки hls.js может быть отличным вариантом для больших проектов.

person MostafaMashayekhi    schedule 21.10.2018

arrow_upward

arrow_downward

person    schedule
comment
Не могли бы вы уточнить свой ответ, добавив немного больше описания решения, которое вы предоставляете? - person abarisone; 13.05.2015
comment
Проигрыватель Videojs необходимо инициализировать... поэтому я добавил последний сегмент скрипта в тег body - person Ajay nandoriya; 13.05.2015
comment
Спасибо дружище. Это было действительно полезно :) Не могли бы вы сказать, в чем проблема с этим? stackoverflow.com/ вопросы/45924975/ - person Fayza Nawaz; 28.08.2017