视频全屏和取消全屏播放功能

vue中视频全屏和取消全屏播放功能

    <div class='iconBox'>
        <div class="center"><Icon type="md-expand" size="25" @click="videoFullscreen('videoElement')" /></div>
    </div>
      
      
    videoFullscreen(videoElement) {
      if (!this.iffullscreen) {
        this.launchFullscreen(document.getElementById(videoElement))
        this.iffullscreen = false
      } else {
        this.iffullscreen = true
        this.exitFullscreen()
      }
    },
    
    // 进入全屏
    launchFullscreen(videoElement) {
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen()
      } else if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen()
      } else if (videoElement.msRequestFullscreen) {
        videoElement.msRequestFullscreen()
      } else if (videoElement.oRequestFullscreen) {
        videoElement.oRequestFullscreen()
      } else if (videoElement.webkitRequestFullscreen) {
        videoElement.webkitRequestFullScreen()
      }    
    },
    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.oRequestFullscreen) {
        document.oCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },

如果页面使用了iframe， 会报错Uncaught (in promise) TypeError: Disallowed by permissions policy

解决问题:在iframe中添加属性allowfullscreen="true"

<iframe allowfullscreen="true""></iframe>

参考网址：

blog.csdn.net/weixin_4422…