使用HTML视频标签播放m3u8文件 [英] Playing m3u8 Files with HTML Video Tag
问题描述
我正在尝试使用HTTP实时流式传输（HLS）将视频传输到我的电脑和我的iPhone。在阅读Apple的'HTTP Live Streaming Overview'以及'为iPhone和iPad创建和部署HTTP Live流媒体的最佳实践'后，我有点卡住了。
我把我的源文件（一个MKV），并使用ffmpeg来编码文件的MPEG-TS格式和Apple推荐的设置和基线3.0配置文件：
ffmpeg -iexample.mkv-f mpegts -threads：v 4 -sws_flags bicubic -vfscale = 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 -afaresample = 48000-codec ：a libvo_aacenc -b：a 96k -ac 2 -youtput.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 =352height =288src =stream.m3u8controls autoplay>
< / video>
< / div>
< / body>
< / html>
此页面在我的iPhone上的Chrome，Safari和Safari中无法使用。 w3schools上的html5视频标签示例在我的电脑上运行良好，上面提到的官方Apple概述给出了一个与我的页面非常相似的HTML示例。然而，当我访问我自己的.m3u8页面时，我的视频播放器完全没有反应。
解决方案可能有点晚了，但您需要在视频标记中提供MIME类型属性：type =application / x-mpegURL。我用于16：9流的视频标签如下所示。
< video width =352height = 198控件>
< source src =playlist.m3u8type =application / x-mpegURL>
< / video>
I am trying to use HTTP Live Streaming (HLS) to stream video to my computers and my iPhone. After reading through the Apple 'HTTP Live Streaming Overview' as well as 'Best Practices for Creating and Deploying HTTP Live Streaming Media for the iPhone and iPad', I am a bit stuck.
I took my source file (an mkv) and used ffmpeg to encode the file the MPEG-TS format and Apple-recommended settings and a Baseline 3.0 profile:
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"
No worries there. I used a pre-compiled segmenting tool to segment the video and build a .m3u8 playlist. The resultant file looked like this:
#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
I checked that against some Example Playlist Files for use with HTTP Live Streaming, and I don't see any issues. I also tried playing the .m3u8 file in VLC, and it works like a charm.
I created an HTML page to play the file:
<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>
And this page does not work in Chrome, Safari, on my iPhone. The html5 video tag examples on w3schools work fine on my computer, and the official Apple overview mentioned above gives an HTML example very similar to my page. Nevertheless, my video player is completely unresponsive when I visit my own .m3u8 page.
Might be a little late with the answer but you need to supply the MIME type attribute in the video tag: type="application/x-mpegURL". The video tag I use for a 16:9 stream looks like this.
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
这篇关于使用HTML视频标签播放m3u8文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
