1-5 video＞＜/video＞标签和＜audio＞＜/audio＞标签详解

目录

1. video标签

2. audio

---

1. video标签

双标签

H5新增的标签，如果是IE，IE9及以上支持，

作用：插入视频流

<video src="./swim.mp4" width="300px" height="300px" controls autoplay loop muted poster="1111.jpg" preload="auto">我们不支持这个视频的格式</video>

属性：

width: 设置视频页面的宽度

height: 设置视频页面的高度

controls: 布尔属性，可以只写一个controls，也可以写controls="controls"；如果不需要就不写。

 autoplay: 布尔属性。视频加载就绪就自动播放。

 loop：布尔属性。视频放完后再次循环播放

 preload：视频如何加载，进行预先处理，处理的好能够提高页面的加载速度和性能。【如果设置了autoplay，会自动忽略这个属性】

        auto:页面加载后马上需要加载视频。

        meta:页面加载后只载入元数据，不需要马上加载，但是需要获取视频的时长、大小等信息。

        none:页面加载后不载入视频的数据，用户确认打开视频时才播放。

备注：参考了文章：HTML5 audio标签使用 preload属性 规定是否在页面加载后载入音频_babybk的博客-CSDN博客_audio 预加载

muted: 视频播放的时候设置静音。

poster: 用户点击播放之前，或者是视频下载时，显示的图像。类比想象img标签，图片路径显示不全时显示的图像。

备注：可以在video标签中间加文字，如果视频存在兼容性问题，就会显示这个文字。

兼容性问题：

---------------------------------------还会二次更新

2. audio

和video的属性基本是一致的。

双标签

H5新增的标签，如果是IE，IE9及以上支持，

作用：插入音频流

<video src="./swim.mp4" controls autoplay loop muted preload="auto">我们不支持这个音频的格式</video>

属性：

这里只提不同点

没有width、height、poster属性。【无法设置宽度和高度，也无需调整音频加载不全时显示的图片】

其它都和video标签一致

兼容性问题：

---------------------------------------还会二次更新

结尾：

学习id： 201903090124-3

现在是大三学生，学习到了前后端交互的express阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。