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视频链接,需关闭或禁止解析。
hls播放器开源地址;https://github.com/video-dev/hls.js
暂无评论...