我用官方的文档,就换了个图片和视频地址。报错渲染层网络层错误。视频可以看,功能也可以用,但是看到这报错,台烦人了。
https://uniapp.dcloud.io/component/cover-view?id=cover-view
我就是复制了这个案例。我这是不是语法问题还是uniapp微信小程序的bug呢?
<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>