关于javascript:html5-video视频播放时自动全屏播放完时自动退出全屏

<template>
    <video ref="myVideo" class="w-100 h-100" controls="controls" :src="videoUrl"></video>
</template>
 
<script>
export default {
 
   name: 'video',
 
    mounted() {
        const myVideo = this.$refs.myVideo
        this.$nextTick(() => {myVideo.addEventListener('play', this._bindHandlerFull)
            myVideo.addEventListener('ended', this._unbindHandlerFull)
          })
    },
    methods:{
        // bind
        _bindHandlerFull() {
          const myVideo = this.$refs.myVideo
          console.log('开始播放')
          this.launchFullscreen(myVideo)
        },
 
        // unbind
        _unbindHandlerFull() {console.log('播放完结')
          // 檢查瀏覽器是否處於全屏
          if (this.invokeFieldOrMethod(document, 'FullScreen') ||
            this.invokeFieldOrMethod(document, 'IsFullScreen') ||
            document.IsFullScreen
          ) {this.exitFullscreen()
          }
        },
 
    // 反射调用
    invokeFieldOrMethod(element, method) {
      var usablePrefixMethod
      ;['webkit', 'moz', 'ms', 'o', ''].forEach(function(prefix) {if (usablePrefixMethod) return
        if (prefix === '') {
          // 无前缀，办法首字母小写
          method = method.slice(0, 1).toLowerCase() + method.slice(1)
        }
        var typePrefixMethod = typeof element[prefix + method]
        if (typePrefixMethod + ''!=='undefined') {if (typePrefixMethod === 'function') {usablePrefixMethod = element[prefix + method]()} else {usablePrefixMethod = element[prefix + method]
          }
        }
      })
 
      return usablePrefixMethod
    },
 
    // 进入全屏
    launchFullscreen(element) {
      // 此办法不能够在異步任務中執行，否則火狐無法全屏
      if (element.requestFullscreen) {element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()
      } else if (element.msRequestFullscreen) {element.msRequestFullscreen()
      } else if (element.oRequestFullscreen) {element.oRequestFullscreen()
      } else if (element.webkitRequestFullscreen) {element.webkitRequestFullScreen()
      } else {
        var docHtml = document.documentElement
        var docBody = document.body
        var videobox = document.getElementById('videobox')
        var cssText = 'width:100%;height:100%;overflow:hidden;'
        docHtml.style.cssText = cssText
        docBody.style.cssText = cssText
        videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
        document.IsFullScreen = true
      }
    },
 
    // 退出全屏
    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()
      } else {
        var docHtml = document.documentElement
        var docBody = document.body
        var videobox = document.getElementById('videobox')
        docHtml.style.cssText = ''docBody.style.cssText =''
        videobox.style.cssText = ''
        document.IsFullScreen = false
      }
    }
    }
 
 
}
 
</script>