苹果cms后台新增一个播放器内容为
MacPlayer.Html = '<iframe border="0" src="'+maccms.path+'/static/player/artplayer.html" width="100%" height="100%" marginWidth="0" frameSpacing="0" marginHeight="0" frameBorder="0" scrolling="no" vspale="0" noResize></iframe>';
MacPlayer.Show();然后去网站根目录下的static/player内创建一个artplayer.html 内容为
<!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.0">
<title>ArtPlayer 播放器</title>
<style type="text/css">
html,body{width:100%;height:100%; padding:0; margin:0;}
#playerCnt{width:100%;height:100%;}
</style>
</head>
<body>
<div id="playerCnt"></div>
<!-- 引入 ArtPlayer 播放器的 JS 文件 -->
<script src="https://s4.zstatic.net/ajax/libs/artplayer/5.1.6/artplayer.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/hls.js/8.0.0-beta.3/hls.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/flv.js/1.6.2/flv.min.js"></script>
<script>
var art = new Artplayer({
container: document.getElementById('playerCnt'),
autoSize: false,//播放器自动填充container容器尺寸
aspectRatio: true,//右键画面长宽比例
playbackRate: true,//视频播放速度
flip: true,//视频翻转
setting: true,//设置按钮
// poster: 'https://api.byteamone.cn/Poster-background.php',//海报图预览图
theme: '#ffad00',//播放器主题颜色，目前只能表现在进度条上
volume: 0.7,//播放器默认音量
hotkey: true,//音量快进快捷键
autoplay: true,//自动播放
// muted: true,//要自动播放就必须开放这个。但是这个参数是禁音
screenshot: true,//截图功能
moreVideoAttr: {
crossOrigin: 'anonymous',
},//截图图片跨域问题
fullscreen: true,//全屏
fullscreenWeb: true,//网页全屏
pip: true,//画中画开关
autoMini: true,//当网页下滑到看不到播放器时自动进入迷你播放模式
lock: true,//移动端锁定播放器按钮
fastForward: true,//移动端长按快进功能
autoOrientation: true,//移动端根据尺寸自动旋转
url: parent.MacPlayer.PlayUrl,
customType: {
m3u8: function (video, url) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
} else {
const canPlay = video.canPlayType('application/vnd.apple.mpegurl');
if (canPlay === 'probably' || canPlay == 'maybe') {
video.src = url;
} else {
art.notice.show = '不支持播放格式：m3u8';
}
}
},
},
});
</script>
</body>
</html>该做的注解我都做了
