Video.js HTML5播放器可以播放m3u8播放列表（HLS）？答案

【问题标题】：Video.js HTML5 player can play m3u8 playlist(HLS)?Video.js HTML5播放器可以播放m3u8播放列表（HLS）？
【发布时间】：2014-03-10 17:10:45
【问题描述】：

如何在 HTML5 播放器 Video.JS 中播放 HLS 流？我找了例子，这种类型的来源在哪里：

<source src="http://server/hls/stream007.m3u8" type='video/mp4' />

<source src="http://server/hls/stream007.m3u8" type='application/vnd.apple.mpegurl' />

<source src="http://server/hls/stream007.m3u8" type='application/x-mpegURL' />

谁能帮帮我？

【问题讨论】：

标签： html5-video video.js m3u8

【解决方案1】：

要在支持 HLS 的浏览器（Safari、iOS、某些 Android）上使用 HLS，请使用“application/x-mpegURL”。您仍然需要为不支持 HLS 的浏览器提供 mp4 后备。目前正在对其他浏览器中的 HLS 提供支持。

【讨论】：

对于不支持 HLS 的浏览器，我会发送相同的 RTMP 流。我会看到 Chrome 支持 HLS，但在我的 Windows 环境中它无法播放。

【解决方案2】：

我知道这是一篇旧帖子，但如果您想缓冲提要并执行以下操作，您可能会做的事情。

获取 .m3u8 文件，下载并提取其中的视频文件。下载这些文件并通过 ffmpeg 将它们转换为 mp4 文件，然后将它们链接在一起并在浏览器中播放。它很脏，但它会起作用。

【讨论】：

【解决方案3】：

您可以使用 Kaltura 播放器，该播放器使用适用于 IE8 的 flash 组件播放 HLS，并在 ios 设备和 android 4+ 上使用本机视频播放。

【讨论】：

【解决方案4】：

只需使用 mangui 自定义 videojs flash 播放器

https://github.com/mangui/video-js-swf

【讨论】：

【解决方案5】：

某些浏览器（如 edge）直接播放 ts 而不使用 video.js。参考this answer

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

对于其他浏览器，如 firefox 和 chrome，请像这样使用 video.js，

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</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>
  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="index.m3u8" type="application/x-mpegURL">
  </video>

  <script>
  </script>

</body>
</html>

【讨论】：