包含html5 video 标签的页面在ios的微信浏览器中整个页面无法滑动,卡在进入页面的可视区,无法向下滑动

澹台宇鹏
  • 1.6k

1.问题如题,使用html5的原生video标签的页面,在ios的微信浏览器中无法滑动页面,可视区一下的内容无法查看
2.框架使用的是vue
3.代码如下

<li v-for="(item,index) in videoList" class="img-list" @click="handlePlayVideo(item,index,$event)">
    <video v-if="videoPlay"  :poster="item.content+'?x-oss-process=video/snapshot,t_1,m_fast'" :src="item.content"></video>
    <img :src="item.content+'?x-oss-process=video/snapshot,t_1,m_fast'" alt="">
    <img class="video-play-icon" src="../../images/play.png" alt="">
</li>

4.尝试了的方法
(1)设置video的宽度为0
(2)设置video的display为none
(3)添加v-if当点击li时,再让video插入dom中
这些方法都尝试过,都无法解决问题,求助各位大佬

回复
阅读 3k
2 个回答
梦醒何其彷徨
  • 1
新手上路,请多包涵

问题解决了吗 我也遇到了类似的问题

问题解决了,第二种方法和第三种方法同时使用,设置video的display为none,然后再通过v-if将video插入dom中。。不过有新的问题出现,点击第一次,更改v-if中值为true时,页面的渲染没那么快,会先执行vedio.play(),这里会报错vedio.play() not a function。。所以需要点击两次才能播放视频,问题还在思考中。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏