jquery上传视频,并截取视频第一帧做封面主图同步上传(附完整在线实例)亲测 原创 收藏

文章标签: 视频 图片特效
  • :
  • 04-04 18:19
  • :
  • 1658次
  • :
  • 0条
  • 3赞

简介本文非常详细的讲解了如何用jquery来作视频上传功能时,同步获取视频的第一帧当作封面主图同步上传的方法及步骤,并且还有完整的在线实例演示,可以直接复制而拿去用的。

本文,站长和大家分享一个我们日常web开发中会用到的实例:jquery做的视频上传,并获取视频的第一帧当作视频的主图同步上传

文章的最后会有完整的在线实例演示提供给大家,不想看站长啰嗦的可以直接拉到文章的最后,去看在线实例。

我们要做的视频,及封面同步上传,需要实现以下几点:

  1. 可以拖拽上传;

  2. 上传之前可以预览视频,及截取到的封面;

  3. 要使用jquery里的ajax来上传;

下面,站长和大家来一步步的说,要如何完成:

为了方便你阅读,在这里展示的只有核心的代码,其它的,如CSS样式的控制,上传前所选文件的类型及大小的判断等,都不再显示!

第一步:部署相关的HTML代码:

<div id="drop">
    <h2>可把图片直接拖拽到这里</h2>
</div>
<input type="file" id="selectfile">
<button id="Up">上传</button>

html代码很简单,div#drop是拖拽上传区及视频和封面的预览区,其它的就是一个file文件选择控件和一个上传按钮。

第二步:实现文件拖拽的功能:

关于文件的拖拽,站长以前写过好几篇相关的文章,这里不再详细解释,需要的朋友可以看拖拽专题》!

var $drop=$("#drop");
with($drop){
    on("dragenter",function(){$drop.addClass("drag_hover");});
    on("dragleave",function(){$drop.removeClass("drag_hover");});
    on("dragover",function(e){
      e.originalEvent.dataTransfer.dragEffect = 'copy';
      e.preventDefault();
    });
    on("drop",function(e){
      e.preventDefault();
      var files = e.originalEvent.dataTransfer.files;
      $drop.removeClass("drag_hover");
      if(files.length != 0){GetFile(files);};
    });
};

第三步:实现视频的预览:

上一步里,我们把拖拽到的文件,通过GetFile这个函数来处理,我们要实现视频的预览也是在这个函数里实现的。

function GetFile(files){
  var file=files?files[0]:false;if(!file){return false;};
  //file 就是我们要上传的视频了
  var reader = new FileReader();
  reader.onload =function(){
    $drop.html("");
    var html="<video src='"+URL.createObjectURL(file)+"' controls />";
    var $video=$(html).appendTo($drop.find("#video"));
    with($video){
      on("error",function(){alert("加载视频失败!请上传正确的视频!");return false;});
      on("loadeddata",function(){MakePoster($video[0]);});
    };
  };
  reader.readAsDataURL(file);//onload事件要放在这一句之前
};

上面代码里,URL.creatObject 是用来显示客户端(本地)的文件的,按站长自己的话来说,就是本来我们的web与客户端的文件,是没有“关联”的,比如我们把客户端的一张图片或视频拖拽到我们的网页里,浏览器只会重新打开个页面来显示,而URL.creatObject就是为了解决这个,它可以让我们的web与客户端的文件之间,创建一个”通道“,可以让客户端的文件在我们的web里显示。

第四步:获取视频的第一帧,生成图片,并显示出来,也就是预览的功能:

上面第三步,在视频加载完成的loadedata事件中,有一个函数:MakePoster,就是用来获取视频的第一帧,生成图片的:

function MakePoster(video){
    //canvas转Blob
    var dataURLtoBlob=function (dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while(n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr],{type:mime});
    };
    var scale = 0.7;//截图绽放比例
    var canvas = document.createElement("canvas");
    canvas.width = video.videoWidth * scale;
    canvas.height = video.videoHeight * scale;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width,canvas.height);
    var imgsrc = canvas.toDataURL('image/jpeg',0.8);//第二个参数指图片质量
    var poster=dataURLtoBlob(imgsrc);//这是我们要上传的封面图片
    $drop.append('<img src="'+imgsrc+'">');//把图片显示到#drop里,实现封面的预览
}

上面代码里,函数dataURLtoBlob的作用是把dataURL转成Blob对象,是为了后面我们要上传时用的,blob对象其实和file对角差不多,file对象的基础就是blob对象,所以我们要ajax上传图片或文件时,可以直接上传blob对象的。

PS:JS里DataURL、File、Blob及canvas对象间互相转换的方法函数

第五步:实现ajax上传数据:

我们用UForm来上传数据,在上面的第三步和第四步里,代码里站长已经备注了获取到的视频的数据,和封面截图的数据,可以直接用append的方法来把数据添加到UForm对象里,参考:《通过实例来了解FormData对象的方法和属性[原创]

$.ajax({
    url:"服务器端接收数据的文件",
    type:"POST",
    data:UForm,
    success:function(d){
        //成功
    },
    error:function(e){alert("上传出错!");},
    //用jquery的ajax上传时,要记得加上下面这两个参数:
    contentType:false,    //不设置上传数据的类型
    processData:false    //不对要上传的数据进行处理
});

站长写文章不容易,转载的朋友,请备注,本文首发 爱jquery www.aijquery.cn

好了,到这里,我们已经完成了我们所有的要求了,这里是完整的在线实例演示jquery上传视频并截取第一帧当作封面图同步上传的在线演示



您正在找的文章可能是: