Я пытаюсь использовать HTTP Live Streaming (HLS) для потокового видео на свои компьютеры и мой iPhone. После прочтения "HTTP Live Streaming Overview" Apple, а также "Лучшие практики для создания и развертывания потокового мультимедиа HTTP для iPhone и 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
Я проверил это против некоторых Пример файлов списка воспроизведения для использования с потоковым потоком HTTP, и я не вижу никаких проблем. Я также попытался воспроизвести файл .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 в теге видео: type = "application/x-mpegURL". Тег видео, который я использую для потока 16: 9, выглядит следующим образом.
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
<html>
<body>
<video width="600" height="400" controls>
<source src="index.m3u8" type="application/x-mpegURL">
</video>
</body>
Потоковые файлы HLS или m3u8, используя приведенный выше код. он работает для настольных компьютеров: браузер MS Edge (не работает с Chrome для настольных компьютеров) и мобильных устройств: Chrome, браузер Opera Mini.
Для воспроизведения на всех браузерах используйте Flash Media Player. медиа-плеер для поддержки всех браузеров
Добавив ответ ben.bourdin, вы можете по крайней мере в любом приложении на основе HTML проверить, поддерживает ли браузер HLS в своем элементе video:
Предположим, что ваш идентификатор видеоэлемента - "myVideo", и через javascript вы можете использовать функцию "canPlayType" (http://www.w3schools.com/tags/av_met_canplaytype.asp).
var videoElement = document.getElementById("myVideo");
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){
//Actions like playing the .m3u8 content
}
else{
//Actions like playing another video type
}
Функция canPlayType возвращает:
"" когда нет поддержки для указанного типа аудио/видео
"возможно", когда браузер может поддерживать указанный тип аудио/видео
"вероятно", когда он, скорее всего, поддерживает указанный тип аудио/видео (вы можете использовать только это значение в проверке, чтобы быть более уверенным, что ваш браузер поддерживает указанный тип)
Надеюсь это поможет :)
С наилучшими пожеланиями!
Вы можете использовать библиотеку видео JS для удобного воспроизведения видео HLS. Это позволяет напрямую воспроизводить видео
<!-- 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>
Использовать Flowplayer:
<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/commercial/skin/skin.css">
<style>
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//releases.flowplayer.org/7.0.4/commercial/flowplayer.min.js"></script>
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
<script>
flowplayer(function (api) {
api.on("load", function (e, api, video) {
$("#vinfo").text(api.engine.engineName + " engine playing " + video.type);
}); });
</script>
<div class="flowplayer fixed-controls no-toggle no-time play-button obj"
style=" width: 85.5%;
height: 80%;
margin-left: 7.2%;
margin-top: 6%;
z-index: 1000;" data-key="$812975748999788" data-live="true" data-share="false" data-ratio="0.5625" data-logo="">
<video autoplay="true" stretch="true">
<source type="application/x-mpegurl" src="http://live.wmncdn.net/safaritv2/live2.stream/index.m3u8">
</video>
</div>
Различные способы доступны на веб-сайте flowplayer.org.