DPlayer入门使用

• 安装dplayer

  npm install dplayer --save
  

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

  • 加载播放器文件:

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

  • 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>
    

• DPlayer