MENU

Typecho 引入 DPlayer 的简单方法

2019 年 05 月 29 日 • 阅读: 722 • 博客

想在文章中插入视频,尝试 iframevideo 标签发现 m3u8 流会直接下载无法播放,用 hls 解决播放问题后,碰到了 403 forbbiden。联想到前些天新浪图床加 referrer 验证的解决方法,随手一试竟然可以。后来发现 Mixed ContentCORS 才是大坑,几经了解,这两问题只能靠视频源服务器解决,所以视频源在自己服务器上是不会有问题的,当然浏览器装个插件也能看,但不可能让所有浏览博客的朋友都装插件。最后为了给视频添加封面,找到了 DPlayer 这个神器,添加后使用体验良好。

演示效果

引入 JS

head 中添加以下代码,可通过主题设置添加,也可直接加入到主题对应的 header.php 中。

JavaScript Code

<script>
    function __loadResource(resource, callback) {
        let type;
        switch (resource.split('.').pop()) {
            case 'css':
                type = 'link';
                break;
            case 'js':
                type = 'script';
                break;
        }
        let element = document.createElement(type);
        let loaded = false;
        if (typeof callback === 'function') {
            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.href = resource;
            element.rel = 'stylesheet';
        } else {
            element.src = resource;
        }
        document.getElementsByTagName('head')[0].appendChild(element);
    }

    function __create__dps(videos) {
        let host = 'https://s0.pstatp.com/cdn/expire-1-M';
        let 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 => {
            __loadResource(host + resource, () => {
                if (!--unloadedResourceCount) {
                    __createDplayers(videos);
                }
            })
        });
    }

    function __createDplayers(videos) {
        for (i = 0; i < videos.length; i++) {
            let option = {
                url: videos[i]
            }
            if (videos[i].split('.').pop() === 'flv') {
                option.type = 'flv';
            }
            new DPlayer({
                container: document.getElementById('__dp' + i),
                screenshot: true,
                video: option
            });
        }

        // 修正 Mirages 1.7.10 视频比例错误
        __isMirages1710() ? __fixVideoSize(videos.length) : null;
    }

    function __isMirages1710() {
        for (let styleSheet of document.styleSheets) {
            if (styleSheet.href && styleSheet.href.indexOf('Mirages/css/1.7.10/') != -1) {
                return true;
            }
        }
        return false;
    }

    function __fixVideoSize(length) {
        let queryVideo = setInterval(() => {
            let videos = document.getElementsByTagName('video');
            if (videos.length === length) {
                let dplayerWraps = document.querySelectorAll('.dplayer-video-wrap');
                for (let i = 0; i < length; i++) {
                    let 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 {
                        let 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) => {
                            let newVideoContainers = videoContainer.querySelectorAll(
                                '.video-container.video-4-3');
                            if (newVideoContainers.length) {
                                newVideoContainers[0].className = '';
                                observer.disconnect();
                                console.log('auto inserted video-4-3 fixed.');
                            }
                        };
                        const observer = new MutationObserver(callback);
                        observer.observe(targetNode, config);
                        setTimeout(() => observer.disconnect(), 1000 * 120);
                    }
                }
                clearInterval(queryVideo);
            }
        }, 500);
    }
</script>

添加播放器

在文章所需位置以 html 形式插入以下代码,即可批量添加播放器,支持 mp4flvmkv 格式,不过视频编码必须是 H.264 ACC

!!!
<div id="__dp0"></div>
<div id="__dp1"></div>
<script>
    __create__dps([
        'demo0.mp4',
        'demo1.mp4'
    ]);
</script>
!!!
最后编辑于: 2019 年 11 月 11 日
添加新评论

已有 3 条评论
  1. Xin Xin     Windows 7 /    Google Chrome

    本站已启用,谢谢站长耐心指导

  2. Kevan Kevan     MacOS /    Google Chrome

    很实用了,打算给自己的加上

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @Kevan感谢支持,交换一下友链吧@(太开心)

0:00