如何使用VideoJS正确播放M3U8或TS格式的直播流？

原有方案失效原因 #

• 第一种.m3u8播放方案失效：低于7.x版本的VideoJS默认未内置HLS解码支持，非Safari内核浏览器无法直接解析HLS格式流；同时仅编写HTML标签未初始化VideoJS实例，无法激活播放器的流解析能力
• 第二种.ts文件播放方案失效：单个.ts是HLS直播流的分片片段，本身不包含完整的流索引信息，无法独立作为直播源播放；提交的代码还存在语法错误，video标签属性未闭合，缺少source标签定义

正确实现代码 #

使用8.x版本VideoJS（内置HLS播放支持）的完整实现如下：

<!-- 引入VideoJS核心样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet">
<!-- 引入VideoJS核心脚本 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>

<video id='hls-example' class="video-js vjs-default-skin" width="500" height="400" controls>
  <source type="application/x-mpegURL" src="https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8">
</video>

<script>
// 初始化播放器实例
const player = videojs('hls-example');
</script>

常见问题排查 #

• 若使用7.x以下旧版本VideoJS，需额外引入videojs-contrib-hls插件JS文件后再执行初始化操作
• 如出现跨域报错，说明直播源流站未配置你的域名访问权限，可通过自有服务端做流地址代理转发解决
• 测试时需通过HTTP服务启动页面，直接打开本地HTML的file协议会触发浏览器跨域限制，无法正常加载直播流

内容的提问来源于stack exchange，提问作者Linablog444