上传视频时前端直接对视频生成视频封面获取视频时长

作者：木木发布时间: 2022-06-06 阅读：

此处采用的是vue入参的方式，如果是原生js,则参数为this,其参数主要就是FIle对象，其实只要可以获取到File对象，就可以对其进行响应的操作获取这些数据，各方面的应用只需稍微调整一下就可以，很简单。

		checkfile(el){
	
		            console.log(el)
	
		            if (el?.target?.files?.length > 0) {
	
		                // console.log(el) 
	
		                const files = el.target.files[0]
	
		                const isLt100M = files.size / 1024 / 1024 < 100  //100M大小 
	
		                const size = files.size / 1024 / 1024  //文件大小单位为M,(做限制条件用) 
	
		                // console.log(files) 
	
		                //if (files.type.indexOf('mp4') === -1) { //如果不是视频格式(限制格式判断) 
	
		                    //alert('请选择mp4文件') 
	
		                //} 
	
		                const reader = new FileReader(); // 创建读取文件对象 
	
		                reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件 
	
		                reader.onload = function(t) { // 文件读取完成后 
	
		                    // console.log(t.target.result)//视频路径（可能已经不叫路径了，现在就是个数据流文件（@~__~@）） 
	
		                    let video = document.createElement("video");
	
		                    video.setAttribute('src', t.target.result);
	
		                    video.setAttribute('controls', 'controls');
	
		                    // video.setAttribute('width', 400); //设置大小，如果不设置，下面的canvas就要按需设置 
	
		                    // video.setAttribute('height', 240); 
	
		                    video.currentTime = 7  //视频时长，一定要设置，不然大概率白屏 
	
		                    video.addEventListener('loadeddata', function() {
	
		                        console.log('视频时长获取：',video.videoWidth)
	
		                        let canvas = document.createElement("canvas"),
	
		                        width = video.width, //canvas的尺寸和图片一样 
	
		                        height = video.height;
	
		                        canvas.width = width;//画布大小，默认为视频宽高 
	
		                        canvas.height = height;
	
		                        canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas 
	
		                        let dataURL = canvas.toDataURL('image/png'); //转换为base64 
	
		                        console.log(dataURL)
	
		                        video.setAttribute('poster', dataURL);//设置为视频封面 
	
		                        document.getElementById('a123').setAttribute('src', dataURL)
	
		                        // document.getElementById('output').appendChild(canvas)//可以放到页面上看看效果 
	
		                        //document.getElementById('output').appendChild(video) 
	
		                    });
	
		                };
	
		            }
	
		        },
	
		        <input type="file" name="" id="" @change="checkfile($event)" /> 
	
		        <img src="" id="a123" alt=""> 
	
		        <div id="output"></div>