web基础·多媒体视频标签：video及相关属性

基础·多媒体标签·video

（H5的新标签）

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

<video src="movie.ogg" >
<!--src是引入的视频地址-->
      您的浏览器不支持 video 标签。
</video>

属性·autoplay

设置自动播放
autoplay=“autoplay”

<video scr="movie.mp4" autoplay="autoplay"></video>
<!--如果存在autoplay='autoplay'那么在视频就绪后会立刻播放-->

属性·controls

设置显示视频播放控件
controls=“controls”

<video scr="movie.mp4" controls="controls"></video>
<!--如果存在controls="controls"那么在视频上显示一些播放控件-->

属性·loop

设置循环播放
loop=“loop”

<video scr="movie.mp4" loop="loop"></video>
<!--如果存在loop="loop"那么视频将会循环播放-->

属性·muted

设置循环播放
muted=“muted”

<video scr="movie.mp4" muted="muted"></video>
<!--如果存在muted="muted"那么视频会静音-->

在谷歌浏览器中，我们视频的自动播放会被禁用，解决办法：
添加静音属性：muted=“muted”，可以解决谷歌浏览器中禁用视频自动播放的问题

属性·height/width

设置视频窗口的高度/宽度

<video scr="movie.mp4" width="320" height="240" ></video>
<!--视频播放窗口为宽320px,高240px-->

规定视频的高度和宽度是一个好习惯。如果设置这些属性，在页面加载时会为视频预留出空间。如果没有设置这些属性，那么浏览器就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间。
结果是，在页面加载的过程中，其布局也会产生变化。

属性·poster

设置视频在播放前或者用户下载后的视频封面图

<video scr="movie.mp4" poster="/images/xx.gif" ></video>