htnl5的video标签

Posted 2020-10-15

video兼容

当前video标签IE 9+、Firefox、Opera、Chrome 和 Safari 都支持

video使用

<video src=“” width="320" height="240" controls poster=“” preload="none" autoplay controls>

　    <source src="movie.mp4" type="video/mp4">

　　 <source src="movie.ogg" type="video/ogg">

　　您的浏览器不支持 video 标签。

</video>

更具不同需求添加属性

1.内部使用标签<source>

source是给媒体多个不同文件地址的选着，以边浏览器的根据自身的不同来选者能播放的（可能视屏文件格式问题，地址问题），只有在video标签中没有使用src时使用

此标签有src，type，media;

src是指定媒体地址;type指定媒体src的格式类型;Media用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介.

2.src属性

用来指定媒体地址的

3.poster属性

用来在src地址链接失败，无法播放时呈现一张图片。poster和img的src差不多就是指定一张图片地址。

4.preload属性

此属性是定义视屏是否预加载，有三个值选着none、metadata、auto。如果不使用此属性，默认为auto。

none:不预加载，

metadata：预加载一部分，

auto：全部预加载

5.autoplay属性

用来设置视屏是否自动播放，可也在video中只加一个autoplay也可以autoplay=“autoplay”

注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，此时属性要么没有值，要么其值恒等于他的名字

6.loop属性

用于指定视屏是否循环播放，也是布尔值。

7.controls属性

用来启用浏览器自身带的播放控件等（如开始，涨停，进度条，音量），也是布尔值。

8.width和height属性

用来设置媒体的宽和高