js视频全屏以及监听的解决方案

js视频全屏以及监听的解决方案

视频全屏在不同的浏览器上的使用的方法不同，因此需要对各个浏览器做一下兼容

        //视频全屏
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
          video.mozRequestFullScreen();
        } else if (video.webkitRequestFullScreen) {
          video.webkitRequestFullScreen();
        } else if (video.webkitEnterFullscreen) {
          // iOS进入全屏
          video.webkitEnterFullscreen();
        }

        //退出视频全屏
        if (video.exitFullscreen) {
          video.exitFullscreen();
        } else if (video.mozCancelFullScreen) {
          video.mozCancelFullScreen();
        } else if (video.webkitCancelFullScreen) {
          video.webkitCancelFullScreen();
        }

屏幕事件的监听可以使用fullscreenchange

          video.addEventListener(
            "webkitfullscreenchange",
            this.onFullscreenChange,
            false
          );
          video.addEventListener(
            "fullscreenchange",
            this.onFullscreenChange,
            false
          );
          video.removeEventListener(
            "fullscreenchange",
            this.onFullscreenChange
,
            false
          );

在ios设备上并没有可用的事件，但是webkitDisplayingFullscreen还是可用，因此可以通过计时器去获取这个的值来实现监听

        this.timer = setInterval(() => {
          if (!video.webkitDisplayingFullscreen) {
            // 退出了全屏
            clearInterval(this.timer);
            video.play();
//全屏切换会暂停播放视频，这里给它开启播放
          }
        }, 1000);

~谢谢打赏~

赏