Я пытаюсь использовать HTTP Live Streaming (HLS) для потоковой передачи видео на мои компьютеры и iPhone. После ознакомления с обзором Apple 'HTTP Live Streaming Overview', а также 'Best Practices for Creating and Deploying HTTP Live Streaming Media for the iPhone and iPad', я немного застрял.
Я взял исходный файл (mkv) и использовал ffmpeg для кодирования файла в формат MPEG-TS и рекомендованные Apple настройки и профиль Baseline 3.0:
ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2 -y "output.ts"
Никаких проблем. Я использовал предварительно скомпилированный инструмент сегментирования для сегментации видео и создания плейлиста .m3u8. Получившийся файл выглядел следующим образом:
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://localhost/media/stream/stream-1.ts
#EXTINF:10,
http://localhost/media/stream/stream-2.ts
#EXTINF:10,
http://localhost/media/stream/stream-3.ts
#EXT-X-ENDLIST
Я сверил его с некоторыми Example Playlist Files for use with HTTP Live Streaming, и не увидел никаких проблем. Я также попробовал воспроизвести файл .m3u8 в VLC, и он работает как шарм.
Я создал HTML-страницу для воспроизведения файла:
<html lang="en">
<head>
<meta charset=utf-8/>
</head>
<body>
<div id='player'>
<video width="352" height="288" src="stream.m3u8" controls autoplay>
</video>
</div>
</body>
</html>
И эта страница не работает в Chrome, Safari, на моем iPhone. Примеры видеотегов html5 на w3schools прекрасно работают на моем компьютере, а в официальном обзоре Apple, упомянутом выше, приведен HTML-пример, очень похожий на мою страницу. Тем не менее, мой видеоплеер совершенно не реагирует, когда я посещаю свою собственную страницу .m3u8.
Возможно, я немного опоздал с ответом, но вам нужно указать атрибут типа MIME в теге video: type="application/x-mpegURL". Тег video, который я использую для потока 16:9, выглядит следующим образом.
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
Вы можете использовать видео Яш библиотека для легко играть ЗОЖ видео'ы. Это позволяет напрямую воспроизводить видео
<!-- CSS -->
<link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
<!-- HTML -->
<video id='hls-example' class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8">
</video>
<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
<script>
var player = videojs('hls-example');
player.play();
</script>
<html>
<body>
<video width="600" height="400" controls>
<source src="index.m3u8" type="application/x-mpegURL">
</video>
</body>