关于video标签的基本应用（关于poster属性）

最新推荐文章于 2024-06-12 15:33:32 发布
最新推荐文章于 2024-06-12 15:33:32 发布
阅读量1w 收藏 13
点赞数 12
分类专栏： web前端 css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41641581/article/details/82984177
版权
web前端 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
css3
3 篇文章 0 订阅
订阅专栏
html5
2 篇文章 0 订阅
订阅专栏

基本的就不说啦！

不说啦！

不说啦！

不说啦！

 

重要说说

poster属性

这是用来引用video的封面图片的！！！！！

问题来了》》》

会出现下面这种状况。。。。。。。

 

铺不满，，，，，我的尴尬癌

 

不怕，，加个样式试试！！！

style="object-fit:cover"

其实你还可以改变属性的值，比如说：

style="object-fit:fill"

会拉伸图片，，，，，

 

 

完美！！！

知道你懒，，nou,,,nou,,,,nou,,,,,,代码简单写了下！！！！

<video width="100%" height="100%" controls="controls" poster="封面图地址" style="object-fit:cover">
    <source src="视频地址">
 	你的浏览器不支持HTML5视频。
</video>

 

 

 

 

 

 

 

AS胖丁
关注
  • 12
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
HTML5视频标签 video 的 poster 属性
高先生的猫
08-25 1万+
<video>标签定义视频，比如电影片段或其他视频流，可以放置视频资源，并添加视频控件。 支持的浏览器： Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持<video>标签。 注：Internet Explorer 8 以及更早的版本不支持<video>标签。 简单的html5视频： 视频加载失败时会显示标签内的文字。 <videosrc="movie.ogg"con...
<video>标签的poster属性图片铺满整个屏幕
MichaelAn的博客
02-13 1132
<video>标签的poster属性图片铺满整个屏幕 在用<video>标签的时候发现图片不能平铺整个屏幕，后来查了一下需要用到object-fit属性 从MDN上查到的属性内容如下： object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 MDN上...
HTML5 ＜video＞常用属性、时间、方法及基础使用说明
最新发布
m0_67793437的博客
06-12 1157
标签也可用于播放音频，但播放音频用更加适合。MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件基础写法
ios中关于video标签poster属性兼容问题（ios视频截帧）
qq_43886365的博客
07-14 3338
ios中关于video标签poster属性兼容问题（ios视频截帧） 要想在video标签中显示首帧画面, 需要添加poster属性, 属性值应该是图片的url；或者直接使用img标签替代video的位置，当点击播放的时候再弹层展示需要播放的视频；
HTML5的多个video标签：截取视频源的封面图poster，监听视频播放状态的功能；
热门推荐
xiexikk的博客
08-02 3万+
在日常项目中，html5的video标签还是比较常用到的，开发过程中，我们都会注意到，通过监听video标签的播放、暂停、停止等等来使用； 但我们是否也会遇到过，有些浏览器在显示这标签，兼容不太友好，video标签的封面是一层黑色的，而不是视频的封面图。 那么，此时，我们就得截取每个视频的封面图来，因为video标签有个属性poster是用来储存封面图地址的，但需注意先用本地视频，非本地视频会...
css解决video标签 poster封面图大小适配问题
weixin_45003438的博客
10-22 6834
问题描述： 视频尺寸和视频封面图尺寸不相同时，封面图只能展示一部分，没有按照视频的尺寸展示。 例如： 解决方案： 提示：这里填写该问题的具体解决方案： 例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。 @Override public void run() {
HTML5 video标签（播放器）学习笔记（一）:使用入门
09-28
这篇学习笔记主要介绍了`<video>`标签的基本使用，包括如何初始化视频播放器，设置视频源，控制播放行为以及美化播放器界面。 首先，使用`<video>`标签非常简单，只需要在HTML文档中插入一个空的`<video>`标签即可...
HTML5 video标签（播放器）学习笔记（二）:播放控制
11-21
在本文中，我们将深入探讨如何使用JavaScript来操控`<video>`标签，实现播放器的基本功能，包括播放、暂停、获取和设置播放时间、以及调整音量。 首先，为了方便操作`<video>`标签，我们需要给它添加一个唯一的ID。...
网页上播放视频-video标签的使用.rar
05-04
这个压缩包文件 "网页上播放视频-video标签的使用.rar" 很显然包含了一个关于如何使用 `<video>` 标签来在网页上播放视频的教学资源。 `<video>` 标签的基本语法非常简单。下面是一个基础的示例： ```html <video ...
HTML5 video 标签浏览器兼容问题
05-01
通过分析这些文件，开发者可以学习如何在实际应用中解决`<video>`标签的兼容性问题。 总的来说，处理HTML5`<video>`标签的浏览器兼容性问题需要对各种视频编码格式、MIME类型以及浏览器特性有深入的理解。同时，...
一个移动端H5Video标签播放视频的实现
08-11
您的浏览器不支持video标签。 </video> ``` - `src`属性：指定视频文件的URL。 - `controls`属性：显示默认的控制条，包括播放/暂停按钮、进度条等。 - `poster`属性：设置视频加载前显示的预览图片。 二、移动端...
uniapp video视频组件poster视频封面不显示问题
m0_52459016的博客
12-22 5262
关于poster视频封面不显示问题： 1、controls属性必须为true（默认）； 2、poster路径必须是网络资源地址，即https； 3、视频加载完才行（这个官方没说，所以问题就出在这里）； 解决办法就是加个判断，当poster的值加载完成不为空时显示video组件，解决代码如下： <!-- 视频区域 --> <view class="video-item"> <video id="myVideo" v-if="video.thumb" :poster="vi
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('...
使用jQuery和CSS自定义HTML5 Video 控件 简单适用
weixin_30564785的博客
03-01 331
　　Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制. 　　实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用! 　　DEMODOWNLO...
jQuery插件实现视频弹出层播放+video标签对视频编码格式的要求
qq_40927742的博客
09-04 1212
前言：套用了之前的点击图片弹出层放大查看的代码。 缺陷：不能像之前的图片那样，获取被点击图片的src然后设置到弹出层中。复用性不高。，只能一段代码针对一个视频。如果像图片一样获取设置src，虽然实际已经获取到该src且在弹出层的div里播放了，但是问题出在点击视频后弹出层不会出现。 <!-- 关于视频点击查看--> <script> $(function(){ ...
诚之和:在前端中怎么使用video poster属性设置视频封面？video视频封面实现方法分享！
weixin_45378258的博客
08-24 1309
我们在平常中在使用不同的视频app的时候打开一个视频，在点击播放之前会看到一张封面图，点击之后封面消失，随即播放视频。那么今天我们就来讲讲有关于：“在前端中怎么使用videoposter属性设置视频封面？”这个问题的相关解决方法！ 此时可使用H5 video提供的poster属性即可轻松实现， poster 属性规定视频下载时显示的图像或用户点击播放按钮前显示的图像。如未设置该属性，则使用视频的第一帧代替 Demo： <!DOCTYPE HTML> <html> ..
HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小
細水、長流√的专栏
09-28 3万+
标签的属性 src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 html 代码 video id="media" src="http://www.sundxs.com/test.mp4" controls width="40
jquery控制下的video视频播放
m_togethershare的博客
10-10 7579
解决你的视频样式改变问题
html中poster属性,HTML poster属性用法及代码示例
weixin_35886269的博客
06-10 1032
HTML海报属性用于在下载视频或用户单击播放按钮时显示图像。如果未设置此图像，则它将视频的第一帧作为海报图像。适用的：它主要用于元素。用法:属性值：它包含一个指定源图像链接的单个值URL。以下列出了两种类型的URL链接：Absolute URL:它指向另一个网页。Relative URL:它指向同一网页的其他文件。例：HTML video poster AttributeGeeksforGeeks...
video 标签属性
10-13
video 标签常用的属性包括：src、controls、autoplay、loop、muted、poster、width、height 等。 其中，src 属性指定视频文件的 URL，controls 属性用于显示视频控制条，autoplay 属性用于自动播放视频，loop 属性用于循环播放视频，muted 属性用于静音播放视频，poster 属性用于指定视频封面图像，width 和 height 属性用于设置视频播放器的宽度和高度。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值