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

我正在尝试使用 HTTP Live Streaming (HLS)将视频流传送到我的电脑和 iPhone 上。在阅读了苹果的“ HTTP Live Streaming 概述”以及“为 iPhone 和 iPad 创建和部署 HTTP Live Streaming 媒体的最佳实践”之后，我有点不知所措。

我用我的源文件(mkv)和 ffmpeg 编码文件的 MPEG-TS 格式和苹果推荐的设置和基准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>

而且这个页面在 Chrome、 Safari 和我的 iPhone 上都不能用。W3school 上的 html5视频标签示例在我的电脑上运行良好，上面提到的苹果官方概述给出了一个与我的页面非常相似的 HTML 示例。然而，我的视频播放器完全没有反应，当我访问我自己的。M3u8页。

335297 次浏览
小开

回答这个问题可能有点晚，但是您需要在 video 标记中提供 MIME type 属性: type = “ application/x-mpegURL”。我用于16:9流的视频标签看起来像这样。

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

添加到 ben.bourdin 的答案，你至少可以在任何基于 HTML 的应用程序，检查浏览器是否支持 HLS 在其视频元素:

假设视频元素 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 函数返回:

“指定的音频/视频类型”没有支持的情况下

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

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

希望这个能帮上忙:)

最好的问候！

小开 
<html>
<body>
<video width="600" height="400" controls>
<source src="index.m3u8" type="application/x-mpegURL">
</video>
</body>

流 HLS 或 m3u8文件使用上述代码。 适用于桌面: Edge 女士浏览器(不适用于桌面 chrome) 还有 手机: 铬合金，迷你歌剧浏览器。

要在所有浏览器上播放，请使用基于 flash 的媒体播放器。 媒体播放器支持所有浏览器

小开

使用 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="$812975748999788" 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>

不同的方法可以在 lowplayer.org 的网站上找到。

小开

你可以使用 视频库轻松地播放 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>

GitHub 视频 Js

小开

标准的 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>

提交答案