使用 Video JS 播放 M3U8 或 TS 直播

【问题标题】：Play M3U8 or TS live stream using Video JS使用 Video JS 播放 M3U8 或 TS 直播
【发布时间】：2022-01-03 02:45:12
【问题描述】：

我正在尝试使用 VideoJS 播放直播：

https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8

(1) 我尝试使用.m3u8 播放列表：

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

(2) 我尝试使用.ts 视频文件网址：

<video id='hls-example' class="video-js vjs-default-skin" width="500" height="400"http://www.q7t1.com:8000/live/sYKADDaJs2/SnoQc6v4hZ/186.ts">
</video>

【问题讨论】：

不支持TS，但是Video.js可以播放你的m3u8文件：如果你在这里测试videojs-http-streaming.netlify.app

标签： video html5-video http-live-streaming video.js

【解决方案1】：

你可以试试这样的设置（修改自documentation example）：

<!DOCTYPE html>
<html>

<body>

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

</body>

<!-- Put these JS files together with this HTML file -->
<script src="video.js"></script>
<script src="videojs.hls.min.js"></script>

<script>
var player = videojs('live_video');
player.play();
</script>

</html>

PS：如果 Blogger 不允许您将 JS 文件上传到与 HTML 页面相同的位置（例如： 您的博客文章），请尝试加载 JS 文件来自一些外部服务器：

替换：

<script src="video.js"></script>
<script src="videojs.hls.min.js"></script>

与：

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

【讨论】：