新增视频播放插件

发表于 | 更新于 | 分类于

更新视频、音频插件支持

有了服务器支持，现在可以用自己的媒体源了，媒体内容可以不再受公网限制。

之前做html视频嵌入示例，发现部分html内容在https下无法正常使用，于是博客新增了对视频源的播放支持。

效果：

这个插件是基于DPlayer的 ，若视频连接出错，多半是因为换了服务器ip或者暂时关闭了服务器，有的时间段会比较卡，也可能是协议的问题。

只需要安装对应插件，然后Github上有详细的文档说明，用起来也很方便。功能挺好的，只是有时候这播放器会出bug。

官方文档：

安装插件：

1
2
3
4
#视频播放插件
npm install hexo-tag-dplayer --save
#音频播放插件，不过音乐是能正常播放的，暂时用不到这个
npm install hexo-tag-aplayer --save

示例：

    • 视频
1
2
<!-- 效果是上面的视频 ，沒声音是因为，这个视频源没加音频。有声音是因为文章下面有个背景音乐（显示中）-->
{% dplayer  "url=http://45.77.226.194/video/ys.mp4"  "loop=yes"  "theme=#FADFA3"  "autoplay=true"   %}

其实相当于使用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
{% 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: 'http://78.141.206.203/video/ys.mp4',
        pic: '',
        thumbnails: '',
        type: 'auto'
    },
    subtitle: {
     
    },
    danmaku: {
       
        },
        unlimited: true
    },
    contextmenu: [
        {
           
        }
    ]
});
</script>
{% endraw %}
    • 音频
1
{% aplayer  "马宿"  "Zelda"  "http://78.141.206.203/music/masu.mp3"  "autoplay" %}

        

        


参考文章