地址示例：
https://xn--xu0a.cn/u/?u=https://vip.lzcdn2.com/20220323/282_d4cfd29c/index.m3u8
html源码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#videoPlayer {
width: 100%;
height: 97vh;
}
</style>
<title>m3u8或mp4视频播放页</title>
</head>
<body>
<video id="videoPlayer" controls autoplay fullscreen></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
function getVideoUrl() {
var urlParams = new URLSearchParams(window.location.search);
var videoUrl = urlParams.get('u');
return videoUrl;
}
if (Hls.isSupported()) {
var video = document.getElementById('videoPlayer');
var hls = new Hls();
var videoUrl = getVideoUrl();
if (videoUrl) {
if (videoUrl.endsWith('.mp4')) {
video.src = videoUrl;
} else {
hls.loadSource(videoUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
} else {
alert('视频链接参数为空。')
}
}
</script>
</body>
</html>
