Typecho 引入 DPlayer 的简单方法

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

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

<link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
<script src="https://cdn.bootcss.com/hls.js/0.12.4/hls.min.js"></script>
<script>
    function __create__dps(videos) {
        for (i = 0; i < videos.length; i++) {
            new DPlayer({
                container: document.getElementById('__dp' + i),
                screenshot: true,
                video: {
                    url: videos[i]
                }
            });
        }
        // 修正 Mirages 1.7.10 视频比例错误
        setTimeout(() => {
            let __elementList = document.querySelectorAll('.video-container.video-4-3');
            for (let __element of __elementList) {
                __element.className = 'video-container video-16-9';
                __element.setAttribute('style', 'position: initial;');
            }
        }, 300);
    }
</script>

添加播放器

在文章所需位置以 html 形式输入以下代码,即可批量添加播放器。
//!!!//
<div id="__dp0"></div>
<div id="__dp1"></div>
<script>

let __videos = [
    'demo0.mp4',
    'demo1.mp4'
];
__create__dps(__videos);

</script>
//!!!//
转载

Typecho赞赏功能

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

薇拉航线🌺

(๑>ڡ<)☆谢谢老板们的投食~

使用微信扫描二维码完成支付


所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!


关注微信公众号『丰烨地毯』

第一时间了解最新地毯信息
关注官微不迷路~

添加新评论

成功源于不懈的努力。

暗自伤心,不如立即行动。

再多一点努力,就多一点成功。

得意淡然,失意坦然;喜而不狂,忧而不伤。

海纳百川,有容乃大;壁立千仞,无欲则刚。