Using a Self-Hosted Player with maccms

xgplayer supports formats such as m3u8,mp4,ts,flv and works quite well. I have to say, both the answers I found through search engines and the ai responses were wrong. After adding the ckplayer player, I only need to scrape m3u8 resources and use my own player for everything. It's stable and avoids potential ads from third-party players.

Create an xgplayer.html file in the website's root directory with the following content:

<!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;
            }

            // Load saved progress
            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, // Autoplay
                volume: 0.7,
                playbackRate: [0.25, 0.5, 0.75, 1, 1.5, 2, 3],
                pip: true, // Picture-in-picture
                airplay: true, // airplay
                startTime: startTime, // Initial playback position
                screenShot: false, //Show screenshot button,
                errorTips: `请<span>切换其他播放线路</span>试试`,
                enableVideoDbltouch: true, // Double-tap to play/pause on mobile
                playsinline: true, // Inline mode
                leavePlayerTime: 5, // Controls hide delay after the mouse leaves
                cssFullscreen: false, // CSS fullscreen
                videoAttributes: {
                    crossOrigin: 'anonymous'
                }, //Allow cross-origin requests

            };

            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);
            }

            // Save progress to 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>

Then configure the parser settings as shown below

Playback should now work normally