canvas获取视频封面及个别电脑获取到空图

这篇具有很好参考价值的文章主要介绍了canvas获取视频封面及个别电脑获取到空图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

PS:获取封面前提是浏览器要支持视频编码格式,不支持就不能通过该方式获取
读取视频封面:

        let video = document.createElement("video");
        video.src = videosrc;
        video.currentTime= 10 // 可能出现黑屏,从10帧
        video.muted = true; // 解决个别电脑获取到空图
        video.autoplay = true; // 解决个别电脑获取到空图
        video.preload = true; // 解决个别电脑获取到空图
        video.addEventListener('loadeddata', async () => {
          video.pause();
          var canvas = document.createElement('canvas')
          canvas.width = video.videoWidth
          canvas.height = video.videoHeight
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
          const cover = canvas.toDataURL('image/png')
           console.log('图片base64是:',cover)
          video.remove();
    }}

base64转file:

const convertFile = base64 => {
  let fileArray = base64.split(','),
    fileType = fileArray[0].match(/:(.*?);/)[1],
    bstr = atob(fileArray[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], '文件名', { type: fileType })
}

下载:文章来源地址https://www.toymoban.com/news/detail-582954.html

const buttonClick = (base64) => {
  let file = convertFile(base64)
  const node = document.createElement('a')
  node.href = URL.createObjectURL(file)
  node.download = file.name
  node.click()
  URL.revokeObjectURL(node.href)
  document.body.appendChild(node)
  document.body.removeChild(node)
}

到了这里,关于canvas获取视频封面及个别电脑获取到空图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • JavaScrip获取视频第一帧作为封面图

    在JavaScript中,你可以使用HTML5的video元素来加载视频,然后使用Canvas来捕获视频的第一帧作为封面图。以下是一个简单的例子: 请注意,这个例子中使用了loadeddata事件,该事件在视频的第一帧加载完成后触发。这里创建了一个Canvas元素,通过drawImage方法将视频的第一帧绘制在

    2024年01月16日
    浏览(35)
  • JS 怎么获取视频第一帧作为封面图?

    要获取视频的第一帧作为封面图,你可以使用HTML5的 video 元素和 JavaScript 来实现。下面是一个简单的步骤: 在HTML中,创建一个 video 元素,并设置视频的路径或URL: 在JavaScript中,获取 video 元素的引用,并监听它的 loadedmetadata 事件(视频元数据加载完成时触发): 继续在JavaS

    2024年04月10日
    浏览(39)
  • 视频格式网络地址转换视频到本地,获取封面、时长,其他格式转换成mp4

    使用ffmpeg软件转换网络视频,先从官网下载对应操作系统环境的包 注意:网络地址需要是视频格式结尾,例如.mp4,.flv 等 官网地址:Download FFmpeg      window包: linux包: 如果下载缓慢,下载迅雷安装使用下载。 解压缩后对应截图: window: linux: 在maven项目的pom.xml引入依赖包

    2024年02月03日
    浏览(50)
  • flutter开发实战-实现获取视频的缩略图封面video_thumbnail

    flutter开发实战-实现获取视频的缩略图封面video_thumbnail 在很多时候,我们查看视频的时候,视频没有播放时候,会显示一张封面,可能封面没有配置图片,这时候就需要通过获取视频的缩略图来显示封面了。这里使用了video_thumbnail来实现获取视频的缩略图。 在工程的pubspec.

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

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

    2024年02月15日
    浏览(52)
  • canvas+fabric实现自定义封面

    2024年01月21日
    浏览(30)
  • FFmpeg基础:获取音视频的各种编码参数

    获取视频编码参数 视频编码参数主要包括:帧率、分辨率、编码格式、码率等,对应的概念如下。 帧率(Frame Rate) 每秒显示帧数(Frames Per Second)。电影的帧率一般是25fps和29.97fps,3D游戏要保持流畅则需要30fps以上的效果。 分辨率 指视频宽高的像素数值。标准1080P的分辨率为1920×

    2024年02月03日
    浏览(48)
  • 抖音视频删了怎么在电脑上找回来

    【 昨天整理电脑文件时,不小心将剪辑好的抖音作品误删了,但是回收站中找不回来了,这些视频是我花了很多心血制作的,如果没了真的十分可惜!希望大家能帮帮我,告诉我应该如何恢复这些文件。 】 现在人们都喜欢拍摄各种短视频,并将自己拍摄的视频剪辑之后,再

    2024年02月10日
    浏览(49)
  • MediaBox助力企业一站式获取音视频能力

    以一只音视频百宝箱,应对「千行千面」。 洪炳峰、楚佩斯| 作者 大家好,今天我分享的主题是MediaBox——行业音视频数字化再加速。 根据权威数据表明,65%的行业数字化信息来自视频,基于此,音视频技术对于行业数字化来说是至关重要的。今天我想借此机会向大家介绍

    2024年02月09日
    浏览(54)
  • Qt/C++音视频开发60-坐标拾取/按下鼠标获取矩形区域/转换到视频源真实坐标

    通过在通道画面上拾取鼠标按下的坐标,然后鼠标移动,直到松开,根据松开的坐标和按下的坐标,绘制一个矩形区域,作为热点或者需要电子放大的区域,拿到这个坐标区域,用途非常多,可以直接将区域中的画面放大,也可以将该圈起来的区域位置发给设备,由设备设定

    2024年02月03日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包