如何使用HTML视频标签播放m3u8文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (3805)

我正在尝试使用HTTP Live Streaming(HLS)将视频流式传输到我的电脑和我的iPhone上。在阅读了Apple的'HTTP Live Streaming Overview'以及'为iPhone和iPad创建和部署HTTP Live流媒体的最佳实践'之后,我有点卡住了。

我带了我的源文件(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 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>

此页面在我的iPhone上的Chrome,Safari和Safari中无法使用。w3schools上的html5视频标签示例在我的电脑上正常工作,上面提到的官方Apple概述给出了一个与我的页面非常相似的HTML示例。不过,当我访问我自己的.m3u8页面时,我的视频播放器完全没有反应。

提问于
用户回答回答于

可以在任何基于HTML的应用程序中检查浏览器是否支持其视频元素中的HLS:

假设你的视频元素ID是“myVideo”,那么通过javascript你可以使用“canPlayType”函数

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函数返回:

“”当不支持指定的音频/视频类型时

“可能”,当浏览器可能支持指定的音频/视频类型时

“很可能”,当它最有可能支持指定的音频/视频类型时(可以在验证中使用这个值,以确保浏览器支持指定的类型)

用户回答回答于

需要在视频标记中提供MIME类型属性:type =“application / x-mpegURL”。我用于16:9流的视频标签看起来像这样。

<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>

所属标签

可能回答问题的人

  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • Richel

    8 粉丝0 提问4 回答
  • 发条丶魔灵1

    6 粉丝525 提问3 回答
  • 人生的旅途

    10 粉丝484 提问3 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励