- 发布：2022-02-12 11:25
- 更新：2022-12-20 11:03
- 阅读：536
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.3.11
手机系统： 全部
手机厂商： 华为
手机机型： p30
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<template>
<swiper class="banner" circular :autoplay="bannerAutoplay" interval="5000" @change="bannerChange" indicator-dots indicator-active-color="#ed3221">
<swiper-item class="bannerItem" v-for="(item,index) in 3" :key="index">
<view class="videoBox" v-if="index == 2">
<video class="video" id="bannerVideo" ref="bannerVideo"
src="https://bingo-file.oss-cn-zhangjiakou.aliyuncs.com/app/webFile/2022/01/17/16423846697068379.mp4"
loop :controls="false" object-fit="cover" :enable-progress-gesture="false" :enable-play-gesture="false"
></video>
</view>
<image v-else class="image" :src="'https://bingo-file.oss-cn-zhangjiakou.aliyuncs.com/app/webFile/2022/01/25/16430796336812867.png'"></image>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
current: 0,
bannerAutoplay: true, // 轮播图自动播放
// bannerVideoContext: {}, // 轮播图视频上下文
}
},
mounted() {
// this.bannerVideoContext = uni.createVideoContext('bannerVideo',this)
},
methods: {
// 轮播图监听
bannerChange(e) {
this.current = e.detail.current
if (this.current == 2) {
this.bannerAutoplay = false
// this.bannerVideoContext.play() // 无效
this.$refs.bannerVideo[0].play()
} else {
this.bannerAutoplay = true
}
}
}
}
</script>
<style scoped lang="scss">
.banner {
width: 750rpx;
height: 264rpx;
}
.bannerItem {
width: 750rpx;
height: 264rpx;
padding: 0 24rpx;
box-sizing: border-box;
}
.videoBox {
width: 702rpx;
height: 264rpx;
}
.video {
width: 702rpx;
height: 264rpx;
}
.image {
width: 702rpx;
height: 264rpx;
border-radius: 16rpx;
}
</style>
<template>
<swiper class="banner" circular :autoplay="bannerAutoplay" interval="5000" @change="bannerChange" indicator-dots indicator-active-color="#ed3221">
<swiper-item class="bannerItem" v-for="(item,index) in 3" :key="index">
<view class="videoBox" v-if="index == 2">
<video class="video" id="bannerVideo" ref="bannerVideo"
src="https://bingo-file.oss-cn-zhangjiakou.aliyuncs.com/app/webFile/2022/01/17/16423846697068379.mp4"
loop :controls="false" object-fit="cover" :enable-progress-gesture="false" :enable-play-gesture="false"
></video>
</view>
<image v-else class="image" :src="'https://bingo-file.oss-cn-zhangjiakou.aliyuncs.com/app/webFile/2022/01/25/16430796336812867.png'"></image>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
current: 0,
bannerAutoplay: true, // 轮播图自动播放
// bannerVideoContext: {}, // 轮播图视频上下文
}
},
mounted() {
// this.bannerVideoContext = uni.createVideoContext('bannerVideo',this)
},
methods: {
// 轮播图监听
bannerChange(e) {
this.current = e.detail.current
if (this.current == 2) {
this.bannerAutoplay = false
// this.bannerVideoContext.play() // 无效
this.$refs.bannerVideo[0].play()
} else {
this.bannerAutoplay = true
}
}
}
}
</script>
<style scoped lang="scss">
.banner {
width: 750rpx;
height: 264rpx;
}
.bannerItem {
width: 750rpx;
height: 264rpx;
padding: 0 24rpx;
box-sizing: border-box;
}
.videoBox {
width: 702rpx;
height: 264rpx;
}
.video {
width: 702rpx;
height: 264rpx;
}
.image {
width: 702rpx;
height: 264rpx;
border-radius: 16rpx;
}
</style> 操作步骤：
bug必现
bug必现
预期结果：
视频上下文可以控制
视频上下文可以控制
实际结果：
视频上下文不能控制
视频上下文不能控制
bug描述：
subNvue uni.createVideoContext()创建视频上下文后不能控制视频,我是用subNvue写的一个轮播图组件,轮播图中有一个视频,现在可以用ref实现控制
1 个回复
7***@qq.com - 期望泼天富贵，做个自在的人，不为钱财弯腰
这个bug解决了吗，一直都存在，一直没有反馈的吗