基本代码

<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>

注意点

截图是使用canvas绘制图片，构造<a>链接 使用download属性触发下载到本地；

全屏和退出全屏务必使video视频播放器和自定义退出图标合并为一个DIV，作为全屏的div块，设置自定义的退出图标position：fixed,这样就可以浮动在-- video上层显示，反之，如果仅仅使video播放器全屏，则自定义的退出图标在video全屏后无法显示在播放器上层；

退出全屏后，需要把video的宽高还原，可以把全屏前的宽高挂载到data属性，退出时，就不用管之前宽高到底是多少了；

ESC退出全屏需要设置监听器用来恢复之前的样式

链接: https://fly63.com/article/detial/8081