前端视频播放组件 vue-dplayer
1.安装
cnpm install vue-dplayer -S
2.在main.js中导入
import VueDPlayer from 'vue-dplayer'; import 'vue-dplayer/dist/vue-dplayer.css'; Vue.use(VueDPlayer);
3.使用vue-dplayer组件:
1 <template> 2 <div class='home'> 3 <d-player ref="player" :options="options"></d-player> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'Home', 10 data() { 11 return { 12 options: { 13 video: { 14 url: '../../static/videos/fengjing.mkv' 15 }, 16 contextmenu: [ 17 {} 18 ] 19 } 20 } 21 } 22 } 23 </script> 24 <style scoped> 25 .home { 26 width: 1000px; 27 margin: 0 auto; 28 text-align: center; 29 } 30 </style>
4.options参数
参考dplayer的官方文档:http://dplayer.js.org/guide.html#options。参照options章节,填写参数进行自定义播放器。 <template> <div class='home'> <d-player ref="player" :options="options"></d-player> </div> </template> <script> export default { name: 'Home', data() { return { options: { theme: '#b7daff', // 风格颜色,例如播放条,音量条的颜色 loop: false, // 是否自动循环 lang: 'zh-cn', // 语言,'en', 'zh-cn', 'zh-tw' screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地 hotkey: true, // 是否支持热键,调节音量,播放,暂停等 preload: 'auto', // 自动预加载 volume: 0.7, // 初始化音量 logo: '../../static/images/1.jpg', // 在视频左脚上打一个logo video: { url: '../../static/videos/fengjing.mkv', // 播放视频的路径 quality: [ // 设置多个质量的视频 { name: 'HD', url: '../../static/videos/fengjing.mkv', type: 'auto', // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型 }, { name: 'SD', url: '../../static/videos/fengjing.mkv', type: 'auto', } ], defaultQuality: 0, // 默认是HD pic: '../../static/images/2.jpg', // 视频封面图片 thumbnails: '../../static/images/3.jpg' // 进度条上的缩略图,需要通过dplayer-thumbnails来生成 }, subtitle: { url: 'http://www.baidu.com', fontSize: '20px', bottom: '40px', }, danmaku: { // 弹幕 id: '9E2E3368B56CDBB4', api: 'https://api.prprpr.me/dplayer/', token: 'tokendemo', maximum: 1000, addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'], user: 'DIYgod', bottom: '15%', unlimited: true }, contextmenu: [ // 右键菜单 { text: 'custom1', link: 'https://www.bilibili.com' }, { text: 'custom2', click: (player) => { console.log(player); } } ], highlight: [ // 进度条时间点高亮 { text: '10M', time: 600, }, { text: '20M', time: 1200, }, ], } } } } </script> <style scoped> .home { width: 1000px; margin: 0 auto; text-align: center; } </style>
DPlayer文档