gitHub地址

• 安裝
  npm install dplayer --save
• 新建一個(gè)組件optimizeVideo.vue

<template>
  <div>
    <div id="dplayer" class="play-root" ></div>
    <div @click="onPlay">點(diǎn)我播放</div>
  </div>

</template>

<script>
  // import '../../node_modules/dplayer/dist/DPlayer.min.js';
  import DPlayer from 'dplayer';

  export default {
    name: "optimizeVideo",
    data() {
      return {
        dp:null,
      }
    },
    methods:{
        onPlay() {
          this.dp.play()
      }
    },
    // 一定要在mounted中創(chuàng)建
    mounted() {
      
      const dp = new DPlayer({
        // 配置參數(shù)
        container: document.getElementById('dplayer'),
        autoplay: false,
        theme: '#FADFA3',
        loop: true,
        lang: 'zh-cn',
        preload: 'auto',
        // logo: 'logo.png',
        volume: 0.7,
        video: {
          url: 'http://img.ksbbs.com/asset/Mon_1605/25d705200a4eab4.mp4',
          pic: 'dplayer.png',
          type: 'auto',
        },
      });
      
      // 禁止右鍵下載視頻
       document.oncontextmenu=new Function("event.returnValue=false;");
      document.onselectstart=new Function("event.returnValue=false;");

      // 修改循環(huán)播放顯示
      document.getElementsByClassName('dplayer-setting-item dplayer-setting-loop')[0].getElementsByClassName('dplayer-label')[0].innerText = "循環(huán)播放"
      // 修改倍速播放顯示
      document.getElementsByClassName('dplayer-setting-item dplayer-setting-speed')[0].getElementsByClassName('dplayer-label')[0].innerText = "播放倍速"
    }
  }
</script>

<style scoped>
  .play-root {
    width: 770px;
    height: 420px;
    background-color: coral;
    margin: 0 auto;
  }

  /* 在瀏覽器找到對(duì)應(yīng)的class名稱(chēng)。然后通過(guò)穿透對(duì)樣式進(jìn)行更改 */

  /* 禁止循環(huán)播放顯示 */
  /* .paly-root >>> .dplayer-setting-loop {
    background-color: cyan;
    display: none;
  } */

  /* 禁止出現(xiàn)快進(jìn)多少秒提示 */
  /* .play-root /deep/ .dplayer-notice {
    display: none;
  } */

  /* 禁止右鍵自定義列表 */
  /* .play-root /deep/ .dplayer-menu-show{
     display: none;
  } */

</style>

• 配置的參數(shù)

  
  
  Xnip2020-05-22_14-26-16.png