H5播放m3u8 - ＜video＞＜source src=“xx.m3u8“/＞＜/video＞ - 使用video.js+HLS插件
Posted Rudon滨海渔村
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5播放m3u8 - ＜video＞＜source src=“xx.m3u8“/＞＜/video＞ - 使用video.js+HLS插件相关的知识，希望对你有一定的参考价值。
效果图
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videojs视频播放DEMO</title>
<!--更多版本 https://www.bootcdn.cn/video.js/-->
<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<!--更多版本 https://www.bootcdn.cn/videojs-contrib-hls/-->
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
<h3>视频播放</h3>
<!-- poster="http://vjs.zencdn.net/v/oceans.png" 默认显示的封面 -->
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none">
<source src="../assets/20220120/out.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('example_video_1',
muted: true,
controls: true,
height: 300,
width: 400,
loop: true,
// 更多配置.....
);
</script>
</body>
</html>
以上是关于H5播放m3u8 - ＜video＞＜source src=“xx.m3u8“/＞＜/video＞ - 使用video.js+HLS插件的主要内容，如果未能解决你的问题，请参考以下文章
uni-app video标签打包H5Android上支持播放.m3u8 hls直播流
Video.js HTML5播放器可以播放m3u8播放列表（HLS）？