侧边栏壁纸
博主头像
Wood Chen博主等级

独唱独酬,独行独坐还独卧

  • 累计撰写 224 篇文章
  • 累计创建 161 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

苹果maccms使用自建播放器

wood
2024-09-25 / 0 评论 / 0 点赞 / 13 阅读 / 4788 字

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>

然后解析处这样设置

image|690x377

然后就可以正常播放了

image|690x441

0

评论区