uniapp 解决多个video同时播放问题

vue:

<video class="video-card" :src="data.img" controls :id="'id'+data.id" @play="videoPlayHandle('id'+data.id)"></video>

data:

video: null,

methods:

videoPlayHandle(id) {
	let newVideo = uni.createVideoContext(id);
	console.log("newvideo:"+JSON.stringify(newVideo));
	newVideo.id = id;
	if (!this.video) {
		this.video = newVideo;
		this.video.play();
		console.log(JSON.stringify(this.video)+"播放");
		return
	}
	if (this.video.id !== newVideo.id) {
		console.log("切换视频主体");
		newVideo.play();
		console.log("目前视频主体播放");
		this.video.pause();
		console.log("之前视频主体暂停");
		this.video = newVideo;
		console.log("播放主体切换");
	}
},

 

### UniApp多个视频组件自动播放的实现方法 在 UniApp 开发中,如果需要实现多个视频组件中的 **自动播放** 功能,并且仅允许当前可见区域内的视频播放而暂停其他视频,则可以通过以下方式进行处理。 #### 1. 使用 `@play` 和 `uni.createVideoContext()` 控制视频播放状态 通过监听每个 `<video>` 组件的 `@play` 事件来判断哪个视频正在被触发播放。当检测到某个视频开始播放时,调用 `uni.createVideoContext()` 方法获取其他视频实例并手动暂停它们[^1]。 以下是具体的代码示例: ```html <template> <block v-for="(item, index) in videos" :key="index"> <view> <view class=""> <video :data-id="item.id" :key="item.id" :id="'video' + item.id" @play="playVideo(item.id)" @error="videoErrorCallback" :poster="item.cover" :src="item.video_url" controls ></video> </view> </view> </block> </template> <script> export default { data() { return { videos: [ { id: 1, cover: 'cover1.jpg', video_url: 'url1.mp4' }, { id: 2, cover: 'cover2.jpg', video_url: 'url2.mp4' } ], currentPlayingId: null // 当前播放视频ID }; }, methods: { playVideo(id) { if (this.currentPlayingId !== null && this.currentPlayingId !== id) { const prevVideoCtx = uni.createVideoContext('video' + this.currentPlayingId); prevVideoCtx.pause(); // 暂停之前的视频 } this.currentPlayingId = id; // 更新当前播放视频ID }, videoErrorCallback(e) { console.error(`视频错误:${e.detail.errMsg}`); } } }; </script> ``` 上述代码实现了如下逻辑: - 遍历 `videos` 数组渲染多个视频组件。 - 监听每个视频的 `@play` 事件,记录当前播放视频 ID 并暂停之前正在播放视频。 --- #### 2. 借助第三方组件优化体验 对于更复杂的场景(如仿抖音上下滑动切换视频),可以考虑使用成熟的第三方组件,例如 `Ba-VideoSView`[^2]。这类组件已经封装好了视频管理功能,能够更好地适配移动端设备特性以及提升用户体验。 安装和配置过程通常较为简单,只需按照官方文档集成即可完成基础功能搭建。例如: ```javascript // 安装依赖 npm install ba-video-sview --save ``` 引入后可以直接使用其内置的功能模块,无需额外编写复杂逻辑来控制视频间的交互行为。 --- #### 3. 解决 Android 微信小程序兼容性问题 部分开发者反馈,在某些环境下可能会出现反复暂停与播放的现象[^3]。针对此情况可尝试调整 `uni.createVideoContext()` 的绑定范围,确保每次操作均作用于正确的上下文中。修改后的函数可能类似于这样: ```javascript methods: { playVideo(id) { if (this.currentPlayingId !== null && this.currentPlayingId !== id) { try { const ctx = uni.createVideoContext('video' + this.currentPlayingId, this); // 明确指定 Vue 实例作为 context 参数 ctx.pause(); } catch (err) { console.warn('暂停失败:', err.message); } } this.currentPlayingId = id; } } ``` 此处特别注意的是第二个参数 `this` 的传入,它明确了创建 Video Context 所属的作用域。 --- #### 4. 双击点赞及其他扩展功能 除了基本的单个视频独占播放外,还可以进一步增强应用互动效果,比如双击屏幕实现点赞动作等[^4]。这可通过绑定手势识别插件或者原生触摸事件达成目标。 样例片段如下所示: ```html <view class="iconfont iconjiahao add" v-show="show" @click="handleLike"></view> ``` 配合 JavaScript 函数定义响应机制: ```javascript methods: { handleLike() { // TODO: 调用接口更新服务器数据... alert('已成功点赞'); } } ``` --- ### 总结 综上所述,要实现在 UniApp 应用程序里让多个视频组件具备自动播放能力的同时兼顾性能表现及跨平台一致性,需综合运用生命周期钩子、条件渲染技术以及合理选用外部库资源等方式加以应对。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值