Video.js HTML5播放器可以播放m3u8播放列表（HLS）？
Posted
技术标签:
【中文标题】Video.js HTML5播放器可以播放m3u8播放列表（HLS）？【英文标题】：Video.js HTML5 player can play m3u8 playlist(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' />
谁能帮帮我？
【问题讨论】：
【参考方案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 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"
data-setup=''>
<source src="index.m3u8" type="application/x-mpegURL">
</video>
<script>
</script>
</body>
</html>
【讨论】：
以上是关于Video.js HTML5播放器可以播放m3u8播放列表（HLS）？的主要内容，如果未能解决你的问题，请参考以下文章