HTML插入音频和视频：audio和video标签及其属性

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、上传到第三方网站，然后引入例如视频上传到优酷网，然后得到代码

二、audio 标签定义声音，比如音乐或其他音频流。

1.audio支持三种音频格式ogg、mp3、wav，为了兼容性考虑，一般会引入其中的两种格式

2.属性：

autoplay 如果出现该属性，则音频在就绪后马上播放。（注：可以autoplay=“autoplay”这种写法，也可以直接写autoplay）

controls 如果出现该属性，则向用户显示控件，比如播放按钮。（注：可以controls=“controls”这种写法，也可以直接写controls）

loop 如果出现该属性，则每当音频结束时重新开始播放。（注：可以loop=“loop”这种写法，也可以直接写loop）

preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。（load、auto、meta、none）

src 要播放的音频的 URL。（可以和列子一样的写法，引入source单标签）

3.下面是在Firefox浏览器的显示风格，其他浏览器显示风格不一样，可以通过css统一格式

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

三、<video> 标签定义视频，比如电影片段或其他视频流。

1.video支持三种音频格式ogg、mp4、webm，为了兼容性考虑，一般会引入其中的两种格式

2.属性：

autoplay 如果出现该属性，则视频在就绪后马上播放。（注：可以autoplay=“autoplay”这种写法，也可以直接写autoplay）

controls 如果出现该属性，则向用户显示控件，比如播放按钮。（注：可以controls=“controls”这种写法，也可以直接写controls）

loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。（注：可以loop=“loop”这种写法，也可以直接写loop）

preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。（load、auto、meta、none）

src要播放的视频的 URL。（可以和列子一样的写法，引入source单标签）

width和height 设置视频播放器的宽度和高度。

3.下面是在Firefox浏览器的显示风格，其他浏览器显示风格不一样，可以通过css统一格式

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