Dplayer插件使用

Dplayer插件使用

在Vue2中使用dplayer视频播放器，代码如下，

<template>
<!-- DPlayer -->
  <div>
    <div  id="dplayer" ref="myvideo"></div>
    <button @click="jumpTo">跳转到第10秒</button>
    <button @click="getDuration">视频总时长为{{duration}}</button>
    <button @click="getE">显示</button>


    <input id="qwe" @blur="test" :data-test="name" type="text" v-model="name">
  </div>
</template>

<script>
import DPlayer from "dplayer";

export default {
  data() {
    return {
      dp: null,
      duration: null,
      name: null,
    };
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      this.dp = new DPlayer({
        container: document.getElementById("dplayer"),
        // 右键菜单
        contextmenu: [
          {
            text: "custom1",
            link: "https://github.com/DIYgod/DPlayer",
          },
          {
            text: "custom2",
            click: (player) => {
              console.log(player);
            },
          },
        ],
        // 视频源
        video: {
          pic: "demo.jpg",
          url: "http://xxxx.mp4", //
        },
      });
    },
    jumpTo(){
      this.dp.seek(10);   // 里面单位是秒
    },
    getDuration(){
      this.duration = this.dp.video.duration
    },
    showVideo(){
      console.log(this.dp);
      this.dp.play()
    },
    test(){
      let qwe = document.getElementById('qwe')
      console.log(qwe.getAttribute("data-test"))
    }
  },
};
</script>

<style>
#dplayer{
  width: 720px;
  height: 360px;
}
</style>

官网地址：http://dplayer.js.org/zh/