video中视频初始化显示第1帧

这篇具有很好参考价值的文章主要介绍了video中视频初始化显示第1帧。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1个视频url放入video组件中,页面初始化的时候是黑的
解决办法:

html

<video :src="item.video" class="images-item" controls :id="handleVideoId(index)" />
<canvas id="mycanvas" style="display: none"></canvas>

js文章来源地址https://www.toymoban.com/news/detail-521379.html

  mounted() {
    this.findvideocover(url);
  },
 methods: {
    handleVideoId(index) {
      return `video${index}`
    },
    findvideocover(url) {
      url.forEach((item, index) => {
        const video = document.getElementById(`video${index}`);
        video.src = item;
        var canvas = document.getElementById("mycanvas");
        const ctx = canvas.getContext("2d");
        video.crossOrigin = "anonymous";
        video.currentTime = 0.5;
        video.oncanplay = () => {
          canvas.width = video.clientWidth;
          canvas.height = video.clientHeight;
          ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
        };
      });
    },
  },

到了这里,关于video中视频初始化显示第1帧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • node.js项目express的初始化

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 在D盘新建一个文件夹,文件夹命名为api 将文件夹拖拽到vscode上面进行打开 新建一个终端 输入 npm init -y,初始化包管理工具 输入npm i express,安装express框架

    2024年01月18日
    浏览(55)
  • 初始化引导程序 & 使用BIOS中断显示字符、读取磁盘

     BIOS会将磁盘的第0个扇区(大小为512字节),加载到0x7c00处。 引导程序负责操作系统的加载,主要用于为操作系统运行提供初始化环境,并运行加载操作系统。 BIOS只加载磁盘的第0个扇区(512字节)到内存中,次程序无法做很多事情。 因此,我们可以采取以下两种方式种的任意一

    2023年04月15日
    浏览(59)
  • 没有显示器连接,新硬盘录像机如何初始化配置联网使用

    大华监控主机DH-NVR1104HC-P-HDS4 大华摄像头DH-IPC-HD-W1230C-A 2T-WD硬盘 hp笔记本 没有显示器连接,新硬盘录像机如何初始化配置联网使用 1.安装好硬盘后,网线连接监控录像机WAN口,另外一头接笔记本,将笔记本网卡IP设置为192.168.1.2/24 2.电脑浏览器访问192.168.1.108录像机默认管理地

    2024年02月11日
    浏览(177)
  • element-ui el-scrollbar滚动条初始化不显示

    当使用el-scrollbar的时候,比如你的数据列表是后端获取的,这时候,初始化的时候,因为数据还没有获取到,导致里面的内容没有撑开,所以滚动条是不显示的,但是可以正常滚动。 解决方法: 获取左侧菜单的数据时, div style=\\\" height: calc(100vh - 120px);over-flow:hidden\\\"     el-sc

    2024年02月09日
    浏览(50)
  • Vue项目中app.js过大,导致web初始化加载过慢问题

    1、删除多余不需要的库: npm uninstall xxx 如例如moment库文件是很大的可以直接放到index.html文件直接CDN引入 2、修改/config/index.js配置文件:将productionGzip设置为false ​ 3、设置vue-router懒加载 懒加载配置: ​ 非懒加载配置: ​ 4、在webpack.prod.conf.js文件中修改配置: ​ 5、在in

    2024年02月11日
    浏览(42)
  • vue3+js+viter+element UI+Axios项目初始化基本流程

    1 创建vue3项目 2 创建git代码管理仓库 2.1 创建本地管理仓库 2.2 创建远程仓库 3 初始化项目设置 3.1 安装项目所需要的依赖 3.2 完成别名联想设置 3.2.1 什么叫别名联想呢?(如果了解的话可以跳过这个标题) 3.2.2 设置别名联想 3.2.2.1 打开jsconfig.json文件 3.2.2.2 打开vite.config.js文件

    2024年03月27日
    浏览(65)
  • 安装hive中初始化元数据库失败,显示Failed to get schema version

    我在搭建数据仓库的时候,安装hive包初始化元数据库失败。在网上找了几种方法都没解决成功,然后我又重新看了一下问题,问题当中还显示了:无法使用MySQL以‘root‘@‘localhost‘。 原因分析: 1、权限问题:mysql版本的驱动包不对应,一般 linux系统下的jar为后缀 2、密码问

    2024年02月05日
    浏览(44)
  • ChatGPT:概述Vue.js中data函数初始化和created钩子函数调用的顺序和问题解决方法

    我将输入一段Vue代码,请你记住: ChatGPT: 你提供的代码是一个Vue.js组件中的 data 和 created 部分。这部分代码包含了组件的数据和生命周期钩子函数。 在 data 中,你定义了一些数据属性,包括查询信息、分页信息、总记录数、表格数据以及一些表单相关的数据和控制属性。

    2024年02月09日
    浏览(49)
  • Pytorch权重初始化/参数初始化

    refer: 【Pytorch】各网络层的默认初始化方法 https://blog.csdn.net/guofei_fly/article/details/105109883 其实Pytorch初始化方法就在各自的层的 def reset_parameters(self) - None: 方法中。 有人可能会问 为什么这个方法和Pytorch直接出来的权重初始值不一样 ?单步调试会发现其实这个方法运行了至少两

    2024年02月11日
    浏览(62)
  • Linux内存初始化-启动阶段的内存初始化

    本文代码基于ARM64平台, Linux kernel 5.15 在加载kernel 之前, kernel对于系统是有一定要求的,明确规定了boot阶段必须要把MMU关闭: 那么在进入kernel之后, 就必须有一个使能MMU, 建立映射的过程, 本文描述kernel启动阶段进行内存初始化相关的操作。 在初始化阶段,我们mapping二段

    2024年02月08日
    浏览(76)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包