m3u8视频播放HTML（1）
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频title>
<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>
<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>
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",
},
]);
myVideo.play()
myVideo.pause()
script>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
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>