# 前言

哇,如此可爱的 HTML5 弹幕视频播放器

# 添加 Dplayer

myblog/themes/Pjax/layout/includes/Butterfly 中新建 player.pugvideo.pug

参考图片

当前目录下复制 layout.pug 内容粘贴到 player.pug

我们需要引入 video.pug ,在 player.pug 中添加

#body-wrap
      if theme.background
        - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
        #web_bg(data-type=is_photo)
      include ./sidebar.pug
      include ./header/index.pug
      include ./video.pug

我们需要加载 DPlayer 文件,并且启用 HLS 支持

video.pug 中添加

.card
  .video
    #dplayer
    script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/hls.js@latest')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/MoePlayer/DPlayer@master/dist/DPlayer.min.js')
    script(type='text/javascript', src='js/video.js')

myblog/themes/Butterfly/source/js 中新建 video.js

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: '',
        type: 'hls',
    },
    pluginOptions: {
        hls: {
            // hls config
        },
    },
});
console.log(dp.plugins.hls); // Hls 实例

myblog/themes/Butterfly/layout/index.pug 中修改

extends includes/player.pug
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    +postUI
    include includes/pagination.pug

使用方法

<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src='https://cdn.jsdelivr.net/gh/MoePlayer/DPlayer@master/dist/DPlayer.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/haikesikejiqiang/picred@master/2020/03/13/dp.js'></script>
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

山河 微信支付

微信支付

山河 支付宝

支付宝

山河 贝宝

贝宝