vue/cli 视频播放 vue-video-player

最新推荐文章于 2023-09-19 17:11:39 发布

原创最新推荐文章于 2023-09-19 17:11:39 发布 · 531 阅读

1 ·

CC 4.0 BY-SA版权

vue/cli 同时被 2 个专栏收录

9 篇文章

订阅专栏

vue-video-player

1 篇文章

订阅专栏

本文档详细介绍了如何在Vue项目中集成vue-video-player组件，包括安装步骤、组件引入、数据设置以及在Ant Design Modal中使用时的注意事项。通过设置playerOptions，可以自定义播放速度、封面图、声音控制等视频参数。遇到Modal中视频加载问题时，解决方案是添加destroyOnClose属性。参考video.js的配置选项，可以进一步定制播放器功能。

1、下载：
npm install vue-video-player -S

npm install video.js -S // 先安装vue-video-player，如果报错再装video.js, 因为要依赖video.js

2、组件引入

   import { videoPlayer } from 'vue-video-player/src' // 注意这要到 /src
   import 'vue-video-player/src/custom-theme.css'
   import 'video.js/dist/video-js.css'

3、组件components中：

   components: {
   videoPlayer
   }

4、data中

playerOptions: { // 视频常用设置
muted: true, // 是否播放声音 true 不播放 false 播放
playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
fluid:true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
// poster:'' // 封面图，如果不自己传封面，则默认是视频中的图片
},

5、页面

<video-player class="video-player vjs-custom-skin"
:options="{...playerOptions, sources:{type:'video/mp4', src: item.url}}" // 动态加载地址
></video-player>

6、其他设置

参考video.js配置：https://docs.videojs.com/tutorial-options.html

7、注：在 antd modal弹窗中使用的时候，会出现加载不出来的情况

解决：给 modal 加 destroyOnClose 属性