直接上代码
props:[‘videosrc’],
computed: {
player() {
return this.$refs.videoPlayer.player
},
//作为计算属性使用，当视频路径变化时能够及时更新
playerOptions(){
let path = this.videosrc;
return {
height: ‘360’,
autoplay: false,
muted: true,
language: ‘en’,
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: “video/mp4”,
// mp4
src:path,
// webm
// src: “https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm”
}],
poster: “”
}
}
}
//其他地方调用此组件视频暂停的方法就是
视频组件
这里v-if="isVideo"用v-if 避免当路径为空时，报一个匹配不到资源的错误
<videoplayer :videosrc=“videoPath” v-if=“isVideo” ref=“myVideoPlayer” > </videoplayer >
在其他触发视频暂停的地方调用
this.$refs.myVideoPlayer.player.pause();