video同层播放层级过高遮挡模拟暂停按钮的问题

forrest23 发布于2019-08-23 14:10 / 2403人阅读

摘要：首先在非第一屏播放安卓会出现的问题是竖屏只有声音没有图像，我尝试了好久只需要去掉安卓部分的同层播放代码即可，即去掉如果视频在里，你肯定会有这样的需求，就是滑动到非视频页的时候，暂停视频，并出现一个模拟的暂停按钮在视频上方。

在ios和android上有显示的区别，如果你只是显示一个普通的网页，只需要在iOS上加上webkit-playsinline="true" 安卓上x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint"，即可实现在微信上的同层播放；iOS和安卓显示和播放没有问题；
如果你跟我一样想要把视频放到swiper里，且不是在第一页播放视频，并想要视频有圆角。那么问题就来了。首先在swiper非第一屏播放安卓会出现的问题是竖屏只有声音没有图像，我尝试了好久只需要去掉安卓部分的同层播放代码即可，即去掉x5-video-player-type="h5"；如果视频在swiper里，你肯定会有这样的需求，就是滑动到非视频页的时候，暂停视频，并出现一个模拟的暂停按钮在视频上方。这里可以这样写：

const mySwiper = new Swiper(".swiper-container", {
    direction: "vertical",
    on: {
      slideChangeTransitionEnd: function() {
        if (this.activeIndex != 1) {
          //暂停视频代码
        }
      }
    }
  })

这里定义一个是否显示暂停的按钮的变量showPoster，来显示暂停模拟按钮和隐藏video；
这里显示播放按钮必须和视频显示必须呈反相关，因为不这样作会有很多默认的bug，导致video_container的overflow:hidden不生效，无法显示圆角，这算是一种比较圆滑的做法了；我试过将video的position设为fixed 这样虽然能正常显示和隐藏模拟的点击按钮，但会让父级的overflow：hidden失效。无法显示视频圆角。代码大概如下：

注：如果你在swiper的非第一页使用视频，在安卓手机上会出现视频黑屏但可以播放声音的问题，这个时候就可以不使用安卓的同层播放，即不使用x5-video-player-type="h5"即可。
同层播放的资料参考链接：http://www.cnblogs.com/jinjin...

云服务器 GPU云服务器 h5同层视频播放模式下暂停后继续播放 js视频播放暂停 js视频播放或暂停

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100213.html

video同层播放层级过高遮挡模拟暂停按钮的问题

摘要：首先在非第一屏播放安卓会出现的问题是竖屏只有声音没有图像，我尝试了好久只需要去掉安卓部分的同层播放代码即可，即去掉如果视频在里，你肯定会有这样的需求，就是滑动到非视频页的时候，暂停视频，并出现一个模拟的暂停按钮在视频上方。在ios和android上有显示的区别，如果你只是显示一个普通的网页，只需要在iOS上加上webkit-playsinline=true 安卓上x5-video-p...

xcold 2019-08-02 13:56 评论0 收藏0
video在安卓与ios实际应用中遇到的问题及解决

摘要：中在安卓与实际应用中遇到的问题及解决安卓和对于中的兼容一直是大问题，各种不一样，体验还很差。参考视频播放踩坑小计中在安卓与实际应用中遇到的问题及解决视频标签的一些特殊属性详解微信中同层播放器接入教程标签在微信浏览器的问题解决方法 html5中video在安卓与ios实际应用中遇到的问题及解决安卓和IOS对于html5中的video兼容一直是大问题，各种不一样，体验还很差。这段时间做一...

AlphaGooo 2019-08-23 18:31 评论0 收藏0
H5视频活动踩坑

摘要：最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。视频的播放和暂停主要是调用和方法。最后需要注意的是在端播放视频后是不会主动退出同层播放器的。最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。1、碰到问题和解决方案1.1、ios 网页中播放视频默认全屏（点击视频会弹出播放器进行全屏播放...

walterrwu 2019-08-30 14:01 评论0 收藏0