小程序webview-h5视频全屏播放

h5作为webview嵌套，小程序或客户端如果涉及全屏，会较为麻烦。
ios播放视频时，一般会默认全屏，阻止全屏反而会麻烦一些。
而安卓单靠h5是没法完成，视频全屏的。
需要客户端支持。

image.png

h5

实现video是没法直接点击的，一般用div定位覆盖上去。
图片则是poster的属性可以不用img。
x5为微信h5的一种内核，类似webkit且不要写playsinline类似的任何属性。
那个是阻止全屏的!!!

<video id="video" poster="xx"
 x5-video-player-type="h5"
 x5-video-player-fullscreen="true"
 x5-video-orientation="landscape|portrait"
></video>
<div  @click="videoShow"></div>

//  涉及vue语法
mounted() {
 document.addEventListener("fullscreenchange", () => {
            if (!this.checkIsFullScreen()) {
              // 退出全屏
              const video = document.querySelector("video");
              if (video) {
                video.pause();
              }
            }
          });
},
methods： {
checkIsFullScreen() {
            var isFullScreen =
              document.fullscreen ||
              document.mozFullScreen ||
              document.webkitIsFullScreen;
            return isFullScreen == undefined ? false : isFullScreen;
          },
          videoShow() {
            const video = document.querySelector("#video");
            if (video.requestFullscreen) {
              video.play();
              video.requestFullscreen();
            } else if (video.webkitReuestFullscreen) {
              video.play();
              video.webkitReuestFullscreen();
            } else {
              video.play();
              video.webkitReuestFullscreen();
            }
          },

}

安卓webview客户端处理参考：
https://blog.csdn.net/weixin_28909745/article/details/117497145