首页 > 其他分享 >js获取视频封面作为缩略图

js获取视频封面作为缩略图

时间:2023-08-04 15:45:39浏览次数:42  
标签:canvas 封面 dataUrl 缩略图 js let videoArr video height

 

 

 //获取视频封面作为缩略图:
    captureVideoImage() {
      let videoArr = document.querySelectorAll('.swipe-video');
      let _this = this;
      for (let i = 0; i < videoArr.length; i++) {
        //loadeddata当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。
        //浏览器支持:所有主流浏览器都支持 loadeddata 事件。注释:Internet Explorer 8 或更早的浏览器不支持该事件。
        let video = videoArr[i];
        video.addEventListener(
          'loadeddata',
          function() {
            let canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            video.setAttribute('crossorigin', 'anonymous'); //跨域设置,后端也需要设置CORS为*
            canvas
              .getContext('2d')
              .drawImage(video, 0, 0, canvas.width, canvas.height);
            let dataUrl = canvas.toDataURL('image/png');
            let pareantNode = video.parentNode;
            let imgNode = document.createElement('img');
            imgNode.src = dataUrl;
            if (video.videoWidth > video.videoHeight) {
              imgNode.style.height = '100%';
            } else {
              imgNode.style.width = '100%';
            }
            pareantNode.appendChild(imgNode);
            video.pause();
            console.log(dataUrl, 'dataUrl');
            _this.feedbackImages[i].dataUrl = dataUrl;
          },
          false
        );
      }
    },
    //设置video封面海报poster:
    setPoster() {
      let videoArr = document.querySelectorAll('.swipe-video');
      for (let i = 0; i < videoArr.length; i++) {
        let video = videoArr[i];
        video.setAttribute('crossorigin', 'anonymous');
        let canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        video.addEventListener(
          'loadeddata',
          function() {
            canvas
              .getContext('2d')
              .drawImage(video, 0, 0, canvas.width, canvas.height);
            let dataUrl = canvas.toDataURL('image/png');
            video.setAttribute('poster', dataUrl);
            console.log(dataUrl, 'dataUrl');
            video.pause();
          },
          false
        );
      }
    },

 

标签:canvas,封面,dataUrl,缩略图,js,let,videoArr,video,height
From: https://www.cnblogs.com/ruyijiang/p/17606119.html

相关文章

  • js设置随机颜色
    varchars=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];functiongen......
  • vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
    说在前面......
  • 在线直播系统源码,js循环数组的方法合集
    在线直播系统源码,js循环数组的方法合集一、forEach循环注:没有return返回值,且不能用break跳出循环。 letarrlist=['123','456','789'];arrlist.forEach(function(value,index){  //value是每一项,index是索引  console.log(value,index);}); ​二、for循环......
  • jsp各部分编码的含义
    pageEncoding是jsp文件本身的编码,       第一阶段是jsp编译成.java,它会根据pageEncoding的设定读取jsp,(jsp文件的编码,pageEncoding是否一致),结果是由指定的编码方案翻译成统一的UTF-8JAVA源码(即.java),如果pageEncoding设定错了,或没有设定(在JSP标准的语法中,如果pageEncoding属......
  • C# 读取json配置文件appsettings.json
    添加NuGet包Microsoft.Extensions.Configuration.FileExtensions;Microsoft.Extensions.Configuration.Json;appsettings.json示例 代码:publicstaticvoidGetBuilder(stringpath){varbuilder=newConfigurationBuilder()......
  • 【答疑】jsonpath和beanshell配合使用案例
    问题今天提升群小伙伴问了这样一个问题:接口返回如下(list元素个数不确定),需要提取所有的iautoid,然后用逗号拼接起来,如果是如下返回,需要得到的结果是1687283717749342208,1679392630364184576,后续请求需要使用{ "data":{ "firstPage":true, "lastPage":false, "list":......
  • js的一些写法
    1.用void0代替undefined不直接用undefined,因为undefined不是关键字,在函数中可以被变量占用,从而值发生变化,使用void(0)或void0,还好写一些2.用Number.isNaN代替isNaNisNaN很坑,判断不准,如下isNaN(undefined);//trueisNaN({});//trueisNaN("38,6")//true......
  • 重磅特性 - SpreadJS推出新插件甘特图,预览版下载体验中
    摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。甘特图对于业务场景中的工程项目管理、预算执行、生产计划等都能将原有的表格数据,转变为直观的甘特图模式。作为纯前端表格控件SpreadJS......
  • 怎么用js去除一组数据中重复的元素?
    怎么去除一组数据中重复的元素?functionremoveDuplicates(array){vartemp={}varresult=[]for(leti=0;i<array.length;i++){if(!temp[array[i]]){//如果设置当前元素的值不为truetemp[array[i]]=true//设置当前元素的值为true......
  • Golang 使用 JSON unmarshal 数字到 interface{} 数字变成 float64 类型
    最近在golang业务开发时,遇到一个坑。我们有个服务,会接收通用的interface对象,然后去给用户发消息。因此会涉及到把各个业务方传递过来的字符串,转成interface对象。但是因为我的字符串里有一个数字,比如下面demo里的{"number":1234567},而且数字是7位数,在经过json.Unmarshal后,被转成......