hexo上的dplayer应用与嵌入视频的响应式设置

Posted on | In
写在前面

dplayer是一个HTML5弹幕视频播放器，可以帮助我们轻松建立一个弹幕视频。那么如何将dplayer应用在hexo上，这里就需要借助到hexo的一个插件了。
部署dplayer我是用的hexo插件，部署aplayer我是用的提取dist文件的方法。这样可以相互参考，喜欢哪种方式部署就用哪种。

hexo插件

github地址

hexo-tag-dplayer

安装

安装模块:

1
npm install hexo-tag-dplayer --save

使用

代码：

1
{% dplayer key=value ... %}

key包括：

1
2
3
4
5
6
7
8
dplayer options:
    'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
    'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
    'volume', 'maximum' : number arguments
container options:
    'width', 'height' : string, used in container element style
other:
    'code' : value of this key will be append to script tag

以上原型到dplayer选项的映射：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
    container: "you needn't set this",
    autoplay: 'autoplay',
    theme: 'theme',
    loop: 'loop',
    lang: 'lang',
    screenshot: 'screenshot',
    hotkey: 'hotkey',
    preload: 'preload',
    logo: 'logo',
    volume: 'volume',
    mutex: 'mutex',
    video: {
        url: 'url',
        pic: 'pic',
        thumbnails: 'thumbnails',
        type: 'vidtype',
    },
    subtitle: {
        url: 'suburl',
        type: 'subtype',
        fontSize: 'subsize',
        bottom: 'subbottom',
        color: 'subcolor',
    },
    danmaku: {
        id: 'id',
        api: 'api',
        token: 'token',
        maximum: 'maximum',
        addition: ['addition'],
        user: 'dmuser',
        unlimited: 'dmunlimited',
    },
    icons: 'icons',
    contextmenu: 'menu',
}

检查

如果出现某些错误，使用raw代码检查，raw代码内的内容不会被渲染：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{% raw %}
<div id="player1" class="dplayer"></div>
<script src="dist/DPlayer.min.js"></script><!-- use your path -->
<script>
var dp = new DPlayer({{
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    screenshot: true,
    hotkey: true,
    logo: 'logo.png',
    volume: 0.2,
    mutex: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto'
    },
    subtitle: {
        url: 'webvtt.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff'
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'demo',
        maximum: 3000,
        user: 'DIYgod',
        margin: {
            bottom: '15%'
        },
        unlimited: true
    },
    contextmenu: [
        {
            text: 'custom contextmenu',
            link: 'https://github.com/MoePlayer/DPlayer'
        }
    ]
});
</script>
{% endraw %}

更多信息参考dplayer docs。

示例

1
2
{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "api=https://api.prprpr.me/dplayer3/" "addition=https://api.prprpr.me/dplayer3/v2/bilibili?aid=120040" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}  
{% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %}

通常用每个视频的iframe通用分享代码或者video代码直接插入到markdown文件中，则生成的页面中视频不是响应式的。于是便找到了下面这个插件，直接给分享的视频添加响应式。

hexo插件

github地址

hexo-tag-video

安装

安装模块:

1
npm install hexo-tag-video --save

如果你的hexo版本低于3.0，则在_config.yml添加如下：

1
2
plugins:
    - hexo-tag-video

使用

代码：

1
{% video 'videoCode' %}

　
通常，videoCode为视频分享下的嵌入链接。

示例

1
{% video <iframe width="560" height="315" src="https://www.youtube.com/embed/YES16mVB0lQ?rel=0&amp;showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> %}
　
-EOF-
0%