1. 播放效果
2. init页面 播放文件代码
通过 iframe 的src 方式嵌入播放的页面，m3u8播放地址通过参数传入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="referrer" content="never">
<title>m3u8</title>
</head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<iframe
src="./video.html?hlsUrl=http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32ce48a8e5b0a791ce24.m3u8"
width="500px" height="50%"></iframe>
</body>
</html>
3. video页面 m3u8播放文件
需要引入第三方文件
DPlayer.min.js，hls.js，flv.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="referrer" content="never">
<title>m3u8</title>
</head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#dplayer {
width: 100%;
height: 100%;
}
.dplayer-controller-mask,
.dplayer-controller,
.dplayer-mobile-play,
.dplayer-notice-list {
display: none !important;
}
</style>
<body>
<div id="dplayer"></div>
</body>
<script src="./DPlayer.min.js"></script>
<script src="./hls.js"></script>
<script src="./flv.js"></script>
<script>
// 对地址进行解析
let url = location.href.split('?hlsUrl=')[1].replace('http:', '').replace('https:', '')
let dp = new DPlayer({
container: document.getElementById("dplayer"),
live: true,
autoplay: true,
preload: 'auto',
volume: 0,
hotkey: false,
lang: 'en',
video: {
url: url,
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
},
customFlv: function (video, player) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
},
},
},
});
dp.on('playing', () => {
dp.volume(1)
window.top.postMessage('playing');
document.getElementById('dplayer').setAttribute('style', 'pointer-events:none')
})
dp.on('canplay', () => {
dp && dp.paused && dp.play()
})
window.addEventListener("message", function (event) {
dp && dp.paused && dp.play()
})
</script>
</html>
4. 打开方式
请使用服务的方式打开，可以使用vscode的Open with Five Server打开，他会给你开一个本地的服务，然后进行访问。直接打开会报下面的错误
如果你的vscode没有，需要vscode装一个插件Live Server (Five Server) ，或者你可以直接放在服务器里面在访问html
