H5 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属性铺满整个屏幕
H5 video poster属性—设置视频封面的更多相关文章
- 解决微信小程序Video 某些属性设置不起作用问题
<video controls="{{false}}" autoplay="{{true}}"></video> 设置属性务必要使用{{ ...
- 【转】视频H5 video最佳实践
原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...
- H5 video标签的属性
35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...
- 视频H5のVideo标签在微信里的坑和技巧
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...
- video设置视频的宽高
一般情况下<video loop="loop" style="width: 100%;height:300px;" controls="cont ...
- video设置视频的播放位置(本例中实现效果是视频第一次播放完成后,接下来中从视频的中间部位开始循环播放)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- H5 video自定义视频控件
1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- H5 video标签视频加载存在的问题
客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...
- 视频(video)属性
Figure 3视频相关的属性: 属性 值 描述 muted muted 定义音频的初始状态,目前仅支持muted. crossorigin 空 定义当前视频是否是一个跨域的项目. me ...
随机推荐
- Spring Data JPA 条件查询的关键字
Spring Data JPA 为此提供了一些表达条件查询的关键字,大致如下: And --- 等价于 SQL 中的 and 关键字,比如 findByUsernameAndPassword(Stri ...
- 浅析vue混入(mixin)
vue中的混入,可以在一定程度上提高代码的复用性.通俗来说,混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”.但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同 ...
- 基于springboot的web项目最佳实践
springboot 可以说是现在做javaweb开发最火的技术,我在基于springboot搭建项目的过程中,踩过不少坑,发现整合框架时并非仅仅引入starter 那么简单. 要做到简单,易用,扩展 ...
- HOOK的类型
- Python开发GUI工具介绍,实战:将图片转化为素描画!【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 在华为云ECS上手工通过Docker部署tomcat
本文介绍了如何在华为云上ECS上手工通过Docker部署tomcat,并提供了Docker常用操作 一.环境准备 ECS:操作系统版本: CentOS Linux release 7.6.181 ...
- luogu P1768 天路 |01分数规划+负环
题目描述 言归正传,小X的梦中,他在西藏开了一家大型旅游公司,现在,他要为西藏的各个景点设计一组铁路线.但是,小X发现,来旅游的游客都很挑剔,他们乘火车在各个景点间游览,景点的趣味当然是不用说啦,关键 ...
- Jenkins编译过程中出现ERROR_ Failed to parse POMs错误
一.在使用jenkins编写过程中突然出现以下问题 Parsing POMs Established TCP socket on 59407 [java] $ java -cp /var/lib/je ...
- JS内置对象-Array之常用API
- CSS预处理器之less和sass
CSS预处理器 1. 基于CSS的另一种语言 2. 通过工具编译成CSS 3. 添加了很多CSS不具备的特性 4. 能提升CSS文件的组织方式 ...