来自图床切片的视频---

B站播放器---《探清水河》

配置教程

上传视频

typecho可以安这个插件


重新加载播放器回调函数
loadDPlayer();

也可以用腾讯云 Web 播放器

或者自己调用


以下部分转载自
Typecho 引入 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>
Last modification:May 11th, 2020 at 05:46 pm
如果觉得我的文章对你有用,请随意赞赏