m3u8视频播放HTML

m3u8视频播放HTML（1）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>前端播放m3u8格式视频</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><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>    <source type="application/x-mpegURL"> //source 标签是设置静态资源的，如果是通过video的api动态设置文件，这标签不需要，不然会有一些问题</video>
</body>
<script>    // videojs 简单使用  var myVideo = videojs('myVideo',{bigPlayButton : true, textTrackDisplay : false, posterImage: false,errorDisplay : false,})myVideo.src([{src: "https://live.lcc369.com/live/247866100233007104.m3u8?auth_key=1678843489-0-0-c8abe1cdd00202203638b7e749147049",type: "application/x-mpegURL", // 告诉videojs,这是一个hls流},]);myVideo.play() // 视频播放myVideo.pause() // 视频暂停
</script>
</html>

m3u8视频播放HTML（2）

<!DOCTYPE html>
<html lang=""><head><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.js"></script></head><body><video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> <source src="https://live.lcc369.com/live/247866100233007104.m3u8?auth_key=1678843489-0-0-c8abe1cdd00202203638b7e749147049" type="application/x-mpegURL"></video></body>
</html>