image.png
这里使用了一个用videojs封装的vue组件https://github.com/surmon-china/vue-video-player
1. 安装注册
npm install vue-video-player --save
import VueVideoPlayer from 'vue-video-player'
// 引入基本样式 因为我想直接修改样式 所以复制出来自己引入 当然也可以引入他的然后复写
import '@/assets/css/video-js.css';
Vue.use(VueVideoPlayer, /* {
options: global default options,
events: global videojs events
} */)
2. 使用
这里主要需要两个功能，一个是播放，另一个就是动态加载不同的视频。
主要代码如下
<div class="image-view-model" v-show="showModel">
<i class="ui-mask" @click="() => {
showModel = false;
player.pause(); // 暂停
}"></i>
<div class="player">
<video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
>
</video-player>
</div>
</div>
export default {
data() {
return {
playerOptions: {
muted: true,
language: 'zh-CN',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: 'video/mp4',
src: 'http://192.168.201.188:8000/demo-video.mp4',
}],
},
computed: {
player() {
return this.$refs.videoPlayer.player;
},
},
如何动态切换视频源
// 直接通过动态修改 playerOptions.sources[0]就可以了
playerOptions.sources[0].src = item
