提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
音视频的发展史
早期:
<embed>+<object>+文件
问题:并没有在各大浏览器中统一规范,兼容性很差。
中期:
Realplay、window media、Quick Time 、Flash
问题:每个厂商每个标准,网站编码和格式也都不相同,flash的出现解决了面的问题,但是apple在07年决定任何设备将不再支持flash。而安卓也在4.0版本之后不再支持Flash,因为Flash很占内存。
现在:
HTML5新增了video标签(视频)和audio标签(音频),并兼容各大浏览器。
一、视频标签
定义
<video> 标签定义视频,比如电影片段或其他视频流。
目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
poster | URL(绝对/相对) | 规定视频正在下载时显示的图像,直到用户点击播放按钮。(类似海报) |
preload | auto、metadata、none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | URL() | 要播放的视频的 URL。 |
width | pixels(像素) | 设置视频播放器的宽度。 |
height | pixels(像素) | 设置视频播放器的高度。 |
写法
多个格式文件时,浏览器根据条件进行选择。
<video width="320" height="240" controls autoplay loop muted
poster="/images/xxx.gif" preload="auto|metadata|none">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
如果只有一个格式文件,可以这样写:
<video src="movie.mp4" controls>
您的浏览器不支持 video 标签。
</video>
HTML 与 XHTML 之间的区别:
在 XHTML 中, 属性不允许简写,autoplay 属性必须定义为: <video autoplay="autoplay">。
在 XHTML中, 属性不允许简写,controls 属性必须定义为: <video controls="controls">。
在 XHTML 中, 属性不允许简写, loop 属性必须定义为 <video loop="loop">。
在 XHTML 中, 属性不允许简写, muted 属性必须定义为 <video muted="muted">。
二、音频标签
定义
<audio> 标签定义声音,比如音乐或其他音频流。
目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。
属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示音频控件,比如播放、暂停、进度条、音量按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 如果出现该属性,则音频输出为静音。 |
preload | auto、metadata、none | 规定当网页加载时,音频是否默认被加载以及如何被加载。 |
src | URL() | 规定音频文件的 URL。 |
写法
多个格式文件时,浏览器根据条件进行选择。
<audio controls autoplay loop preload="auto|metadata|none">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
如果只有一个格式文件,可以这样写:
扫描二维码关注公众号,回复:
15007233 查看本文章
<audio src="horse.ogg" controls>
您的浏览器不支持 audio 元素。
</audio>
HTML 与 XHTML 之间的区别:
在 XHTML 中, 属性不允许简写,autoplay 属性必须定义为: <video autoplay="autoplay">。
在 XHTML中, 属性不允许简写,controls 属性必须定义为: <video controls="controls">。
在 XHTML 中, 属性不允许简写, loop 属性必须定义为 <video loop="loop">。
在 XHTML 中, 属性不允许简写, muted 属性必须定义为 <video muted="muted">。
总结
以上就是音频/视频标签的使用,具体属性详情可以点击表格进行查看。