video 标签及属性说明

基本用法

<video src="video.mp4" 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>

附加：

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	从该元素的父元素继承属性。