诚之和:在前端中怎么使用video poster属性设置视频封面？video视频封面实现方法分享！

最新推荐文章于 2023-02-27 16:50:32 发布
最新推荐文章于 2023-02-27 16:50:32 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45378258/article/details/119883181
版权

我们在平常中在使用不同的视频app的时候打开一个视频，在点击播放之前会看到一张封面图，点击之后封面消失，随即播放视频。那么今天我们就来讲讲有关于：“在前端中怎么使用video poster属性设置视频封面？”这个问题的相关解决方法！

 此时可使用H5 video提供的poster属性即可轻松实现，

poster 属性规定视频下载时显示的图像或用户点击播放按钮前显示的图像。如未设置该属性，则使用视频的第一帧代替

Demo：

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>视频封面</title>

    </head>

    <body>
        <video width="400" height="400" poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574066857005&di=
27dc7334bc80c4336d3443e8ecde3160&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F02%2F06%2Fed0c0ddc6271b0717ca64ffdf847eab6.jpg" controls>
            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/ogg">
        </video>
    </body>

</html>

补充：有时会出现视频封面无法铺满的情况，需要使用object-fit属性铺满整个屏幕

weixin_45378258
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
主要介绍了微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
让视频的poster铺满整个框
最新发布
AAAXiaoApple的博客
08-11 715
让视频的poster铺满整个框
HTML5 video标签的poster图片如何填充整个标签区域
AlexPG12138的博客
02-28 2392
&lt;video id="video_id" controls="controls" src=""poster="images/poster.jpg"style="object-fit:fill"&gt;&lt;/video&gt;
web前端：视频背景（铺满整个网页）
weixin_55439495的博客
03-10 3197
1：效果图： 其中每行相片都是来回滚动，背景为视频 2：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带背景音乐的电子相册</title> <style type="text/css"> body { width:100%; height:100%; .
html5 poster没作用,HTML Video poster用法及代码示例
weixin_34005394的博客
06-10 623
“视频海报”属性用于设置或返回视频的海报属性的值。海报属性专门用于在下载视频时或直到用户按下播放按钮之前显示图像。如果不包括海报选项，则显示视频的第一帧。用法:返回海报属性：videoObject.poster设置海报属性：videoObject.poster = URL属性值URL:用于指定图像文件的URL。以下示例程序旨在说明视频海报属性：例：更改视频的海报图像。DOM Video poste...
uniapp中video层级太高(或者在页面中不跟随页面滚动)解决方案
weixin_46579411的博客
12-19 6095
uniapp中video层级太高(或者在页面中不跟随页面滚动)解决方案
HTML5的多个video标签：截取视频源的封面图poster，监听视频播放状态的功能
01-14
我们是否也会遇到过，有些...那么，此时，我们就得截取每个视频的封面图来，因为video标签有个属性poster是用来储存封面图地址的，但需注意先用本地视频，非本地视频会有跨域截取问题，这个得跟后端开发协作处理。
Js视频播放器插件Video.js使用方法详解
10-15
例如，若要实现自动播放，可以在选项对象中设置`autoplay`属性为`true`： ```javascript videojs("xttblog", { autoplay: true }, function() { // Player (this) is initialized and ready. }); ``` 总的来说，...
vue视频播放插件vue-video-player的具体使用方法
10-16
总的来说，`vue-video-player` 是一个强大且易于使用的 Vue 视频播放插件，它提供了丰富的配置选项和功能，可以帮助开发者轻松地在 Vue 应用中实现视频播放功能。通过灵活运用，可以满足各种视频播放场景的需求。
使用HTML5在网页中嵌入音频和视频播放的基本方法
09-28
在网页中嵌入视频，我们可以使用<video>标签。基础的用法如下： ```html <video src="foo.mp4" width="300" height="200" controls></video> ``` 这里，`src`属性指定了视频文件的URL，`width`和`height`定义了视频...
前端使用视频第一帧做封面
weixin_40597855的博客
02-27 311
H5使用第一帧做封面
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片
zhangzuying的博客
12-07 9869
需求： 1.播放器可以支持上传默认封面图片 2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下 首先需求1.播放器可以支持上传默认封面图片解决方案： 1.第一种方法可以直接在video标签中直接添加poster属性 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png"> you
怎样设置视频封面图，快速给视频置入图片
L50204023的博客
04-27 983
编辑视频时，如何给视频添加封面，让视频更加精致？大家一般都是在上传视频时选择视频里面的某一帧画面来作为视频封面，那么当你有多个视频时，而且要用其它图片作为封面图，如何快速设置呢？下面跟大家分享批量设置视频封面图片的技巧，一起看操作吧。 准备工具： 下载一个媒体梦工厂 多个视频 多张图片 开始操作： 运行“媒体梦工厂”进入“视频封面”界面上，有抽帧/提取封面的功能，还有置入封面的功能，切换到“置入封面”功能上 在此版块上，先将视频导入到左边的视频文件栏中。多个视频一行一个，点“添加视频”可选择视频 在图片
HTML5的多个video标签：截取视频源的封面图poster，监听视频播放状态的功能；
热门推荐
xiexikk的博客
08-02 3万+
在日常项目中，html5的video标签还是比较常用到的，开发过程中，我们都会注意到，通过监听video标签的播放、暂停、停止等等来使用； 但我们是否也会遇到过，有些浏览器在显示这标签，兼容不太友好，video标签的封面是一层黑色的，而不是视频的封面图。 那么，此时，我们就得截取每个视频的封面图来，因为video标签有个属性poster是用来储存封面图地址的，但需注意先用本地视频，非本地视频会...
Blazor组件自做十三: VideoPlayer 视频播放器
alex_zoucn的博客
12-15 1417
Video.js 是一个具有大量功能的流行的视频和音频 JavaScript 库,今天我们试试集成到 Blazor .
css解决video标签 poster封面图大小适配问题
weixin_45003438的博客
10-22 6704
问题描述： 视频尺寸和视频封面图尺寸不相同时，封面图只能展示一部分，没有按照视频的尺寸展示。 例如： 解决方案： 提示：这里填写该问题的具体解决方案： 例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。 @Override public void run() {
vue 截取video第一帧作为封面
m0_60336681的博客
07-07 5148
vue js 截取video第一帧作为封面
关于video封面的问题
ww072511的博客
07-06 436
关于video 在设置封面的时候，如果只是添加poster属性，会让封面不能全部覆盖视频，可以 Video ｛object—fit：fill｝
移动端不使用poster设置视频封面为第一帧
05-31
如果您不想使用poster属性设置视频封面为第一帧，您也可以使用JavaScript来实现。 1. 首先，您需要给video元素添加一个id属性，例如： ```html <video id="my-video" width="320" height="240"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ``` 2. 然后，在JavaScript中获取video元素并监听它的loadedmetadata事件。在这个事件的回调函数中，您可以获取视频的第一帧图片，并将其设置为视频的封面。例如： ```javascript var video = document.getElementById('my-video'); video.addEventListener('loadedmetadata', function() { var canvas = document.createElement('canvas'); canvas.width = this.videoWidth; canvas.height = this.videoHeight; canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height); var dataUri = canvas.toDataURL(); this.setAttribute('poster', dataUri); }); ``` 这段代码中，我们先创建一个canvas元素，将其大小设置为视频的大小，然后调用drawImage方法将视频的第一帧绘制到canvas上。最后，我们将canvas转换为DataURL，并将其设置为video元素的poster属性值，从而实现视频封面为第一帧。 注意，这种方法可能会增加页面加载时间，因为需要等待视频的元数据加载完成后才能获取第一帧图片。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_45378258

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值