DPlayer入门使用

安装dplayer

npm install dplayer --save
1

创建一个用于加载播放器的容器

• 加载播放器文件:

  <div id="dplayer" class="dplayer video-box"></div>
  1

• js部分引入dplayer并且初始化

  import Hls from 'hls.js'  //用于播放hlv格式
  import Flv from 'flv.js'  //用于播放m3u8格式
  import DPlayer from 'dplayer'
  /*
  npm i dplayer -S // 视频播放器插件
  npm i hls.js -S  // 播放hls流插件
  npm i flv.js -S  // 播放flv流插件
  */
  const loadVideo=()=>{
     const dp = new DPlayer({
          container: document.getElementById('player'), //播放器容器元素
          autoplay: false, //是否自动播放
          live: false, //是否直播
          theme: '#b7daff', //主题色 底部进度条相关颜色
          loop: false, //是否循环播放
          lang: 'zh-cn', //语言
          screenshot: true, //开启截图，如果开启，视频和视频封面需要允许跨域
          hotkey: true, //开启热键，支持快进、快退、音量控制、播放暂停
          preload: 'auto';, //视频预加载，可选值: 'none', 'metadata', 'auto'
          volume: 0, //初始化音量
          playbackSpeed: [0.5, 1, 2, 4, 8], //播放速度
          mutex: false, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
          preventClickToggle: false, //阻止点击播放器时候自动切换播放/暂停
          logo: 'logo.png', //在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
          video: {
            pic: '', // 视频封面
            url: '', //视频链接
            thumbnails:'',//视频缩略图，可以使用 DPlayer-thumbnails生成
            type: 'auto', //可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型,
            customType: {
              //自定义播放类型文件《type需要设置为'customHls'》
              customHls: function (video, player) {
                const hls = new Hls()
                hls.loadSource(video.src)
                hls.attachMedia(video)
              },
              //自定义播放类型文件《type需要设置为'customFlv'》
              customFlv: function (video, player) {
                const flvPlayer = Flv.createPlayer({
                  type: 'flv',
                  url: video.src,
                })
                flvPlayer.attachMediaElement(video)
                flvPlayer.load()
              },
            },
          },
        })
        //考虑隐私问题，初始化时把音量设为0,才可自动播放
        //dp.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量
        dp.volume(0, true, true) 
        //视频组件加载完成后自动播放
        dp.on('loadedmetadata', function () {
          dp.play()
        })
        //视频流出问题时触发
        dp.on('error', function () {
          if (document.getElementById('player')) {
            //当前时间＋1
            let time = Number(Math.round(dp.video.currentTime + 1))
            //重新加载视频
            loadVideo()
            //跳转到更新后的时间
            dp.seek(time)
          }
        })
  }
  //由于不能通过设置参数去禁用底部操作按钮只能靠css实现
  <style lang="scss" scoped>
  .video-box {
    width: 100%;
    height: 100%;
  }
  // 禁用视频右键菜单
  :deep(.dplayer-menu,
  .dplayer-mask) {
    display: none !important;
  }
  // //隐藏底部操作栏
  // :deep(.dplayer-controller) {
  //   display: none;
  // }
  // //隐藏底部操作栏动画
  // :deep(.dplayer-controller-mask) {
  //   display: none;
  // }
  </style>
  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
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87

DPlayer