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

原创
2020/03/03 17:51
阅读数 1.4W

基本代码

<template>
    <div>
           <div v-show="source">
    		<div ref="content1">
                   <img title="退出全屏" :src="fullScreenRecoverImg" alt="缩小"  v-show="close" @click="exitFullCreen('videoElement1')">
                <videostyle="width:21vw;height:18vw;" 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>
export default {
    name:"video",
    props: {
        source:""
    },

data() {

return {
            open:true,
            close:false,
            fullScreenId:"",
            fullScreenWidth:"",
            fullScreenHeight:"",
            changeImg,
            fullScreenImg,
            fullScreenRecoverImg,
            snapshotImg,
        };

    },

created() {

    },

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>

注意点

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

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

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

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部