＜video＞标签及属性说明_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	从该元素的父元素继承属性。

本文链接：https://blog.csdn.net/millia/article/details/118360723

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

PaddlePaddle：module ‘paddle‘ has no attribute ‘utils‘ & module ‘paddle‘ has no attribute ‘fluid‘问题解决_attributeerror: module 'paddle' has no attribute '-程序员宅基地

文章浏览阅读1k次，点赞5次，收藏8次。记录：使用AutoDL远程服务器算法开发，用到PaddlePaddle时，总是出现paddle有关的属性报错，实质就是paddle没装好，没想到paddle在ubuntu还不如win上好安装。之后可能会提示需要安装paddlepaddle-gpu，pip install paddlepaddle-gpu即可。就会自动安装最新版paddle，最新版其实不用paddle.fluid了，所有也要注意远程服务器的代码有没有更新。解决方案：uninstall所有与paddle有关的东西，执行下句。_attributeerror: module 'paddle' has no attribute 'fluid

Jenkins的HTML Publisher Plugin插件添加与配置（插件的下载、安装、更新、配置）-程序员宅基地

文章浏览阅读3.5k次。1、搜索插件HTML Publisher Plugin，找不到2、在资源库中搜索在这里插入图片描述3、安装相关的文件4、配置HTML Publisher plugin4.1在配置job中，在构建后操作，选择安装的HTML Publisher plugin插件，如下：HTML directory to archive - html报告在项目中的路径，这个路径是相对于工作空间的。..._html publisher plugin

WinCE USB驱动开发_wince usb无线网卡驱动开发-程序员宅基地

文章浏览阅读1.1k次。转自IT168http://tech.it168.com/a2008/1015/207/000000207902.shtml随着USB2.0设备的不断增加，USB设备驱动开发在嵌入式开发中变的越来越重要。Windows CE支持USB 2.0更是对这一波新技术浪潮产生巨大的推动。近期我负责一个这样的项目，在WinCE下开发USB接口的外围设备驱动。当时做这个项目花费了我相当多的时间和精力，_wince usb无线网卡驱动开发

Oracle Cloud Applications：Oracle项目管理提供了一个单一的真实来源_cloud 项目管理-程序员宅基地

文章浏览阅读130次。Oracle项目管理提供了一个单一的真实来源，这意味着它提供了一个集中的平台，用于管理项目的所有相关数据和信息。这个单一的真实来源确保了项目数据的准确性和一致性，从而简化了项目管理流程并提高了决策的准确性。Oracle项目管理提供了一个单一的真实来源，用于按时、按预算管理项目。“我们改进了所有内部工作流程，以提高生产率、降低成本和改进控制，并通过帮助客户将技术作为业务增长的关键推动因素，获得了创造收入的能力。Oracle为以项目为中心的组织带来强大的项目管理和基于项目的ERP凭据。_cloud 项目管理

昌邑机器人_昌邑管道检测机器人有保障999-程序员宅基地

文章浏览阅读106次。昌邑管道检测机器人有保障999水陆全地形管道机器人Ty-G19-02特别强调：***仪器领先同行，同行可能模仿，专利在呢，想模仿吗？公司需要打官司上位，目前公司是一个小公司，在这个行业并不出名！！需要找同行大公司打官司出名，这个行业并不大哦，别丢人丢到家了哦！！！不信可以试试看！！！！***在管道淤泥或污水比较深的情况下，可以无障碍作业检测，相比同行的CCTV机器人,前后左右方便灵活，水陆两栖适..._管道机器人120度专利

每天一个Linux命令目录-程序员宅基地

文章浏览阅读80次。一、文件和目录管理 1、每天一个linux命令(1):pwd命令 2、每天一个linux命令(2):cd命令 3、每天一个linux命令(3):ls命令 4、每天一个linux命令(4):mkdir 5、每天一个linux命令(5):rmdir 6、每天一个linux命令(6):c..._每天一个linux命令目录

随便推点

Android : 按 Back 按钮不返回处于后台的 Activity-程序员宅基地

文章浏览阅读172次。在一个项目中，我有一种情况下启动一个新 Activity 后，按 Back 按钮时不想返回到后台的 Activity。具体方法是，在启动新的 Activity 的时候： Intent intent = new Intent(this, AuthenticationActivity.class); intent.setFlags(Intent..._按一下back键回不到上一个activity

iOS UICollectionView 添加 headerView 分组后滚动到指定的section_uicollectionview 滚动到指定section-程序员宅基地

文章浏览阅读545次。方案 1UICollectionViewLayoutAttributes *attributes = [self.collectionView layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:DJSection]]; CGRect rect = attributes.frame; [self.collectionView setConten_uicollectionview 滚动到指定section

第一章——Java基础（一）——Java初体验_本关任务:编写你的第一个java程序,效果图如下: 编写第一个java程序 1.新建一个hel-程序员宅基地

文章浏览阅读3.1k次，点赞12次，收藏18次。我是小康小白，一个平平无奇的Java，Python小白。热爱有趣的文字，生活和远方。个人博客：https://blog.csdn.net/weixin_45791445有问题欢迎QQ联系：1059320343 （记得备注CSDN）个人微信公众号：小康小白一，Java第一课一，任务描述：本关任务：编写你的第一个Java程序，效果图如下：二，相关知识1. Java程序的编写过程：1. 将Java代码编写到扩展名为.java的文件中；2. 通过javac命令对该java文件进行编译._本关任务:编写你的第一个java程序,效果图如下: 编写第一个java程序 1.新建一个hel