Как воспроизвести плейлист m3u8 во всех браузерах ПК? - PullRequest
Новая
       7

Как воспроизвести плейлист m3u8 во всех браузерах ПК?

27 голосов
/ 01 апреля 2011

По умолчанию файлы m3u8 могут воспроизводиться в браузере Mac Safari, но не в любых других браузерах на рабочем столе. Что нужно сделать, чтобы воспроизвести их во всех браузерах, поддерживающих как HTML5, так и не HTML5?

Ответы [ 4 ]

10 голосов
/ 29 октября 2012

К сожалению, поддержка HTML5 для видео настолько фрагментирована, что она, по сути, бесполезна (по крайней мере, как основной фокус) в данный момент времени. Списки воспроизведения M3U8 представляют собой Apple HTTP Live Streaming, и, как вы можете судить по названию, они (или, по крайней мере, начинали как) стандарт Apple, ни один другой браузер не использует их или HTTP Live Streaming.

Есть несколько программ, которые вы можете установить, чтобы добавить поддержку HLS. Некоторые компании, например, выпускают плееры HLS, написанные на Flash или Silverlight. Yospace выпустил флэш-SDK для воспроизведения HLS, который включает медиа-провайдер JWPlayer, который позволяет использовать автоматический переход HTML5 JW на не флэш-устройства (читай: iPhone / iPad), в то время как все остальные получают опыт JWPlayer.

От разных компаний было много обещаний "стандартизировать поддержку видео в браузерах", но все они (пока) ни к чему не привели, поэтому, какой бы вариант вы ни выбрали, это будет своего рода компромисс.

4 голосов
/ 13 июня 2016

Microsoft Edge воспроизводит файлы m3u8, но у вас должны быть windows 8 или 10 ... Просто откройте Microsoft Edge и напишите URL-адрес файла m3u8, и он начнет воспроизведение.

2 голосов
/ 03 января 2017

Я использовал flowplayer.Его очень легко установить и запустить, он работает во всех браузерах и является бесплатным, если только вы не хотите использовать собственный бренд ... (в отличие от JW-плеера).

Загрузите Flow Player здесь Загрузка Flow Player

Мне удалось настроить воспроизведение HLS, следуя этой демонстрации.

HLS Demo

Стоит отметить, что демо не упоминает о том, что

  1. Вам понадобится jquery> 1.7
  2. Вы включите скин игрока в CSSв HTML

Вот моя рабочая страница, на которой работает HLS, например: 

<!DOCTYPE html>
<html>
   <head>
      <title>Player</title>
      <link rel="stylesheet" href="/client/static/flowplayer-6.0.5/skin/functional.css">
      <script src="/client/static/flowplayer-6.0.5/jquery-1.12.4.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.hlsjs.min.js"></script>
   </head>
   <body>
      <div>
         <h3>Sample Video</h3>
      </div>
      <div id="player">
        <div data-live="false" data-ratio="0.5625" class="flowplayer fixed-controls" data-volume="0" style="max-width: 800px; max-height: 450px;">
            <video data-title="Sample Video">
            <source type="application/x-mpegurl" src="http://:8000/video_cache/d_stream_f7ccc24921ca6123d80d7d1a1a4bfaa1/stream_f7ccc24921ca6123d80d7d1a1a4bfaa1.m3u8">
            </video>
        </div>
         <p hidden id="vid">f7ccc24921ca6123d80d7d1a1a4bfaa1</p>
      </div>
   </body>
</html>
0 голосов
/ 26 мая 2011

Я не совсем понимаю , в чем заключается сделка с плейлистами .m3u8 ... но они мне не особо нравятся .. Тем не менее, это кажется думаю он делает то, что вы хотите ... github / etianen / html5media

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

Все, что вам нужно сделать, это встроить JavaScript в документ HTML.и какая-то магия, или ее отсутствие ... делает все остальное .. 

<script src="/path/to/your/html5media.min.js"></script>

Мне удалось воспроизвести фильмы .m3u8, потоковую передачу с сервера Wowza в настольных браузерах через встроенную HTML-вставку,как ... 

<video src="video.mp4" width="320" height="240" controls preload></video>

Я НЕ, однако, пока не смог заставить их перейти на "полный экран" с помощью встроенных элементов управления HTML ... но я смотрю на это ..

...