<video>标签及属性说明_video标签-程序员宅基地

技术标签: css  html5  Millia's work  html  

实例

HTML <video> 标签

一段简单的 HTML5 视频:

<video src="video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>

属性

描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

引用

<video
  id="video" 
  src="video.mp4" /*视频地址*/
  controls = "true" /*是否显示播放控件*/
  poster="images.jpg" /*视频封面*/
  preload="auto" /*预加载*/
  webkit-playsinline="true" /*IOS中让视频在小窗内播放而不是全屏播放*/  
  playsinline="true" /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" /*是否支持ios的AirPlay功能*/
  x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*设置为true防止横屏*/
  x5-video-orientation="portraint" /*播放器的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
  style="object-fit:fill">
</video>

说明

src:视频的地址

controls:允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

poster:视频封面,果未设置该属性,则使用视频的第一帧来代替。

preload:在页面加载后载入视频。

webkit-playsinline和playsinline:视频播放时局域播放,不脱离文档流 

x-webkit-airplay="allow": 是否支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐和图片文件

x5-video-player-type:启用同层H5播放器(沉浸式播放)WeChat安卓版特有的属性。播放时全屏,但是除去了control和微信的导航栏,只留下"X"和"<"两键。

x5-video-orientation:声明播放器支持的方向,可选值landscape横屏, portraint竖屏。默认值portraint。这个属性需要x5-video-player-type开启H5模式

x5­-video­-player­-fullscreen:全屏设置。属性值:ture和false

附加:object-fit 、object-position

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

object-position 属性一般与 object-fit一起使用,用来设置元素的位置。

object-fit: fill|contain|cover|scale-down|none|initial|inherit;
描述
fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
initial 设置为默认值
inherit 从该元素的父元素继承属性。 
object-position: position|initial|inherit;
描述
position 指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值,第二个值为 y 坐标位置的值。表示的方式有:
object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
initial 设置为默认值
inherit 从该元素的父元素继承属性。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/millia/article/details/118360723

智能推荐

基于SSH框架的电影订票系统网站的设计与实现-程序员宅基地

文章浏览阅读3.9k次。源码及论文:源码及论文下载:http://www.byamd.xyz/tag/java/开发计划1. 甘特图2. 开发计划简述如图所示在项目初期阶段,首先开始需求调研。需求调研阶段,我们将首先根据初期的会议内容考虑市场需求以及基本的市场现状,并根据以上的内容设计问卷来寻找痛点。我们准备使用第三方问卷工具,以电子问卷的方式来进行调查。初步预计会收到200份问卷。在需求调查阶段,同时开展对同类型的网站的评估工作。进入初步的需求分析阶段。目标是取得现有电影购票网站的基本购票流程,并对其交互等

异常的捕获和处理-程序员宅基地

文章浏览阅读3k次。异常的处理

ASP.NET Core微服务实战系列-程序员宅基地

文章浏览阅读510次。ASP.NET Core微服务实战系列 原文:ASP.NET Core微服务实战系列  希望给你3-5分钟的碎片化学习,可能是坐地铁、等公交,积少成多,水滴石穿,码字辛苦,如果你吃了蛋觉得味道不错,希望点个赞,谢谢关注。前言  这里记录的是个人奋斗和成长的地方,该篇只是一个系列目录和构想,并没有完全真正开弓。之所以有这个题目,是..._微服务 asp.net core

Hyperion高光谱数据预处理_pie软件 hyperion数据-程序员宅基地

文章浏览阅读1.6w次,点赞20次,收藏87次。Hyperion高光谱数据——影像获取+预处理最近在用Hyperion做植被分类,利用高光谱的优势,应该能得到比Landsat精度更高的结果。按照以下几项对数据准备工作总结:Hyperion数据的免费下载影像预处理的必要性利用ENVI补丁Workshop进行处理——对出现的bug进行修改最小噪声变换(MNF)改进锯齿现象Firstly–Download the Image主要在美国地质勘探_pie软件 hyperion数据

vs2010 语法错误: 缺少“;”(在标识符“PVOID64”的前面)-程序员宅基地

文章浏览阅读1.6k次。网上有很多答案,看了让人不知道在说什么,一个行之有效的解决方案是在“stdafx.h”中添加#define POINTER_64 __ptr64。已验证有效。缺点是每生成一个新项目,都要添加一次。_vs2010 语法错误: 缺少“;”(在标识符“pvoid64”的前面)

leetcode sql题目_leedcode sql-程序员宅基地

文章浏览阅读392次。1 # Write your MySQL query statement belowselect max(salary) as SecondHighestSalary from Employee where salary not in (select max(salary) from Employee )Write a SQL query to get the second hig_leedcode sql

随便推点

VS2022无法启动程序(系统找不到制定的文件)问题_vs2022无法启动程序找不到指定文件-程序员宅基地

文章浏览阅读3.1w次,点赞47次,收藏108次。如何解决VS2022无法启动程序(系统找不到制定的文件)的问题。_vs2022无法启动程序找不到指定文件

Chapter4 The Relational Model_order pairs and cartesian product-程序员宅基地

文章浏览阅读756次。Chapter4 The Relational Model4.2TerminologyAn relational model is based on the mathematical concept of a relation,whichis phycisally represented as a table.4.2.1Relational Data Structurewe d_order pairs and cartesian product

java检查手机号是否被注册_【java】如何开发一个检测手机号注册过哪些网站的应用?...-程序员宅基地

文章浏览阅读707次。问题描述使用python或其它语言开发一个检测手机号注册过哪些网站的应用问题出现的环境背景及自己尝试过哪些方法在登陆一个很久没使用的网站时,原注册的手机号已弃用无法找回密码。所以希望有这么一款应用,能够在我输入手机号时列出注册过的网站,方便更换注册账号用的手机号目前的思路是,使用爬虫爬到网站中忘记密码的页面,然后输入手机号。这么做有几个问题:爬取忘记密码页面的通用规则该用什么思路去写关于验证码,我..._java 导入验证手机号是否注册某个网站

Android 插件化-程序员宅基地

文章浏览阅读3.3k次。1.插件化插件可以理解为免安装的Apk,而支持插件的app称为宿主。在Android系统中,应用是以Apk的形式存在的,应用都需要安装才能使用。实际上Android系统安装应用的方式相当简单,就是把应用Apk拷贝到系统不同的目录下,然后把so解压出来而已。常见的应用安装目录有:/system/app:系统应用/system/priv-app:系统应用/data/app:用户应用一个Apk会包含如下几个部分:classes.dex:Java代码字节码res:资源文件._android 插件化

最新阿里内推 Java 后端面试题_索引会不会使插入、删除作效率变低,怎么解决?-程序员宅基地

文章浏览阅读80次。【这里想说,因为自己也走了很多弯路过来的,所以才下定决心整理,收集过程虽不易,但想到能帮助到一部分想成为Java架构师或者是想职业提升P6-P7-P8的人,心里也是甜的!有需要的伙伴请点㊦方】↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓。数据库隔离级别,每层级别分别用什么方法实现,三级封锁协议,共享锁排它锁,mvcc 多版本并发控制协议,间隙锁。数据库表怎么设计的?_索引会不会使插入、删除作效率变低,怎么解决?

Redis实现延迟队列方法介绍-程序员宅基地

文章浏览阅读3.3k次。其中,延迟队列是 Redis 的一个重要应用场景,它被广泛应用于异步任务的调度、消息队列的实现以及秒杀、抢购等高并发场景的处理。在实现延迟队列时,我们可以使用 Redis 的有序集合来保存待执行的任务,其中元素的分值表示任务的执行时间,元素的值表示任务的内容。使用 ZADD 命令将任务添加到有序集合中,将任务的执行时间作为元素的分值,将任务的内容作为元素的值。使用 ZADD 命令将任务添加到有序集合中,将任务的执行时间作为元素的分值,将任务的内容作为元素的值。一、Redis 有序集合实现延迟队列。