本文参考至文档： [前端] Vue视频组件 由于业务需要默认铺满浏览器，故做一个补充，希望能帮到大家
效果： 图片无法查看请点击
1.安装vue-dplayer
cnpm install vue-dplayer -S
2.在main.js中导入
import VueDPlayer from ‘vue-dplayer’; import ‘vue-dplayer/dist/vue-dplayer.css’; Vue.use(VueDPlayer);
3.demo
<template> <div id="dplayer" style="width: 100%; height: 100%"></div> </template> <script> import DPlayer from 'dplayer' export default { name: 'Video', data () { return { dp: {} } }, mounted () { // 这里是业务需要地址从其它地方传过来 var src = this.$route.query.src this.dp = new DPlayer({ container: document.getElementById('dplayer'), theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色 loop: false, // 是否自动循环 lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw' screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地 hotkey: true, // 是否支持热键，调节音量，播放，暂停等 preload: 'auto', // 自动预加载 volume: 0.7, // 初始化音量 logo: '', // 在视频左脚上打一个logo video: { url: '', // 播放视频的路径 quality: [ // 设置多个质量的视频 { name: 'HD', url: src, type: 'auto' // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型 } ], defaultQuality: 0, // 默认是HD pic: '', // 视频封面图片 thumbnails: '' // 进度条上的缩略图,需要通过dplayer-thumbnails来生成 }, highlight: [ // 进度条时间点高亮 { text: '10M', time: 600 }, { text: '20M', time: 1200 } ] }) } } </script>