vue中实现video视频截图保存，video全屏及退出

转载

mb5fe947dd062d3 2020-10-17 12:49:00

文章标签 ide 全屏宽高自定义 3c 文章分类 Html/CSS 前端开发

基本代码

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