使用超文本标记语言视频标签播放m3u8文件
我正在尝试使用HTTP Live Streaming (HLS)将视频流式传输到我的计算机和iPhone。在阅读了苹果的“HTTP Live流媒体概述”和“为iPhone和iPad创建和部署HTTP Live流媒体的最佳实践”之后，我有点卡住了。
我拿起我的源文件(一个mkv)，并使用ffmpeg对该文件进行编码、MPEG-TS格式和Apple推荐的设置以及基线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>而且这个页面在我的iPhone上的Chrome、Safari浏览器中也不起作用。w3schools上的html5视频标签示例在我的电脑上运行良好，上面提到的苹果官方概览给出了一个与我的页面非常相似的HTML示例。然而，当我访问我自己的.m3u8页面时，我的视频播放器完全没有响应。
回答 4
Stack Overflow用户
发布于 2014-04-23 00:50:58
可能有点晚了，但您需要在视频标记中提供MIME类型属性:type=“type=/x-mpegURL”。我用于16:9流的video标签如下所示。
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>Stack Overflow用户
发布于 2020-06-25 19:02:39
标准的html5视频播放器直接支持mp4、WebM、3gp和OGV格式。
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>我们可以在web应用中添加一个外部的HLS js脚本。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your title</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
data-setup='{}'>
<source src="https://cdn3.wowza.com/1/ejBGVnFIOW9yNlZv/cithRSsv/hls/live/playlist.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html>Stack Overflow用户
发布于 2016-08-11 22:19:26
除了ben.bourdin answer，你至少可以在任何基于超文本标记语言的应用程序中，检查浏览器的视频元素是否支持超文本标记语言：
假设你的视频元素ID是"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函数返回：
"“不支持指定的音频/视频类型时
当浏览器可能支持指定的音视频类型时，会显示“可能”
“可能”，当它最有可能支持指定的音频/视频类型时(您可以在验证中仅使用此值，以确保您的浏览器支持指定的类型)
希望这能对您有所帮助:)
诚挚的问候!
https://stackoverflow.com/questions/19782389
复制相似问题