Hexo使用 Dplayer 播放视频

使用Dplayer效果

如何使用？

设置 div 容器并引入css和 js

<style type="text/css">
    #dplayer-video-container {
        max-width: 800px;
        margin: 0 auto;
        margin-top: -1rem;
    }
    @media screen and (max-device-width: 400px) {
        #dplayer {
            width: 100%;
        }
    }
</style>  

<link rel="stylesheet" href="/assets/css/DPlayer.min.css">
<div id="dplayer-video-container">
    <div id="dplayer"></div>
<div>
<script src="/assets/js/DPlayer.min.js"></script>

设置播放视频

<script>
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),  <!-- 播放器容器元素 -->
        autoplay: false,                                <!-- 视频自动播放 -->
        theme:	'#b7daff',                               <!-- 主题色 -->
        loop: true,                                    <!-- 视频循环播放 -->
        lang: 'zh-cn',                                  <!-- 播放器语言设置 -->
        screenshot: false,                              <!-- 开启截图 -->
        hotkey: true, 	                                 <!-- 开启热键 -->                        
        preload: 'auto',                                <!-- 开启预加载 -->
        volume	: 0.7,                                    <!-- 默认音量 -->
        mutex: true,                                    <!-- 互斥，阻止多个播放器同时播放 -->
        video: {
            url: '/resources/video/火星人来过.mp4',      <!-- 视频地址 -->
            pic: '/resources/video/火星人来过.jpg'         <!-- 视频封面 -->
        },
        contextmenu: [                                 <!-- 自定义右键菜单--> 
            {
                text: '本博客地址',
                link: 'https://helloblack2017.github.io/'
            },
            {
                text: '播放器信息',
                click: (player) => {
                    console.log(player);
                }
            }
        ]
    });
</script>

相关链接

🍭 DPlayer 官方文档： http://dplayer.js.org/#/zh-Hans/