使用OneManager搭建视频床,并修复DPlayer跨域无法播放的问题 - Hello World

使用OneManager搭建视频床,并修复DPlayer跨域无法播放的问题

OneManager-php的安装太简单 直接上传到空间 进行安装即可

项目地址:https://github.com/qkqpttgf/OneManager-php

  1. 在模板底部 插入代码 (DPlayer播放器封装后的js文件)

     <script>
     // DPlayer API
     document.addEventListener('DOMContentLoaded', initDplayer);
     function initDplayer() {
         const common = {
             loadResource: function (id, resource, type, callback) {
                 let loaded = document.head.querySelector('#' + id);
                 if (loaded) {
                     callback();
                     return;
                 }
                 const element = document.createElement(type);
                 element.onload = element.onreadystatechange = () => {
                     if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
                         element.onload = element.onreadystatechange = null;
                         loaded = true;
                         callback();
                     }
                 }
                 if (type === 'link') {
                     element.rel = 'stylesheet';
                     element.href = resource;
                 } else {
                     element.src = resource;
                 }
                 element.id = id;
                 document.getElementsByTagName('head')[0].appendChild(element);
             },
             loadResources: function (callback) {
                 const cdn = '//s0.pstatp.com/cdn/expire-1-M';
                 const resources = [
                     '/dplayer/1.25.0/DPlayer.min.css',
                     '/dplayer/1.25.0/DPlayer.min.js',
                     '/hls.js/0.12.4/hls.light.min.js',
                     '/flv.js/1.5.0/flv.min.js'
                 ];
                 let unloadedResourceCount = resources.length;
                 resources.forEach(resource => {
                     this.loadResource(btoa(resource).replace(/[=+\/]/g, ''), cdn + resource,
                         ({
                             'css': 'link',
                             'js': 'script'
                         })[resource.split('.').pop()],
                         () => --unloadedResourceCount ? null : callback()
                     );
                 });
             },
             createDplayers: function (sources, callback) {
                 for (let i = 0; i < sources.length; i++) {
                     const child = document.createElement('div');
                     const src = sources[i].getAttribute('src');
                     sources[i].parentNode.insertBefore(child, sources[i]);
                     sources[i].style.display = 'none';
                     const type = src.split('.').pop();
                     const option = { url: src };
                     type === 'flv' ? option.type = type : null;
                     const dplayer = new DPlayer({ container: child, preload: 'none', autoplay: false, screenshot: false, video: option });
                 }
                 if (typeof callback === 'function') callback();
             }
         };
         const mirages = {
             isMirages: function () { return Mirages || false },
             fixVideoSize: function (length) {
                 let outerTimer = false;
                 const outerInterval = setInterval(() => {
                     if (outerTimer) return;
                     const videos = document.getElementsByTagName('video');
                     if (videos.length === length) {
                         const dplayerWraps = document.querySelectorAll('.dplayer-video-wrap');
                         for (let i = 0; i < length; i++) {
                             const videoContainers = dplayerWraps[i].querySelectorAll('.video-container.video-4-3');
                             if (videoContainers.length) {
                                 videoContainers[0].style = 'position: initial;';
                                 videoContainers[0].className = 'video-container video-16-9';
                                 console.log('video-4-3 fixed.');
                             } else {
                                 const videoContainer = document.createElement('div');
                                 videoContainer.style = 'position: initial;';
                                 videoContainer.className = 'video-container video-16-9';
                                 videoContainer.appendChild(videos[i]);
                                 dplayerWraps[i].appendChild(videoContainer);
                                 console.log('video-16-9 inserted.');
                                 const targetNode = videoContainer;
                                 const config = { childList: true };
                                 const callback = (mutationsList, observer) => {
                                     const newVideoContainers = videoContainer.querySelectorAll(
                                         '.video-container.video-4-3');
                                     if (newVideoContainers.length) {
                                         newVideoContainers[0].className = '';
                                         console.log('auto inserted video-4-3 fixed.');
                                         observer.disconnect();
                                     }
                                 };
                                 const observer = new MutationObserver(callback);
                                 observer.observe(targetNode, config);
                                 setTimeout(() => observer.disconnect(), 1000 * 120);
                             }
                         }
                         outerTimer = true;
                         clearInterval(outerInterval);
                     }
                 }, 500);
             }
         };
         const dps = document.getElementsByTagName('dp');
         if (dps.length !== 0) {
             common.loadResources(() => common.createDplayers(dps, () => {
                 // 修正 Mirages 视频比例错误
                 mirages.isMirages() ? mirages.fixVideoSize(dps.length) : null;
             }));
         }
     };
     </script>
  2. 在模板头部 插入代码 (解决DPlayer播放器跨域无法播放的问题)

    <meta name="referrer" content="no-referrer" />
    该代码可以会导致 一些BUG 推荐使用下面这个
    <meta name="referrer" content="same-origin">
    参考文章:
    https://forum.typecho.org/viewtopic.php?p=50257&hilit=referrer#p50257
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy
  3. 调用方法 在写文章的时候 直接插入代码即可 (去掉1)

    <dp src="你的视频地址"></dp>

    至此教程结束