在微信上播放网页视频(ios手机),会自动全屏去播放。百度上的解释是给video标签添加playsinline 和webkit-playsinline,去阻止自动全屏,我试了确实播放时不会自动全屏了,但是再点全屏按钮,视频再也没法全屏了。
1. 我尝试监听x5的全屏事件,去根据是否全屏移除和添加playsinline,发现没触发全屏事件
2.尝试监听全屏按钮,去移除playsinline,发现确实移除掉了,但是视频依然无法全屏,还需要再点一下全屏按钮,才能全屏,那么我直接在监听全屏按钮的同时,再去调用requestFullscreen让视频全屏,发现来回点两次后,页面就卡死了...

解决方案 »

  1.   

    有种坑爹的方案,如果感兴趣可以试试。通过阻止事件冒泡重写全屏按钮,然后通过transform,旋转九十度,宽高对调,实现伪全屏
     window.addEventListener('click', function(e) {
            var target = e.target;
            for(; target && target !== document; target = target.parentNode) {
              if(target.tagName == 'BUTTON') {
                if(~target.getAttribute('class').indexOf('vjs-fullscreen-control')){
                  e.preventDefault();
                  e.stopPropagation();
                  return false;
                }
              }}
          }, true);.rotates{
        transform: rotate(-90deg) translateX(-100%);
        -webkit-transform: rotate(-90deg) translateX(-100%);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }