使用DPlayer插件预览视频

最近开发了一个PC端预览视频的需求，特此记录下，方便以后查看

预览视频的插件有很多，我最后选了DPlayer，这个插件使用简单，使用文档很详细

指南 | DPlayer

一、安装依赖

使用npm

npm install dplayer --save

使用Yarn

yarn add dplayer

 安装好以后在package.json中查看是否安装成功，我这里安装的版本是1.27.1

二、封装组件

预览的视频不止一个，所以封装成组件，在需要使用的地方直接引入即可

<template>
  <div ref="videoBox"></div>
</template>

<script>
  import DPlayer from 'dplayer';
  export default {
    props: {
      url: {
        type: String,
        default: () => ""
      }
    },
    data() {
      return {}
    },
    components: {},
    filters: {},
    created() {},
    activated() {},
    mounted() {
      const dp = new DPlayer({
        container: this.$refs["videoBox"],
        video: {
          url: this.url,
          type: 'normal'
        },
      });
    },
    methods: {}
  }

</script>

url是视频连接 

二、使用组件

html

<!-- 视频 -->
<div class="video-wrap">
  <div class="inp-label">视频：</div>
    <video-player class="video-box" v-for="(item,index) in videoList" :key="index" :url="item.url"></video-player>
</div>

 js

videoList: [{  
  url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
}, {
  url: "https://media.w3.org/2010/05/sintel/trailer.mp4"
}]

三、效果展示

 这世界很喧嚣，做你自己就好