使用 Video JS 播放 M3U8 或 TS 直播
Posted
技术标签:
【中文标题】使用 Video JS 播放 M3U8 或 TS 直播【英文标题】：Play M3U8 or TS live stream using Video JS 【发布时间】：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" 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" http://www.q7t1.com:8000/live/sYKADDaJs2/SnoQc6v4hZ/186.ts">
</video>
【问题讨论】：
不支持TS，但是Video.js可以播放你的m3u8文件：如果你在这里测试videojs-http-streaming.netlify.app 【参考方案1】：你可以试试这样的设置（修改自documentation example）：
<!DOCTYPE html>
<html>
<body>
<video id="live_video" 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>
【讨论】：
以上是关于使用 Video JS 播放 M3U8 或 TS 直播的主要内容，如果未能解决你的问题，请参考以下文章
Video.js HTML5播放器可以播放m3u8播放列表（HLS）？
H5播放m3u8 - ＜video＞＜source src=“xx.m3u8“/＞＜/video＞ - 使用video.js+HLS插件