vue单页面如何解决多个视频同时仅能播放一个问题
作者：V_AYA_V
这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue单页面解决多个视频同时仅能播放一个
封装一个媒体播放的列表组件，里面包含图集和视频。
为了代码解耦，将图集组件，和视频播放组件分离出来。
在这里仅记录一下视频播放遇到的问题。
在列表数据里面可能有多个视频，循环渲染列表,这里仅简述多视频播放，要求一次只能播放一个的问题。
列表渲染
<template>
<div class="case-container">
<div class="case-list">
<div class="case-item" v-for="item in caseList" :key="item.id">
<video-card :src="item.src" :poster="item.src"></video-card>
<!--<images-card></images-card>-->
</div>
</div>
</div>
</template>
<script>
import VideoCard from './videoCard'
// import ImagesCard from './imagesCard'
export default {
components: {
VideoCard
// ImagesCard
},
props: {
caseList: {
type: Array,
default: () => []
}
}
}
</script>
<style lang="less" scoped>
</style>
视频组件封装
视频组件封装十分常规，用到了video标签，支持手动控制播放暂停。
如果要支持播放下一个视频前前面的播放的视频暂停，只能手动去触发其他video标签的pause方法。
因为是多组件通信，无法获取其他video的DOM,所以跨组件通信。
this.$bus，值得拥有
<template>
<div class="video-container">
<video
v-if="isPlay"
ref="video"
class="video"
controls
:src="src"
:poster="poster"
:autoplay="isPlay"
@touchmove.prevent
@pause="pause"
@play="play"
@ended="pause"
webkit-playsinline="true"
playsinline="true"
></video>
<div v-if="disabled" class="cover-outer"></div>
<!--自定义播放按钮-->
<div
v-if="!isPlay"
class="cover center-flex"
:style="poster ? {backgroundImage: `url(${poster})`} : {}"
>
<img
@click="play"
src="xxx"
class="play-icon"
/>
</div>
</div>
</template>
<script>
export default {
props: {
src: {
type: String,
default: ''
},
poster: {
type: String,
default: ''
}
},
data() {
return {
isPlay: false,
disabled: true
}
},
mounted() {
this.$bus.$on('stopVideo', this.pause) // 子组件接受数据
},
beforeDestroy() {
this.$bus.$off('stopVideo') // 销毁前清除事件监听
},
methods: {
clearTimer() {
this.timer && clearTimeout(this.timer)
},
play() {
this.$bus.$emit('stopVideo') // 子组件发送数据
this.clearTimer()
this.isPlay = true
// 防止点击穿透
this.timer = setTimeout(() => {
this.disabled = false
}, 500)
this.$nextTick(() => {
this.$refs.video.play()
})
},
pause() {
this.clearTimer()
this.isPlay = false
this.disabled = true
}
}
}
</script>
<style lang="less" scoped>
// 样式省略
</style>
bus.js就是这么简单。
创建之后挂载到app.js,通过this.$bus.$on,this.$bus.$emit去触发方法，具体使用见上。
不知道怎么使用this.$bus可以去百度一下，网上教程很详细，不再赘述
import Vue from 'vue'
export default () => {
Vue.prototype.$bus = new Vue()
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。