video标签

定义和用法:

<video> 标签HTML 5 的新标签,定义视频，比如电影片段或其他视频流

常用属性:

属性	值	说明
id	任意	规定元素的唯一 id
src	URL	要播放的视频的 URL
preload	auto/meta/none	规定在页面加载时是否预加载视频,如果使用 “autoplay”,则忽略该属性
controls		如果出现该属性，则向用户显示控件，比如播放按钮
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
autoplay		如果出现该属性，则视频在就绪后马上播放
loop		如果出现该属性，则当媒介文件完成播放后再次开始播放

在x5内核浏览器中的注意点

X5 内核是腾讯公司出品的安卓浏览器内核，腾讯旗下 QQ，微信，QQ 浏览器都是该内核，具有强大的 H5 兼容性和视频兼容性，开启 X5 可以有效的增加 APP 的流畅度。

微信浏览器中的video几个特殊属性的作用:

x-webkit-airplay=“allow” : 支持ios的AirPlay功能x5-video-player-fullscreen=“true”: 全屏设置，设置为 true 是防止横屏x5-video-orientation=“portraint”: 播放方向，landscape横屏，portraint竖屏，默认值为竖屏x5-playsinline=“true”: 在x5内核浏览器的播放器中小屏播放webkit-playsinline=“true”: 在iOS中可以让视频在小窗内播放，也就是不全屏播放playsinline=“true”: iOS微信浏览器中支持小窗内播放 实例:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
video>

<video> 元素提供了 播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式