<template>
<view class="page">
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" 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@20181126-lite.m4v">
<cover-view class="controls-title">简单的自定义 controls</cover-view>
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
</video>
</view>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
this.videoCtx = uni.createVideoContext('demoVideo')
},
methods: {
play(event) {
this.videoCtx.play();
uni.showToast({
title: '开始播放',
icon: 'none'
});
},
pause(event) {
this.videoCtx.pause();
uni.showToast({
title: '暂停播放',
icon: 'none'
});
}
}
}
</script>
<style>
.page {
display: flex;
justify-content: center;
}
.video {
position: relative;
}
cover-view,
cover-image {
display: inline-block;
}
.img {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 50%;
margin-top: -50rpx;
}
.controls-play {
left: 50rpx;
}
.controls-pause {
right: 50rpx;
}
.controls-title {
width: 100%;
text-align: center;
color: #FFFFFF;
}
</style>
- 发布:2020-05-14 17:53
- 更新:2020-05-21 11:35
- 阅读:1426
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 家庭中文版 18362.778
HBuilderX类型: 正式
HBuilderX版本号: 2.6.16
浏览器平台: 微信内置浏览器
浏览器版本: 7.0.14
项目创建方式: HBuilderX
示例代码:
操作步骤:
在安卓机上的微信浏览器上打开该h5页面,并点击播放视频,看video上面的图层能否正常显示
在安卓机上的微信浏览器上打开该h5页面,并点击播放视频,看video上面的图层能否正常显示
预期结果:
视频正常播放,视频上的图层能正常显示
视频正常播放,视频上的图层能正常显示
实际结果:
视频正常播放,视频上的图层无法显示,或者被视频遮挡住了
视频正常播放,视频上的图层无法显示,或者被视频遮挡住了
bug描述:
video组件层级问题
在安卓机上的微信浏览器内打开的h5页面上,在video组件上放一层显示播放量类似的图层,该图层在视频播放后就不显示了,可能是因为video的层级太高遮挡住了,换用cover-view展示该播放量图层依然不显示,最后换用nvue页面依然有相同的问题,该问题目前只在安卓机的微信浏览器上的h5页面上发现。示例使用的是官方的示例在该环境中一样能重现该问题。
Tckin (作者)
我这边就在安卓微信浏览器中看是这样,同样的环境在ios上就是正常显示的
2020-05-26 17:31