1***@qq.com
- 发布：2023-03-03 14:50
- 更新：2023-03-03 15:56
- 阅读：232
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.6.18
手机系统： iOS
手机系统版本号： iOS 16
手机厂商： 苹果
手机机型： iphonexr
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
App下载地址或H5⽹址： https://itms-apps//itunes.apple.com/cn/app/id6444124170?mt=8
示例代码：
<view class="galler-video">
<video :src="item.videoUrl" ref="video" :poster="item.videoUrl+ '?x-oss-process=video/snapshot,t_0,f_jpg'"
initial-time="0" controls show-mute-btn @ended="ended" :id="'video'+item.id" :data-id="item.id" :key="item.id"
@play="play"></video>
</view>
play(e) {
let _this = this
let currentId = 'video' + e.currentTarget.dataset.id // 获取当前视频id
this.videoContent = uni.createVideoContext(currentId, _this).play()
// 获取视频列表
let trailer = this.dataList
trailer.forEach((item, index) => { // 获取json对象并遍历, 停止非当前视频
if (item.videoUrl != null && item.videoUrl != "") {
let temp = 'video' + item.id
if (temp != currentId) {
// 暂停其余视频
uni.createVideoContext(temp, _this).pause() //暂停视频播放事件
}
}
})
}
</view>
play(e) {
let _this = this
let currentId = 'video' + e.currentTarget.dataset.id // 获取当前视频id
this.videoContent = uni.createVideoContext(currentId, _this).play()
// 获取视频列表
let trailer = this.dataList
trailer.forEach((item, index) => { // 获取json对象并遍历, 停止非当前视频
if (item.videoUrl != null && item.videoUrl != "") {
let temp = 'video' + item.id
if (temp != currentId) {
// 暂停其余视频
uni.createVideoContext(temp, _this).pause() //暂停视频播放事件
}
}
})
}
操作步骤：
先点击一个播放的视频，再点击另一个未播放的视频
先点击一个播放的视频，再点击另一个未播放的视频
预期结果：
视频A正在播放，点击视频B，视频A停止播放，视频B开始播放
视频A正在播放，点击视频B，视频A停止播放，视频B开始播放
实际结果：
视频A正在播放，点击视频B，视频A不停的播放暂停，视频B不停的播放暂停
视频A正在播放，点击视频B，视频A不停的播放暂停，视频B不停的播放暂停
bug描述：
使用video组件编写的视频播放模块，需求视频只能同时播放一个，安卓端正常点击另一个视频其中一个正在播放的视频就会停止播放，ios中正在播放的视频会不停的播放暂停
1 个回复
DCloud_UNI_WZF
检查下是否逻辑问题，比如其余视频的暂停触发了 play 事件
如确认框架问题，提供测试工程