http://mpvideo.qpic.cn/0b78biabsaaadaacplu7bvqfacwddefaagia.f10002.mp4?
点击按钮触发 requestFullscreen()
函数打开全屏
requestFullscreen () {
const docElm = document.documentElement
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen()
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
}
}
点击按钮触发 exitFullScreen()
函数关闭全屏
exitFullScreen () {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
}
}
如果需要监听全屏状态变换,可以监听 fullscreenchange
事件
document.addEventListener('fullscreenchange', () => {
console.log('fullscreenchange')
})
https://github.com/gywgithub/vue-d3-examples
https://github.com/gywgithub/vue-d3-examples/blob/master/src/views/Examples.vue#L263
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide