微信公众号 安卓手机 未播放时点击全屏按钮,点击手机的返回键,页面回到上一页了再关闭视频,页面点击事件无响应

场景:

安卓手机上进入有视频的页面未点击播放,点击视频的全屏按钮,用手机自带返回键返回到了列表页,整个页面点击事件失效

思路:

思路一:点击返回按钮的时候关闭全屏播放并返回上一页;第一次点击返回按钮时关闭全屏,第二次点击返回按钮,返回上一页。(经实验关闭不了这个全屏)
思路二:隐藏全屏按钮 (ios、安卓x5内核没问题,安卓原生内核,因为隐藏全屏按钮导致不能全屏)
思路三:不用vidoe标签,用第三方插件video.js(唯一的缺点:安卓x5内核、安卓原生内核页面内播放样式不一致,IOS、安卓x5内核、安卓原生内核全屏播放时样式不一致)

隐藏全屏按钮的代码:

 video::-webkit-media-controls-fullscreen-button {
    display: none;
  }

隐藏全屏按钮前:


image.png

隐藏全屏按钮后:


image.png

第三方插件video.js

地址:https://docs.videojs.com/

你可能感兴趣的:(微信公众号 安卓手机 未播放时点击全屏按钮,点击手机的返回键,页面回到上一页了再关闭视频,页面点击事件无响应)