＜video＞标签播放视频，默认仅加载封面，视频懒加载

已于 2022-02-15 14:01:10 修改
阅读量3k 收藏 4
点赞数
分类专栏： 技巧 文章标签： 音视频 html
于 2022-02-15 14:00:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43265926/article/details/122943193
版权

提升页面加载速度，大幅度降低视频框黑屏时间

<video controls preload="none" style="height:190px;width:336px;" poster="封面地址">
	<source src="视频地址" />
</video>
Unique_wy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片视频懒加载.rar
03-23
资源免费，欢迎交流，相互学习（图片或者视频懒加载）采用了jquery.lazyload插件
H5 video 怎么获取第一帧的图片作为封面
Try_your_best_l的博客
04-13 3308
H5 video 怎么获取第一帧的图片作为封面 前言 提示：使用video标签怎么获取视频第一帧作为封面图片 提示：以下是本篇文章正文内容，下面案例可供参考 一、使用步骤 1.引入库 代码如下（示例）： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 2.HTML部分 <div class="upload-title mg-b10 title-al
video标签 不自动播放+ 不预加载视频，但是加载元数据 + 截取视频第一帧作为封面
qq_44173499的博客
03-04 4045
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"
前端提高性能——使用Intersection Observer API对图片视频进行懒加载
最新发布
wzy_PROTEIN的博客
03-15 418
在用户选择一页五十条时，页面加载速度会比较慢。为了提高性能，选择用Intersection Observer API实现图片懒加载。调整webpak配置，在chainWebpack方法中查找到处理 SVG 文件的规则，类似地，可以添加相应的规则来处理其他类型的图片文件
微信小程序使用video组件时的一些坑
热门推荐
yangshuolll的专栏
04-16 3万+
（1）mp4视频用video组件播放会卡顿、绿屏,尤其是在快进、拖动时间条时.在video组件上，试试加个custom-cache=”{{false}}”属性，可以完美解决卡顿、绿屏的现象（2）mp4的转码格式有很多种，video组件仅对mp4的H264这种视频编码格式支持，不会出现绿屏和卡顿的现象。简单判断该视频是否支持video组件，可以将其拖拽到chrome上播放，一般能在chrome上播放...
html5 video添加封面图,【Web前端问题】关于<video>标签控制封面图片的问题
weixin_33173924的博客
06-18 3982
遇到的问题是这样的：微信H5页面，遍历标签做了一个视频列表。初始状态是所有视频都有封 面图片。点击第一个视频进行播放，当播放到一半时退出播放。此时的状态是第一个视频封面为播放退出前的画面，其他视频依旧显示为自己的封面图片。当点击第二个视频进行播放，播放到一半退出播放。此时的状态为第一个视频封面变黑。**想解决的问题：怎么在第二个视频播放退出时，第一个视频的封面依然保持为第二个视频播放前的状态...
H5，移动端，video标签截取视频第一帧，做为poster视频封面，找了很多方法，看了很多，最后发现这个办法真的，绝
weixin_54256416的博客
11-18 4037
在本地的时候，浏览器自动截取了第一帧作为视频的poster封面，但是到移动端，就展示空白，设置了自动播放，但是安卓仍然有bug，展示一个巨大的按钮，现在就给他截取第一帧作为封面，来解决。
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
zhangzuying的博客
12-07 9793
需求： 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下 首先需求1.播放器可以支持上传默认封面图片解决方案： 1.第一种方法可以直接在video标签中直接添加poster属性 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png"> you
video 视频添加“封面”，点击播放
stayreal_OAOA
07-15 1万+
给video添加封面，并可以点击播放： 先给video添加“poster”属性，再添加js。 <video src="" controls="controls" id='videoId' height="" poster="images/video_03.jpg"> ></video> var video=document.getElementById('...
【踩坑】HTML5 Video 标签 poster 属性 无法在苹果Safari浏览器显示视频封面
Jinkerr的博客
06-28 5836
1、问题描述： video标签用poster属性写入视频封面图在chrome系列浏览器可以正常显示，但是在PC端苹果Safari浏览器却无法显示，把poster网络图片链接切换成本地图片也不行。 2、分析原因： 通过查询资料得知，当前所有主流浏览器都支持 poster 属性，所以不是浏览器兼容问题。（注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。） 转换思维，应该是苹果Safari浏览器的默认...
uniapp 中app通过视频链接获取封面
翎墨袅
09-08 4459
uniapp 中app通过视频链接获取封面
html载入video的封面,HTML5 video截取视频封面图片播放代码
weixin_32101177的博客
06-01 1615
使用方法：1、head引入css部分.video-con{ width: 300px; height: 150px; position: relative; margin-bottom: 20px;}.video-con .video{ width: 100%; height: 100%;}.video-con .btn{ width: 64px; height: 64px; background...
网页<video>标签录制工具，录制网页视频为webm格式
03-04
网页检查元素，找到<video>元素，并存储为变量 播放视频，运行代码： await video.record(duration) 在新打开的网页中预览，或下载视频 如果网页只有1个<video>则不用寻找，直接：await record(10) 目前浏览器...
在线播放视频，分批加载
08-05
可以播放在线视频。 后台用分批加载的方式传输视频，前端用video标签播放视频。
Unity 中VIdeoPlayer的视频外部加载- 源码
11-23
Unity 中VIdeoPlayer的视频播放控制。可加载外部视频资源，控制视频播放（播放、暂停、停止）。可切换本地视频。可获取视频播放进度（进度条）、可控制视频播放音量。
html中video标签视频边下边播处理工具
07-25
html 中 video 标签视频边下边播处理工具，包括ffmpeg、qt-faststart、mp4info 等
为了解决在safari浏览器video标签无法播放视频的问题
08-10
为了解决在safari浏览器video标签无法播放视频的问题
vue 播放视频，默认有视频封面
抄经书的程序猿
06-05 1847
前几天做视频管理器，原计划使用vue-video-player 库来播放视频，但是发现这个库播放视频，还需要自己手动截封面【ps: 没有vue-video-player，如果这里有不对的地方，请指正，】
video标签设置封面图、控件的显隐
qq_42580876的博客
11-16 2万+
video标签设置封面图 1、video标签的属性 autoplay： 如果出现该属性，则视频在就绪后马上播放。 controls：如果出现该属性，则向用户显示控件，比如播放按钮。 height：设置视频播放器的高度。 loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。 muted：如果出现该属性，视频的音频输出为静音。 poster： 规定视频正在下载时显示的图像，直到用户点击播放按钮。 preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则
video标签设置视频封面
08-12
视频标签可以通过添加poster属性来设置视频封面。例如，在video标签中加入poster属性，将其值设置为图片链接，即可将该图片作为视频的封面。具体代码如下： ```html <video src="video_url" poster="封面图片链接" controls="{{false}}" initial-time='0.01' muted autoplay object-fit="cover"></video> ``` 其中，video_url是视频的链接地址，封面图片链接是视频封面的图片地址。通过这样设置，视频在加载前会展示封面图片，提高用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [微信小程序：video标签默认显示视频的第一帧作为封面](https://blog.csdn.net/mouday/article/details/118517724)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、...](https://blog.csdn.net/qq_46617584/article/details/129185121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值