xgplayer支持 m3u8,mp4,ts,flv 等格式，挺好用的。
不得不说，搜索引擎搜到的答案和ai回答的都是错误答案。
添加ckplayer播放器后，采集只需要采集m3u8资源，播放器都用自己的，既稳定，还能省去可能第三方有广告的问题。
在网站根目录创建一个xgplayer.html文件, 内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xgplayer-czl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="referrer" content="no-referrer" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
}
body {
display: flex;
}
#xgplayer {
flex: auto;
width:100% !important;
height: 100% !important;
}
</style>
<link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css">
</head>
<body>
<div id="xgplayer"></div>
<script src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset="utf-8"></script>
<script src="https://unpkg.byted-static.com/xgplayer-hls/3.0.10/dist/index.min.js" charset="utf-8"></script>
<script src="https://unpkg.byted-static.com/xgplayer-flv/3.0.10/dist/index.min.js" charset="utf-8"></script>
<script src="https://unpkg.byted-static.com/xgplayer-dash/3.0.0-alpha.2/dist/index.min.js" charset="utf-8"></script>
<script src="https://unpkg.byted-static.com/xgplayer-mp4/3.0.10/dist/index.min.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var vid = window.location.href.split("url=")[1];
if (!vid) {
console.error("视频URL未提供");
return;
}
// 加载存储的进度
var videoProgressKey = 'videoProgress_' + vid;
var videoProgress = JSON.parse(localStorage.getItem(videoProgressKey) || '{}');
var startTime = 0;
if (videoProgress.timestamp && (Date.now() - videoProgress.timestamp < 2592000000)) {
startTime = videoProgress.currentTime;
console.log('设置上次播放时间:', startTime);
}
var playerConfig = {
id: 'xgplayer',
url: vid,
autoplay: true, // 自动播放
volume: 0.7,
playbackRate: [0.25, 0.5, 0.75, 1, 1.5, 2, 3],
pip: true, // 画中画
airplay: true, // airplay
startTime: startTime, // 初始起播时间
screenShot: false, //显示截图按钮,
errorTips: `请<span>切换其他播放线路</span>试试`,
enableVideoDbltouch: true, // 移动端双击播放/暂停
playsinline: true, // 内联模式
leavePlayerTime: 5, // 鼠标移出后控制器隐藏速度
cssFullscreen: false, // 网页样式全屏
videoAttributes: {
crossOrigin: 'anonymous'
}, //允许跨域
};
var player;
if (vid.indexOf('.m3u8') > -1) {
playerConfig.plugins = [window.HlsPlayer];
player = new window.Player(playerConfig);
} else if (vid.indexOf('.flv') > -1) {
playerConfig.plugins = [window.FlvPlayer];
player = new window.Player(playerConfig);
} else if (vid.indexOf('.mpd') > -1) {
playerConfig.plugins = [window.DashPlayer];
player = new window.Player(playerConfig);
} else if (vid.indexOf('.mp4') > -1) {
playerConfig.plugins = [window.Mp4Player];
player = new window.Player(playerConfig);
} else {
player = new window.Player(playerConfig);
}
// 保存进度到 localStorage
setInterval(function () {
if (!player.paused) {
localStorage.setItem(videoProgressKey, JSON.stringify({
currentTime: player.currentTime,
timestamp: Date.now()
}));
console.log('保存播放进度:', player.currentTime);
}
}, 2000);
});
</script>
</body>
</html>
然后解析处这样设置
然后就可以正常播放了
评论区