苹果cms添加hls播放器

hls播放器是国外开源播放器,安全性较高,下面我们一起来在苹果cms里添加这个播放器吧!

  • 1.打开苹果cms的播放器目录“/static/player”,新建一个目录名称为“hls”在新建的“hls”里新建一个js文件名称为“hls”,把此链接里的js代码复制到新建的“hls.js”里,https://cdn.jsdelivr.net/npm/hls.js@latest
  • 2.在“ /static/player”内新建一个“hls.html”把此代码复制进去: 
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>HLS 播放器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
        <style>
            html, body {
                width: 100%; height: 100%;
                margin: 0; padding: 0;
                background: #000;
            }
            #player-container {
                width: 100%; height: 100%;
                background: #000;
                position: relative;
            }
            video {
                width: 100%; height: 100%;
                object-fit: contain;
                background: #000;
            }
        </style>
        <!-- 引入 Hls.js,路径即 /static/player/hls/hls.js -->
        <script src="/static/player/hls/hls.js"></script>
    </head>
    <body>
    
    <div id="player-container">
        <video id="video" controls playsinline></video>
    </div>
    
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        var video = document.getElementById('video');
    
       
        var videoUrl = parent.MacPlayer.PlayUrl;
        var nextVideoLink = parent.MacPlayer.PlayLinkNext; 
    
        if (!videoUrl) {
            alert("未找到视频地址!");
            return;
        }
    
        
        if (videoUrl.indexOf('.m3u8') > -1) {
            if (Hls.isSupported()) {
                var hls = new Hls({
                    maxBufferLength: 60,         // 最大缓冲时长(秒)
                    maxMaxBufferLength: 120,     // 允许最大缓冲长度
                    maxBufferSize: 60 * 1000 * 1000,  // 最大缓冲字节数
                    maxBufferHole: 0.5,          // 允许的缓冲空洞
                    lowLatencyMode: true,        // 低延迟模式(适用于直播)
                    backBufferLength: 90,        // 允许的后台缓冲时长(秒)
                    preloadTime: 30,             // 预加载时间(秒)
                    maxConcurrentRequests: 30,   // 同时并发请求的分片数
                    fragLoadingTimeOut: 20000,   // 片段加载超时时间(毫秒)
                    fragLoadingRetryDelay: 1000, // 片段加载失败重试间隔(毫秒)
                    fragLoadingMaxRetry: 6,      // 片段加载最大重试次数
                    startFragPrefetch: true,     // 预取下一片段,提高快进体验
                    enableWorker: true,          // 启用 Web Worker,提高解析效率
                    xhrSetup: function (xhr, url) {
                        xhr.withCredentials = false;
                        xhr.responseType = 'arraybuffer';
                        xhr.open('GET', url, true);
                    }
                });
    
                hls.loadSource(videoUrl);
                hls.attachMedia(video);
    
                
                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    video.play();
                });
    
               
                hls.on(Hls.Events.ERROR, function (event, data) {
                    console.warn("HLS 播放错误:", data);
                });
    
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                // iOS Safari 原生支持 HLS
                video.src = videoUrl;
                video.play();
            } else {
                alert("当前浏览器不支持 HLS 播放");
            }
    
        } else {
            
            video.src = videoUrl;
            video.play();
        }
    
        
        video.addEventListener('ended', function () {
            if (nextVideoLink) {
                top.location.href = nextVideoLink;
            }
        });
    
    });
    </script>
    
    </body>
    </html>
    

     

  • 3.打开苹果cms后台的播放器设置,资源站都提供了播放器,打开播放器把播放器代码改为:
    MacPlayer.Html = '<iframe border="0" '
        + 'src="' + maccms.path + '/static/player/hls.html" '
        + 'width="100%" height="100%" marginWidth="0" frameSpacing="0" '
        + 'marginHeight="0" frameBorder="0" scrolling="no" '
        + 'allowfullscreen="true"></iframe>';
        
    MacPlayer.Show();

    仅支持m3u8视频链接,需关闭或禁止解析。苹果cms添加hls播放器
    hls播放器开源地址;https://github.com/video-dev/hls.js

版权声明:图图 发表于 2025-03-23 14:37:27。
转载请注明:苹果cms添加hls播放器 | 站长资源站Pro|站长资源|建站教程

暂无评论

暂无评论...