基本代码
<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退出全屏需要设置监听器用来恢复之前的样式