播放具有HTML视频标签的m3u8文件

我正在尝试使用HTTP Live Streaming(HLS)将视频流传输到我的电脑和我的iPhone.在阅读了Apple的HTTP Live Streaming概述之后,以及“为iPhone和iPad创建和部署HTTP Live Streaming Media的最佳做法”,我有点困惑.

我使用了我的源文件(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"

不用担心我用了pre-compiled segmenting tool来分割视频并构建一个.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年,我没有看到任何问题.我也尝试在VLC中播放.m3u8文件,它的作用就像一个魅力.

我创建了一个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上不起作用. w3schools上的html5视频标签示例在我的电脑上工作正常,上述官方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视频标签的m3u8文件

解决方法

相关文章