使用js截取视频指定秒数的图片

使用js截取视频指定秒数的图片
点击按钮，选择本地视频后，截取指定秒数的图片
运行结果如下图：

直接上代码：
1、html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.sdddq {font-size: 20px;height: 35px;width: 150px;}.sssd {border-left-width: 1px;border-left-style: solid;border-left-color: #999;text-align: center;}.bgColor {filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22000000', EndColorStr='#33FFFFFF');background-image: linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.4) 100%, #FFFFFF 100%);}#video {width: 35%;}</style></head><body><!-- 视频播放器--><center><video id="video" src="" controls="controls" loop="loop" autoplay style="margin: auto;" preload="auto"autoplay="autoplay" style="width: 35%"></video></center><!-- 视频地址     按钮--><center><p id="address"></p>           <p><br><marquee direction=left id="address">操作说明:输入要截取的秒数</marquee><br><input class="sdddq" id="inp" value="0"></input></p><br /></p></center><br><div style="text-align: center;" style="margin-top:30%;"><input id="file" type="file" value="" onchange="look()"><br /><br /><button type="button" id="btn">开始截图</button><button type="button"  onclick="xiazai()">下载图片</button>           </div><br><center><img id="img" style="margin: 0 auto; width: 35%"></center></body>
<!-- 引入js文件--><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script src="assets/js/indexjs.js"></script><script type="text/javascript">var vid = document.getElementById("video");var shi;vid.onloadedmetadata = function() {//console.log('metadata loaded!');//console.log(vid.duration); //打印时长shi = parseInt(vid.duration);document.getElementById("address").innerHTML = "最大时长：" + shi + ",&nbsp您只能输入0到" + shi + "秒之间的秒数";};//使用事件监听方式捕捉事件video.addEventListener("timeupdate", function() {var timeDisplay;//用秒数来显示当前播放进度timeDisplay = Math.floor(video.currentTime);console.log(Math.floor(video.currentTime));//document.getElementById("current").innerHTML = timeDisplay+"秒";shuru = document.getElementById('inp').value = timeDisplay;}, false);function look() {let file = document.getElementById('file').files[0];let url1 = URL.createObjectURL(file);document.getElementById("video").src = url1;}function xiazai() {var img = document.getElementById('img'); // 获取要下载的图片var url = img.src; // 获取图片地址var a = document.createElement('a'); // 创建一个a节点插入的documentvar event = new MouseEvent('click') // 模拟鼠标click点击事件a.download = 'beautifulGirl' // 设置a节点的download属性值a.href = url; // 将图片的src赋值给a节点的hrefa.dispatchEvent(event)}// 绑定下载document.getElementById("btn").onclick = function() {let file = document.getElementById('file').files[0];let srcmp4 = URL.createObjectURL(file);videoCover(srcmp4, null, null);}/*** @param {String} src 视频链接* @param {Number} width 视频容器播放的宽* @param {Number} height 视频容器播放的高* @param {Number} second 需要截图视频的帧数, 单位秒* @param {Number} bufftime 视频加载缓冲的时长, 单位秒*/function videoCover(src, width, height, second, bufftime) {const canvas = document.createElement('canvas'); //  创建canvas 用来截图const video = document.createElement('video'); //  创建video 用来存放被截图的视频const img = document.getElementById('img') //  用来显示截图的图片效果const a = document.getElementById('a') //  用来自动下载图片保存到本地video.setAttribute('crossOrigin', 'anonymous'); //  支持跨域document.body.appendChild(video); //  把视频插入页面里video.setAttribute('src', src); //  设置video路径video.style.visibility = "show" //  视频不显示// 监听视频播放video.onplay = function() {// 暂停video.pause()// 指定播放时间 1代表视频的第一秒帧 可以浮点数                 var zhenshu = document.getElementById('inp').value;video.currentTime = second || zhenshu;// 设置视频容器的宽高播放 如果设置一项会自动按照比例生成  这里是高固定,宽自动video.height = height || video.clientHeight;// 设置canvas的截图大小,如果没给定宽高值会取视频容器的宽高canvas.width = width || video.clientWidth;canvas.height = height || video.height;/*  使用定时器为了视频跳转到某一帧的时候视频进行缓冲,等视频加载完成之后进行截图如果截图是黑屏说明视频未加载完成就开始截屏了*/setTimeout(() => {//  使用canvas进行绘画 视频画面canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);// 获取到base64图片 png格式const IMG_TYPE = "png"const b64 = canvas.toDataURL('image/' + IMG_TYPE);// 展示到页面上给img的src赋值document.getElementById('img').setAttribute('src', b64);// //  模拟点击自动下载图片// document.getElementById('a').click()//  移除视频容器document.body.removeChild(video);}, bufftime * 1000 || 3000);}// 当视频准备就绪的时候 video.onloadeddata = () => {//  播放它video.play()}}</script>
</html>

indexjs.js代码

(function($){ function getRandom(n){return Math.floor(Math.random()*n+1)}var inputp={indexInput:0,addNew:function(obj,stepNum){this.initNew(obj,stepNum);this.indexInput++;},getDigit:function(val,num){var digitNum=0;if(num.toString().split(".")[1]){digitNum=num.toString().split(".")[1].length;}if(digitNum>0){val=val.toFixed(digitNum);}return val;},initNew:function(obj,stepNum){var width=obj.width();var height=obj.height();var height1=height;var _root = this;width+=3;//height+=0; obj.css("border-style","none");obj.css("border-width","0px");obj.css("width",width-height1*2-7);obj.css("text-align","center");obj.css("outline","none");obj.css("vertical-align","middle");obj.css("line-height",height+"px");obj.wrap("<div id='"+obj.attr('id')+"T' style='overflow:hidden;width:"+width+"px;height:"+height+"px;border: 1px solid #CCC;'></div>");obj.before("<div id='"+obj.attr('id')+"l'  onselectstart='return false;' style='-moz-user-select:none;cursor:pointer;text-align:center;width:"+height1+"px;height:"+height1+"px;line-height:"+height1+"px;border-right-width: 1px;border-right-style: solid;border-right-color: #CCC;float:left'>-</div>");obj.after("<div id='"+obj.attr('id')+"r'  onselectstart='return false;' style='-moz-user-select:none;cursor:pointer;text-align:center;width:"+height1+"px;height:"+height1+"px;line-height:"+height1+"px;border-left-width: 1px;border-left-style: solid;border-left-color: #CCC;float:right'>+</div>");$("#"+obj.attr('id')+"l").click(function(){_root.leftDo(obj,stepNum);});$("#"+obj.attr('id')+"r").click(function(){_root.rightDos(obj,stepNum);});},leftDo:function(obj,stepNum){var val=this.formatNum(obj.val());val=Math.abs(val);val-=stepNum;val=this.getDigit(val,stepNum);if(val<0){val=0;obj.val(0);}else{this.moveDo(obj,val,true,stepNum);};},rightDos:function(obj,stepNum){var val=this.formatNum(obj.val());val=Math.abs(val);val+=stepNum;val=this.getDigit(val,stepNum);this.moveDo(obj,val,false,stepNum);},moveDo:function(obj,num,isup,stepNum){var startTop=0;var endTop=0;if(stepNum>=1){if(num.toString().split(".")[1]){num=num.toString().split(".")[0];obj.val(num);}}var num1=num;var lens1=num.toString().length;var divwidth=parseFloat(obj.css("font-size"))/2;if(isup){obj.val(num1);var isDecimal=false;for(i=lens1-1;i>=0;i--){var s=num.toString();var s1=s.substr(i,1);var s1num=parseFloat(s1);if(s1num!=9||isNaN(s1num)){if(isNaN(s1num)){//num=parseFloat(s.substr(i-1,lens1-i));
//                          num++;
//                          num=this.getDigit(num,stepNum);}else{num=parseFloat(s.substr(i,lens1-i));num++;break;}}}//num=this.getDigit(num,stepNum)startTop=0;endTop=-40;}else{var isDecimal=false;for(i=lens1-1;i>=0;i--){var s=num.toString();var s1=s.substr(i,1);var s1num=parseFloat(s1);if(s1num!=0||isNaN(s1num)){if(isNaN(s1num)){//num=parseFloat(s.substr(i-1,lens1-i));
//                          num=this.getDigit(num,stepNum);isDecimal=true;}else{num=parseFloat(s.substr(i,lens1-i));break;}}}if(isDecimal){num=this.getDigit(num,stepNum);}startTop=40;endTop=0;}if($("#"+obj.attr('id')+"Num").length <1){//background-color:#fff;var numstr=num.toString();var widths=divwidth*numstr.length;var stri="<div id='"+obj.attr('id')+"sy' style='position:relative;width:0px;height:0px'><div id='"+obj.attr('id')+"Num' style='width:"+widths+"px;z-index:100;position:absolute;height:"+obj.height()+"px;top:"+startTop+"px; line-height:"+obj.height()+"px;font-family: "+obj.css("font-family")+";font-size:"+obj.css("font-size")+";'>";for(i=0;i<numstr.length;i++){var nums=numstr.substr(i,1);if(nums=="."){stri+="<div style='float:left;width:"+divwidth+"px;'>&nbsp;";}else{stri+="<div style='float:left;width:"+divwidth+"px;background-color:#fff'>";stri+=nums;}stri+="</div>";}stri+="</div></div>";$("#"+obj.attr('id')+"T").prepend(stri);var leftOff=0;if(num1.toString().length-num.toString().length>0){leftOff=(divwidth*(num1.toString().length-num.toString().length))/2;}var pz=0;if(/msie/.test(navigator.userAgent.toLowerCase())){pz=1; }if(/firefox/.test(navigator.userAgent.toLowerCase())){pz=1; }if(/webkit/.test(navigator.userAgent.toLowerCase())){}    if(/opera/.test(navigator.userAgent.toLowerCase())){pz=1;} var leftpx=(obj.width()/2)+obj.height()-($("#"+obj.attr('id')+"Num").width()/2)+1+leftOff+pz;$("#"+obj.attr('id')+"Num").css("left",leftpx);$("#"+obj.attr('id')+"Num").animate({ top:endTop+'px'//,opacity:0.4},  300,  function(){  $("#"+obj.attr('id')+"sy").remove();if(isup){}else{obj.val(num1);}});  }       },formatNum:function(val){var val=parseFloat(val);if(isNaN(val)){ val=0;}return val;  },};$(function(){inputp.addNew($("#inputs"),0.1);inputp.addNew($("#inp"),1);})
})(jQuery);  // JavaScript Document
// 把16进制颜色转换成rgb格式

使用js截取视频指定秒数的图片相关推荐

Thread.yield()方法表示交出主动权，join表示等待当前线程，可以指定秒数
Thread.yield()方法表示交出主动权,join表示等待当前线程,可以指定秒数学习了:http://www.importnew.com/14958.html 膜拜一下源码膜拜: Threa ...
php ffmpeg截图,php ffmpeg截取视频第一帧保存为图片的方法
php ffmpeg截取视频第一帧保存为图片的方法 $xiangmupath = $this->getxiangmupath(); $filename = 'chengshi'; $cmd = ...
视频剪辑工具，从指定秒数中随机抽帧，以图片格式保存
视频太多,如何剪辑,比如说按指定的秒数从中随机抽帧,并将帧以图片格式保存到电脑上呢?下面随小编一起来试试. 需要哪些工具? 视频素材若干怎么快速添加? 打开[媒体梦工厂],在"视频封面&q ...
视频剪辑教程，按指定秒数分割每段视频
在剪辑的时候,如果想对视频进行分割,比如按一定的秒数进行切割,该如何实现呢?今天小编给大家分享一个新的剪辑技巧,下面一起来试试,希望能给大家带来帮助. 需要哪些工具? 视频素材若干怎么快速分割? 运 ...
快速剪辑视频，每个视频按秒数快速分割，并保留原声
如何将视频分割成几小段,每个视频可以按秒数来分割后并保留原声吗?下面一起用媒体梦工厂来试试吧. 在电脑上登录上"媒体梦工厂"进入到"分割视频"的版块上将需要分 ...
matlab 秒数转换时分秒,js 时分秒与秒数的转换
1. 时间戳格式化为时分秒(00:00:00) /** * 时间秒数格式化 * @param s 时间戳(单位:秒) * @returns {*} 格式化后的时分秒 */ var sec_to_t ...
JS中通过指定大小来压缩图片
前不久王二写了一个图片处理库,可以指定图片质量压缩图片,调用的是javaScript的原生方法 toDataURL 和 toBlob,库里有如下这些方法: 但是通过质量压缩图片有一些不足之处:无法确定 ...
ubuntu ffmpeg 截取视频指定时间范围，坐标范围
截取时间范围 -ss后面是start time, -to 后面是end time, in.avi是输入视频,out.avi是输出视频 ffmpeg -ss 00:00:10 -to 00:01:10 ...
html指定表格行列书,js动态生成指定行数的表格
下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值动态生成表格行效果如下图所示: 2.header中添加js代码 function table() ...

使用js截取视频指定秒数的图片

使用js截取视频指定秒数的图片相关推荐

最新文章

热门文章