video标签 不自动播放+ 不预加载视频，但是加载元数据 + 截取视频第一帧作为封面

最新推荐文章于 2024-03-19 17:23:48 发布
最新推荐文章于 2024-03-19 17:23:48 发布
阅读量4.2k 收藏 7
点赞数
分类专栏： HTML 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44173499/article/details/123151022
版权

video标签 不自动播放+ 不预加载视频，但是加载元数据 + 截取视频第一帧作为封面

HTML:

Markup

video 
          :src="record.rescuevideo"
          :poster="record.rescuevideo+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_100,h_100,m_fast'"
          preload="meta"
          width="100px" 
          height="100px" 
          style="object-fit: fill;" 
          controls="controls"></video>

preload属性：

  • auto - 当页面加载后载入整个视频

  • meta - 当页面加载后只载入元数据

  • none - 当页面加载后不载入视频

poster属性：截取视频第一帧作为封面

  • src+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_100,h_100,m_fast '

一个前端女子
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript截取video视频第一帧作为封面方案
hanzhuhuaa的博客
06-17 483
javascript截取video视频的第一帧作为封面,写在前边：因为项目是用vue.js框架实现，所以以下代码是vue.js语法。首先，看一下Dom元素。
vue 截取video第一帧作为封面
m0_60336681的博客
07-07 5249
vue js 截取video第一帧作为封面
video加载二三事
最新发布
u014708123的博客
03-19 574
最近在做即时通信项目，就是类似微信、钉钉那种聊天web项目，加载多个video和audio的时候页面会明显卡顿，经过查询资料后特意梳理一下3个属性；以后可以根据自己的需求使用正确的方法;
原生video的使用坑
star094606的博客
11-23 3532
1 背景 原生video标签的使用 1 预加载 进入主内容有一个加载页。 技术实现 视频预加载使用video标签的preload属性。 将preload属性设置为metadata表示用户不想马上加载视频，但是需要预先获取其元数据（尺寸，轨道列表，时长等）。 请注意，从 Chrome 64 开始， preload 的默认值是 metadata（以前是 auto ）。 <video id="video" preload="metadata" src="file.mp4" controls&
H5中video如何获取第一帧作为封面
qq_45750154的博客
05-11 5096
本篇文章给大家详细介绍一下H5中video获取第一帧作为封面的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 1.引入库 代码如下（示例）： <scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 2.HTML部分 <pclass="upload-titlemg-b10title-all">上传视频（必填）&l...
HTML audio video标签的autoplay自动播放关闭
xingdiango的博客
05-04 2012
国内搜索引擎没有查到对应的资料，或者就是资料有问题，不能实现页面加载后自动播放关闭，页面有很多首歌曲，如果全部自动播放就会乱套，因此查询了mozilla官方开发文档。因此我们更改为官方提示的问题解决。
关于html 中video标签视频不自动播放的问题
热门推荐
码梦为生
12-05 1万+
版权声明：需要转载的话，请先联系我哦！ https://blog.csdn.net/wwt20180911/article/details/83185965 有个需求，客户想做个打开官网自动播放一段视频，楼主使用了video标签，即下面的代码：： 于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop” 然而通过地址栏进去的时候，视频并没有自动播放，...
[html] HTML5的video怎么取消自动播放？
歌谣的博客
04-15 3283
[html] HTML5的video怎么取消自动播放？ 去掉 autoplay 属性 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
上传视频 获取视频第一帧 做为封面 完整代码+注释 前端js
09-20
上传视频时获取视频第一帧作为封面 完整代码+注释 使用方法：直接将html文件在浏览器打开即可。 使用到的技术：原生Dom操作 + video标签及canplay监听 + cavas绘制 + base64转为Blob + Blob转为FormData
ReadVideo_视频播放自动保存帧_
09-30
综上所述，"ReadVideo_视频播放自动保存帧_"这一主题涵盖了视频处理、帧捕获、编程实现等多个知识点，对于开发者来说，理解和掌握这些技术对于进行视频相关的开发工作至关重要。通过学习和实践，可以提升在多媒体...
JS实现预加载视频音频/视频获取截图（返回canvas截图）
10-19
主要介绍了JS实现预加载视频音频/视频获取截图（返回canvas截图）的相关资料,需要的朋友可以参考下
截取视频的第一帧另存为图片
06-10
在IT行业中，有时候我们需要从视频中提取特定的图像作为封面或者预览图，例如截取视频的第一帧并保存为图片。这个任务可以通过编程语言来实现，例如PHP，它提供了多种库和方法来处理这种需求。本文将深入探讨如何...
简单编写html文件加载nginx发布的视频，实现在线播放nginx发布的视频
08-14
您的浏览器不支持video标签。 </video> ``` 在这个HTML文件中，`<video>`元素包含了`controls`属性，显示播放、暂停和音量控制；`width`和`height`属性定义了视频播放器的尺寸。`<source>`标签用于指定视频源，...
video标签获取视频第一帧
choupixiaolin的博客
09-28 2933
video标签获取视频第一帧
视频播放预加载java,防止视频在网站上预加载
weixin_30767257的博客
02-26 268
I have the following code for a video on my website. I have the AutoPlay turned off in order to prevent playback as soon as I open the website. The problem is that the video still loads automatically ...
微信小程序video默认不播放且显示视频第一帧
梁小茹的博客
12-30 2816
小程序video 只设置 controls="{{false}}" 会显示播放按钮 通过设置show-center-play-btn="{{false}}" 就可以把按钮去掉 显示视频封面 <video initial-time='0.01' src="{{item}}" controls="{{false}}" objectFit="cover" show-center-play-btn="{{false}}"> </video> 一点点积
unity 使用AVProVideo插件实现截取第一帧画面 保存到本地并作为按钮的封面
吴梓穆的博客
10-14 3100
需要使用AVProVideo插件，插件地址为： 截取第一帧保存到本地的代码为 /// <summary> /// 获取视频的第一帧，并保存到本地 /// </summary> /// <param name="fileName">封面的名字</param> /// <param name="fileInfo">视频文件</param> /// <returns></ret
Unity笔记之获取视频某一帧的图片
qq_43815828的博客
05-28 2533
需求：获取到视频某一帧的图片（需要保存直接写file存下来即可） 原因：用户不可能上传视频的同时还会给你单独上传视频对应的一张图片，所以只能是我们自己从视频里面去随机抽取一张作为这个视频的缩略图来展示。 #region 获取视频某一帧图片 VideoPlayer video; Texture2D videoTextrue; RenderTexture renderTexture; Sprite sprite; void InitVideoToImage()//Star
<video>标签上传视频，怎么获取上传的视频的第一帧作为视频的封面
06-09
要获取上传的视频的第一帧作为视频的封面，可以使用canvas和video元素，具体过程如下： 1. 创建一个video元素，并将上传的视频文件赋值给video的src属性。 2. 监听video的loadedmetadata事件，当video元素加载完元数据时，获取视频的宽高和时长等信息。 3. 创建一个canvas元素，并将其宽高设置为视频的宽高。 4. 在canvas上绘制视频的第一帧画面。 5. 将canvas转换成图片，作为视频的封面。 示例代码如下： ```html <video id="video" controls></video> <canvas id="canvas"></canvas> ``` ```javascript const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 监听视频加载完元数据事件 video.addEventListener('loadedmetadata', function() { // 获取视频的宽高和时长 const width = video.videoWidth; const height = video.videoHeight; const duration = video.duration; // 设置canvas的宽高为视频的宽高 canvas.width = width; canvas.height = height; // 绘制视频的第一帧画面 ctx.drawImage(video, 0, 0, width, height); // 将canvas转换成图片，作为视频的封面 const cover = canvas.toDataURL(); console.log('视频宽度:', width); console.log('视频高度:', height); console.log('视频时长:', duration); console.log('视频封面:', cover); }); // 将上传的视频文件赋值给video的src属性 video.src = URL.createObjectURL(file); ``` 其中，file为上传的视频文件。注意，此方法只能在视频加载完元数据后才能获取视频的宽高和时长等信息，因此需要在loadedmetadata事件中执行相关操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值