<template>
<view class="page">
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="http://7niu.zhiwi.cn/SCe1Lc3KLQ1bQ33UAKMLmUKmta8t3k.mp4">
<cover-view class="controls-title">简单的自定义 11controls</cover-view>
<cover-image class="controls-play img" @click="play" src="../../static/icon/1.png"></cover-image>
<cover-image class="controls-pause img" @click="pause" src="../../static/icon/2.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-08-27 09:49
- 更新:2024-07-08 15:44
- 阅读:1463
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window7
HBuilderX类型: 正式
HBuilderX版本号: 2.8.3
第三方开发者工具版本号: 1.0.3.2006090
基础库版本号: 2.12.2
项目创建方式: HBuilderX
示例代码:
操作步骤:
运行了就报错,效果都可以用。
运行了就报错,效果都可以用。
预期结果:
没有报错
没有报错
实际结果:
出现渲染层出错了
出现渲染层出错了
bug描述:
我用官方的文档,就换了个图片和视频地址。报错渲染层网络层错误。视频可以看,功能也可以用,但是看到这报错,比较烦人。
https://uniapp.dcloud.io/component/cover-view?id=cover-view
我就是复制了这个案例。我这是不是语法问题还是uniapp微信小程序的bug呢?我该怎么修改呢?