播放带有 HTML 视频标签的 m3u8 文件答案

【问题标题】：Playing m3u8 Files with HTML Video Tag播放带有 HTML 视频标签的 m3u8 文件
【发布时间】：2013-11-15 22:29:52
【问题描述】：

我正在尝试使用 HTTP 实时流 (HLS) 将视频流式传输到我的计算机和我的 iPhone。在阅读了 Apple 的“HTTP Live Streaming Overview”以及“为 iPhone 和 iPad 创建和部署 HTTP Live Streaming Media 的最佳实践”之后，我有点卡住了。

我获取了我的源文件（一个 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"

不用担心。我使用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 视频标签示例在我的计算机上运行良好，上面提到的官方 Apple 概述提供了一个与我的页面非常相似的 HTML 示例。然而，当我访问自己的 .m3u8 页面时，我的视频播放器完全没有响应。

【问题讨论】：

可以显示 mediastreamvalidator 工具的输出吗？
感谢您的回复！不幸的是，我还没有花钱成为一个“真正的”苹果开发者，所以我没有那个特定的工具。我一直在寻找可能的替代品，但收效甚微。欢迎您在这方面提供任何建议！
也许您可以将文件放在公共网络服务器上。如果您需要免费的网络服务器，您可以使用微型 Amazon EC2 实例。然后可以访问更多工具的人可以看看。实际上，这让我想知道您的网络服务器返回的 mime 类型...看看这是否有帮助：stackoverflow.com/questions/6438680/…
您是否尝试过在您的 safari 上直接浏览 m3u8，而不是通过 html？例如，如果您的 m3u8 文件存在于服务器上的myserver/mymoviue.m3u8 下，那么在此处浏览应该会显示视频。如果这不起作用，那么您的问题不在 HTML 中。
Windows 桌面 Chrome caniuse.com/#search=hls 仍然不支持 HLS，但它只适用于我的旧 iPhone。

标签： html streaming html5-video http-live-streaming m3u8

【解决方案1】：

答案可能有点晚，但您需要在视频标签中提供 MIME 类型属性：type="application/x-mpegURL"。我用于 16:9 流的视频标签如下所示。

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

【讨论】：

如果有其他人测试过这个答案，请注意它不适用于 Chrome。在 Edge 中运行良好。查看answer，了解有关浏览器兼容性解决方案的更多信息。
HLS 不会在 Chrome 上的页面中仅在视频标签中进行流式传输，因为它不是 HLS 的本机浏览器。
这对我来说不是很好。也许是因为我正在使用video-react 包

【解决方案2】：

您可以使用 video 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>

GitHub Video Js

【讨论】：

videojs 无法在 iOS 上播放我加密的 HLS 视频

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

使用上述代码流式传输 HLS 或 m3u8 文件。它适用于桌面：ms edge 浏览器（不适用于桌面 chrome）和移动设备：chrome、opera mini 浏览器。

要在所有浏览器上播放，请使用基于 Flash 的媒体播放器。 media player to support all browser

【讨论】：

如果您想直接播放 .m3u8（HLS 文件），请从 chrome 网络应用添加名为 Native HLS Playback 的 chrome 扩展。跨度>
此解决方案不起作用。我在 Firefox 和 Chrome 上试过。即使安装 Native HLS Playback 也不能解决问题。

【解决方案5】：

添加到 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 函数，返回：

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

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

“可能”当它最有可能支持指定的音频/视频类型时（你可以在验证中只使用这个值来更确定你的浏览器支持指定的类型）

希望有帮助:)

最好的问候！

【讨论】：

【解决方案6】：

使用 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>

flowplayer.org 网站提供了不同的方法。

【讨论】：

这里的api 是什么？
上面没有显示任何内容。为什么？注释掉 <script> flowplayer(function(api) {... 在浏览器中显示媒体播放器屏幕。为什么？脚本标签出了什么问题？有人可以帮忙吗？