基本代碼
<template> <div> <div v-show="source"> <div ref="content1"> <img title="退出全屏" :src="fullScreenRecoverImg" alt="縮小" v-show="close" @click="exitFullCreen('videoElement1')"> <video id="videoElement1" muted autoplay></video> </div> <span><i><img@click='getFullCreeen("content1","videoElement1")' :src="fullScreenImg" style="width:1vw;" ></i></span> <span><i><img@click='snapshot(0)' :src="snapshotImg" style="width:1vw;" ></i></span> <canvas style="display:none;width:28vw;height:24vw;"></canvas> </div> </div> </template> <script> exportdefault { name:"video", props: { source:"" }, data() { return { open:true, close:false, fullScreenId:"", fullScreenWidth:"", fullScreenHeight:"", changeImg, fullScreenImg, fullScreenRecoverImg, snapshotImg, }; }, created() { // if (document.getElementById("videoElement1")) { // this.play(); // } }, mounted() { //監聽鍵盤按鍵事件 let self =this; window.onresize=function() { if (!self.checkFull()) { // 退出全屏后要執行的動作 self.clearScreenStyle(); } } if (document.getElementById("videoElement1")) { this.play(); } }, methods: { checkFull() { var isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; return isFull; }, clearScreenStyle() { if(this.fullScreenId){ this.open =true; this.close =false; var videoElement = document.querySelector(this.fullScreenId); videoElement.style.width =this.fullScreenWidth; videoElement.style.height =this.fullScreenHeight; } }, downloadImage(url) { var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('target', '_blank'); a.setAttribute('id', 'vid'); a.setAttribute('download', "image"+ (+newDate()) +".png"); let canSupportDownload ='download'in a; // 防止反復添加 if (document.getElementById('vid')) { document.body.removeChild(document.getElementById('vid')); } if (canSupportDownload) { document.body.appendChild(a); a.click(); } else { alert("不支持下載"); window.open(url); } }, snapshot(order) { var video = document.querySelectorAll("video")\[order\]; //獲取前台要截圖的video對象， var canvas = document.querySelectorAll('canvas')\[order\]; //獲取前台的canvas對象，用於作圖 var ctx = canvas.getContext('2d'); //設置canvas繪制2d圖， ctx.drawImage(video, 0, 0, canvas.width, canvas.height); //將video視頻繪制到canvas中 var images = canvas.toDataURL('image/png'); //canvas的api中的toDataURL()保存圖像 this.downloadImage(images); }, getFullCreeen(ref, vid) { this.open =false; var elem =this.$refs\[ref\]; this.requestFullScreen(elem); this.fullScreenId ="#"+ vid; var videoElement = document.querySelector("#"+ vid); this.fullScreenWidth = videoElement.style.width; this.fullScreenHeight = videoElement.style.height; videoElement.style.width ="100%"; videoElement.style.height ="100%"; this.close =true; }, requestFullScreen(element) { var requestMethod = element.requestFullScreen ||//w3c element.webkitRequestFullScreen ||//chrome element.mozRequestFullScreen ||//firefox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); } }, // 退出全屏 exitFullCreen(vid) { this.open =true; this.close =false; var exitMethod = document.exitFullscreen ||//W3C document.mozCancelFullScreen ||//Chrome等 document.webkitExitFullscreen ||//FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); } elseif (typeof window.ActiveXObject !=="undefined") { //for Internet Explorer var wscript =newActiveXObject("WScript.Shell"); if (wscript !==null) { wscript.SendKeys("{F11}"); } } this.clearScreenStyle(); } } }; </script>廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com
注意點
截圖是使用canvas繪制圖片，構造<a>鏈接 使用download屬性觸發下載到本地；
全屏和退出全屏務必使video視頻播放器和自定義退出圖標合並為一個DIV，作為全屏的div塊，設置自定義的退出圖標position：fixed,這樣就可以浮動在-- video上層顯示，反之，如果僅僅使video播放器全屏，則自定義的退出圖標在video全屏后無法顯示在播放器上層；
退出全屏后，需要把video的寬高還原，可以把全屏前的寬高掛載到data屬性，退出時，就不用管之前寬高到底是多少了；
ESC退出全屏需要設置監聽器用來恢復之前的樣式