见附件，demo，直接运行即可
xiaoliao998
- 发布：2021-03-01 14:02
- 更新：2022-08-11 18:47
- 阅读：1395
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.1.3
手机系统： Android
手机系统版本号： Android 11
手机厂商： 华为
手机机型： 华为P40
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
见附件，demo，直接运行即可
见附件，demo，直接运行即可
预期结果：
1，最好再video全屏时，对于左上角的后退，有单独的hook方法，
2，cover-view，完全覆盖，并且能阻止下层video事件
1，最好再video全屏时，对于左上角的后退，有单独的hook方法，
2，cover-view，完全覆盖，并且能阻止下层video事件
实际结果：
见Bug 描述，也可运行demo
见Bug 描述，也可运行demo
bug描述：
cover-view组件覆盖video组件时，点击传透，无法阻止冒泡事件，
点击cover-view 组件时，会默认触发，video的暂停事件，很奇怪，因为默认video暂停或播放，也都是双击的。
因为项目，主要想实现一个场景，就是点击播放按钮，自动打开播放器，且直接是全屏播放的那种，此时，原生的video，当在全屏状态下，左上角后退键，只能支持退出全屏，那我必须得@fullscreenchange 事件中，监听到后，才能调用back方法，但是该方式，会造成掉帧，会从全屏-默认小屏-再次回退。
鉴于上述方式，实现有问题，我想到了用cover-view,覆盖video的方式，想盖住在全屏播放器上的，左上角的后退按钮，实现自定义点击，然后直接back，但是测试发现，点击cover-view组件，默认并不会直接执行我的back方法，反而暂停了视频。就算我加上了阻止冒泡事件，同样也不行
NVUE全屏也可以啊
-
-
xiaoliao998 (作者)
你自己测试过吗？我怎么试了不行啊，，，
<view>
<video id="myVideo" :src="videoSrc" :autoplay='true' :loop='true' :direction='0'
v-if='videoSrc' :show-fullscreen-btn='false' class='position-relative'>
</video>
<view class='position-fixed' style='top:44px;left:0;height:110rpx;width:100px'>
<view class='w-100 bg-danger' @click='handleClick' style='height:100rpx;'></view>
</view>
</view>2021-03-12 11:36
xiaoliao998 (作者) - null
<template>
<view>
<view class='position-fixed' style='top:44px;left:0;height:110rpx;width:100px'>
<view class='w-100 bg-danger' @click='handleClick' style='height:100rpx;'></view>
</view>
<video id="myVideo" :src="videoSrc" :autoplay='true' :loop='true' :direction='0'
v-if='videoSrc' :show-fullscreen-btn='false' class='position-relative'>
</video>
</view>
</template>
<script>
export default {
onLoad(option) {
this.videoSrc = option.url
},
onReady() {
this.videoContext = uni.createVideoContext('myVideo')
this.videoContext.requestFullScreen({
direction: 0
})
},
data() {
return {
videoContext: null,
videoSrc: ''
}
},
methods: {
handleClick(e) {
e.stopPropagation()
this.goBack()
console.log('dianji')
},
goBack(){
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style scoped>
</style>
试试以下代码
<template>
<view>
<video id="myVideo" :src="videoSrc" :autoplay='true' :loop='true' :direction='0'
v-if='videoSrc' :show-fullscreen-btn='false' class='position-relative'>
<view class='position-fixed' style='top:44px;left:0;height:110rpx;width:100px'>
<view class='w-100 bg-danger' @click='handleClick' style='height:100rpx;'></view>
</view>
</video>
</view>
</template>
<script>
export default {
onLoad(option) {
this.videoSrc = option.url
},
onReady() {
this.videoContext = uni.createVideoContext('myVideo')
this.videoContext.requestFullScreen({
direction: 0
})
},
data() {
return {
videoContext: null,
videoSrc: ''
}
},
methods: {
handleClick(e) {
e.stopPropagation()
this.goBack()
console.log('dianji')
},
goBack(){
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style scoped>
</style> 
