播放带有 HTML 视频标签的 m3u8 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19782389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Playing m3u8 Files with HTML Video Tag
提问by drucifer
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.
我正在尝试使用 HTTP Live Streaming (HLS) 将视频流式传输到我的计算机和我的 iPhone。在阅读了 Apple 的“HTTP 实时流媒体概述”以及“为 iPhone 和 iPad 创建和部署 HTTP 实时流媒体的最佳实践”之后，我有点被困住了。
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:
我拿了我的源文件（一个 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"
No worries there. I used a pre-compiled segmenting toolto segment the video and build a .m3u8 playlist. The resultant file looked like this:
那里不用担心。我使用预编译的分段工具对视频进行分段并构建一个 .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
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.
我检查了一些与 HTTP Live Streaming 一起使用的示例播放列表文件，我没有看到任何问题。我还尝试在 VLC 中播放 .m3u8 文件，它的效果非常好。
I created an HTML page to play the file:
我创建了一个 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>
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.
这个页面在我的 iPhone 上的 Chrome、Safari 中不起作用。w3schools 上的 html5 视频标签示例在我的电脑上运行良好，上面提到的 Apple 官方概述给出了一个与我的页面非常相似的 HTML 示例。然而，当我访问我自己的 .m3u8 页面时，我的视频播放器完全没有响应。
回答by ben.bourdin
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.
答案可能有点晚，但您需要在视频标签中提供 MIME 类型属性：type="application/x-mpegURL"。我用于 16:9 流的视频标签如下所示。
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
回答by Rakyesh Kadadas
You can use video jslibrary for easily play HLS video's. It allows to directly play videos
您可以使用视频 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>
回答by Rakyesh Kadadas
<html>
<body>
<video width="600" height="400" controls>
<source src="index.m3u8" type="application/x-mpegURL">
</video>
</body>
Stream HLS or m3u8 files using above code. it works for desktop: ms edgebrowser (not working with desktop chrome) and mobile: chrome,opera minibrowser.
使用上述代码流式传输 HLS 或 m3u8 文件。它适用于桌面：ms edge浏览器（不适用于桌面 chrome）和移动：chrome，opera mini浏览器。
To play on all browser use flash based media player. media player to support all browser
要在所有浏览器上播放，请使用基于 Flash 的媒体播放器。 支持所有浏览器的媒体播放器
回答by MaxTomasello
Adding to ben.bourdin answer, you can at least in any HTML based application, check if the browser supports HLS in its video element:
添加到 ben.bourdin 答案中，您至少可以在任何基于 HTML 的应用程序中，检查浏览器是否在其视频元素中支持 HLS：
Let′s assume that your video element ID is "myVideo", then through javascript you can use the "canPlayType" function (http://www.w3schools.com/tags/av_met_canplaytype.asp)
假设您的视频元素 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
}
The canPlayType function, returns:
canPlayType 函数，返回：
"" when there is no support for the specified audio/video type
"" 当不支持指定的音频/视频类型时
"maybe" when the browser might support the specified audio/video type
“可能”当浏览器可能支持指定的音频/视频类型时
"probably" when it most likely supports the specified audio/video type (you can use just this value in the validation to be more sure that your browser supports the specified type)
“可能”当它最有可能支持指定的音频/视频类型时（您可以在验证中仅使用此值以确保您的浏览器支持指定的类型）
Hope this help :)
希望这有帮助:)
Best regards!
此致！
回答by JWC May
Use 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="2975748999788" 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>
Different methods are available in flowplayer.org website.
flowplayer.org 网站上提供了不同的方法。
