js前端获取video视频名称+时长+缩略图+宽高

这篇具有很好参考价值的文章主要介绍了js前端获取video视频名称+时长+缩略图+宽高。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js前端获取video视频名称+时长+缩略图+宽高,缩略图的核心是用canvas画出来的base64图片,调用函数需要传入二进制的视频文件,注意这是一个promise函数,需要用then来接收,代码如下文章来源地址https://www.toymoban.com/news/detail-523130.html

	// 调用
	asyncImgChecked(file).then(res=>{
		console.log(res)
	})
	
	// 获取视频标题+时长+缩略图+宽高
    asyncImgChecked(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.readAsDataURL(file.raw); // 必须用file.raw
        reader.onload = ()=> { // 让页面中的img标签的src指向读取的路径
          let video = document.createElement('video');
          video.src = reader.result;
          video.currentTime = 3; //截取缩略图时的视频时长,一定要设置,不然大概率白屏
          video.oncanplay = ()=>{
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.setAttribute("width",100);
            canvas.setAttribute("height",100);
            video.setAttribute('width', 100);
            video.setAttribute('height', 100);
            ctx.drawImage(video, 0, 0, video.width, video.height);
            const imgSrc = canvas.toDataURL('image/png');
            resolve({
              duration:parseInt(video.duration % 60),//得到整数的视频时长
              imgSrc,//base64的缩略图图片路径
              width:video.videoWidth,
              height:video.videoHeight,
              videoName:file.name
            })
          }
        };
      })
    },

到了这里,关于js前端获取video视频名称+时长+缩略图+宽高的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js获取音频时长

    上传音频文件时,需要将音频时长一起上传,纯 JavaScript 获取音频时长:使用 HTML5 的 Audio 对象和 duration 属性 来源 来源

    2024年02月03日
    浏览(39)
  • java获取一个视频的时长

    引言 在日常开发中,经常会遇到产品经理提出一个需求“上传视频”,而且还得显示出视频的播放时长,我们直接上最简单的代码,必须是最简单,多一句啰嗦都不准点赞。 How to do 1.提前引入包 2.逻辑实现

    2024年01月24日
    浏览(41)
  • java ffmpeg获取视频时长

    nacos里面配置的ffmpegPath,如果不用这个,也可以自己写一个ffmpegPath的地址 代码

    2024年02月07日
    浏览(45)
  • Python获取音视频时长

    上代码:获取音视频时长.py pyinstaller -F 获取音视频时长.py 链接:https://pan.baidu.com/s/1WvsMyPHD3iFsM844gfC2Jg?pwd=yyds

    2024年02月15日
    浏览(55)
  • FFmpeg框架系列:获取视频时长

    业务需求:对上传的视频显示该时长。 FFmpeg官网:http://ffmpeg.org/ 我在这篇五分钟JAVA代码教会你:FFmpeg实现视频试看(window版本)中写的十分详细,在windows/Linux安装FFmepg,此处我就不过多阐述了。 在window中安装FFmpeg后,在cmd执行获取时长的命令即可: PS:解压在windows本地的ffmpe

    2024年02月09日
    浏览(48)
  • js获取dom元素宽高的方法

    这种⽅法,有⼀定局限性,只能取 内联样式 的宽⾼。 这种⽅法,也是有⼀定局限性,不过我们三种常⽤css样式都能获取。但是 只⽀持 IE ,其它浏览器不⽀持 ⽀持所有浏览器,兼容性好 这种⽅法,⼀般⽤于计算元素的绝对位置,根据视窗左上⻆的点来算的。可以拿到四个元

    2024年02月15日
    浏览(50)
  • 前端JS 展示上传图片缩略图(本地图片读取)

    需求: 点击上传图片按钮,选择图片以后,不请求后端接口,直接将图片展示在缩略图中。 解决方案: 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。 第一步 从 input[type=“file”] (上传文件标签) 里面拿到 file 数据,类似下图 第二步 拿到file数据后,执行下面代码 效果展示

    2024年02月15日
    浏览(51)
  • elementUI实现上传视频时获取视频时长以及设置视频格式、大小限制

    在 before-upload 属性绑定的事件中可以获取上传视频的信息对象,通过给这个信息对象内的属性添加判断条件就可以实现对视频的格式及大小进行限制。对于视频时长,也包含在信息对象中,根据下面代码所示方法提取即可。 想了解如何给上传图片添加限制的小伙伴,可以查看

    2024年02月14日
    浏览(58)
  • java获取视频时长、分辨率、帧率、码率

    1、先导包 2、获取时长

    2024年02月15日
    浏览(58)
  • js和jquery获取屏幕宽高以及加margin和padding等边距的宽高

    Javascript: JQuery div的宽高:

    2024年01月20日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包