<template>
<view>
<uni-popup ref="exampleVideo" type="top">
<video src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" id="exampleVideo" style="height: calc(100vh - env(safe-area-inset-bottom));width: 750rpx;" :show-fullscreen-btn="false">
<view>
<text style="font-size: 20px;color: #fff;background-color: rgba(0,0,0,.25);position: absolute;top: 20px;left: 20px;" @tap="closeVideo">X</text>
</view>
</video>
</uni-popup>
<button @tap="play">播放</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
play(){
this.$refs.exampleVideo.open()
if(!this.videoContext){
this.videoContext = uni.createVideoContext('exampleVideo')
}
this.videoContext.play()
},
closeVideo(){
console.log(this.videoContext)
if(this.videoContext){
this.videoContext.seek(0)
this.videoContext.pause()
}
this.$refs.exampleVideo.close()
}
}
}
</script>
秃了也强了
- 发布：2022-07-11 10:04
- 更新：2022-07-11 10:33
- 阅读：664
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows 10
HBuilderX类型： 正式
HBuilderX版本号： 3.4.18
第三方开发者工具版本号： 1.06.2206090
基础库版本号： 2.21.3
项目创建方式： HBuilderX
示例代码：
操作步骤：
-
首次点击页面播放按钮，弹出视频播放窗口，视频自动播放；
-
点击窗口左上角“X”关闭窗口并停止播放视频；
-
重新点击播放按钮。
-
首次点击页面播放按钮，弹出视频播放窗口，视频自动播放；
-
点击窗口左上角“X”关闭窗口并停止播放视频；
-
重新点击播放按钮。
预期结果：
第二次点击播放按钮弹出窗口视频正常自动播放
第二次点击播放按钮弹出窗口视频正常自动播放
实际结果：
第二次点击播放按钮弹出窗口视频未播放（开发者工具正常，手机上无效）
第二次点击播放按钮弹出窗口视频未播放（开发者工具正常，手机上无效）
bug描述：
页面使用uni-popup用于弹出窗口播放视频，使用uni.createVideoContextAPI控制视频播放，弹出窗口时自动播放视频（初次有效，之后无效），关闭窗口时停止视频播放（有效）
开发者工具中正常，手机上有BUG，手机型号：vivo IQOO NEO 5 、小米
秃了也强了 (作者)
这种倒是可以，在play和pause中控制弹窗的显示和隐藏，不过还需要添加一个字段来判断视频的停止方式：是点击的关闭按钮还是暂停按钮。已经实现了，非常感谢！！
2022-07-11 10:54