最近开发了一个PC端预览视频的需求,特此记录下,方便以后查看
预览视频的插件有很多,我最后选了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"
}]
三、效果展示
这世界很喧嚣,做你自己就好