1***@qq.com
1***@qq.com
  • 发布:2022-11-17 17:04
  • 更新:2023-02-20 10:03
  • 阅读:668

【报Bug】在微信环境,使用swiper内嵌video实现短视频功能,切换swiper的时候ios不自动播放当前视频

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.9

浏览器平台: 微信内置浏览器

浏览器版本: 12

项目创建方式: HBuilderX

App下载地址或H5⽹址: http://newapptest.jujukj.com/indexJump.html#/pages/appPage/shortVideo/shortVideo?typeId=30&courserId=210

示例代码:
<swiper class="player-swiper" :current="currentVideo" vertical @change="handleSwipeVertical" :circular="true" :style="{'height': winHeight}"> <swiper-item v-for="(item, index) in videoList" :key="index"> <!-- 视频 --> <view class="player-video"> <!-- :poster="imageRootPath+item.coursePic" --> <video class="player" :id="'player' + index" :ref="'player' + index" :src="imageRootPath+item.chapterAddress" controls="false" :show-fullscreen-btn="false" :loop="true" :show-center-play-btn="false" object-fit="contain" autoplay="index == currentVideo" @play="isPlaying=true" @pause="pasued" @click="handleVideoClicked"

style="{'width': winWidth, 'height': winHeight}"> </video>
</swiper-item>
</swiper>
//创建视频对象
getVideoCtx() {
return uni.createVideoContext('player' + this.currentVideo, this)
},
// 垂直滑动视频
handleSwipeVertical(e) {
let index = e.detail.current
this.progressBar = 0
this.isPlaying = false
let video = this.getVideoCtx()
if (!video) return
video.pause()
// 重新开始
video.seek(0)
this.currentVideo = index

        // 自动播放  
        this.handlePlay()  

},
//播放视频
handlePlay() {
this.$nextTick(()=>{
let video = this.getVideoCtx()
if (!video) return
video.play()
this.isPlaying = true
})
},

操作步骤:

http://newapptest.jujukj.com/indexJump.html#/pages/appPage/shortVideo/shortVideo?typeId=30&courserId=210
该链接,用ios在微信打开,上下滑动切换屏幕

预期结果:

切换swiper 视频自动播放

实际结果:

ios不自动播放视频

bug描述:

swiper内嵌video组件 切换swiper,设置了play(),ios不生效,视频不播放。安卓没问题,视频会正常播放

2022-11-17 17:04 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

  • 1***@qq.com (作者)

    刚进入页面不能自动播放的问题我知道是浏览器限制,现在是 播放了第一个swiper里的视频,切换到下一屏的时候,在ios视频就没有自动播放了,安卓会

    2022-11-18 12:33

4***@qq.com

4***@qq.com

请问,问题解决了吗?我也遇到同样问题了

要回复问题请先登录注册