typecho 添加插件支持视频播放

由于想使用typecho的博客播放一些视频,经过搜索得到了DPlayer这个插件。记录一下安装步骤

1. 安装DPlayer
   项目地址为：https://github.com/DIYgod/DPlayer ，从这里下载最新版本的DPlayer 插件 然后放置到plugins 目录下，并且在后台启用这个插件。
2. 添加Header
   在主题的header.php文件的header结束标签前 加入如下这段代码

   <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 window.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.isMirages() ? mirages.fixVideoSize(dps.length) : null;
           }));
       }
   };
   </script>

   然后关闭pjax。

3. 加入视频测试
   在文章中使用如下代码即可添加视频

   <dp src=""></dp>