音频/视频标签的使用
Posted 前端小胡兔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了音频/视频标签的使用相关的知识，希望对你有一定的参考价值。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
音视频的发展史
早期：
<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>
如果只有一个格式文件,可以这样写:
<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">。
总结
以上就是音频/视频标签的使用，具体属性详情可以点击表格进行查看。
HTML 学习笔记——插入音频视频标签
目录
前言
今天学习了尚硅谷老师的html基础课程，主要是音视频的标签的属性和使用方法。
html中插入音频和视频的方法基本相同，这里以音频为例进行演示
音频格式：mp3、ogg、wav
视频格式：mp4、ogv、webm
一、音频标签：audio
1.audio简介
audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下不允许用户自己控制播放按钮。
以下情况在页面中不会显示，需要加上controls：
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3"></audio>2.常用属性
controls：是否允许用户控制播放。
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3" controls></audio>
autoplay：音频文件是否自动播放。如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放。IE浏览器可以进行自动播放。
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3" controls autoplay></audio>
loop：音乐是否循环播放。设置了此属性，则音乐会进行循环播放。
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3" controls loop></audio>
3.兼容问题
一般插入音视频，浏览器都兼容，但是IE8会无法显示，此时有两种方法。第一种方法是添加向注释一样的提示语（如下）；第二种方法是使用embed标签。
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件这种方式，支持的浏览器显示播放按钮，不支持的浏览器显示文字。
<audio controls>
对不起，您的浏览器不支持播放音频，请升级浏览器
<!-- 这种方式可以引入多个source -->
<source src="./Zeraphym 六翼使徒 - Lifeline.mp3">
</audio>
embed：兼容IE8。使用方法如下：
元素提供了width和height属性控制显示的尺寸。
<!-- 这种方式兼容IE8 -->
<embed src="./Zeraphym 六翼使徒 - Lifeline.mp3" type="audio/mp3" width="200" height="100">
<!-- 若想避免兼容的问题,则采用以下方法即可 -->
<audio controls>0
<!-- 这种方式可以引入多个source -->
<source src="./Zeraphym 六翼使徒 - Lifeline.mp3">
<embed src="./Zeraphym 六翼使徒 - Lifeline.mp3" type="audio/mp3" width="200" height="100">
</audio>
二、视频标签：video
1.video
video：向网页中引入一个视频，使用方法和audio类似。
<video src=""></video>
总结
以上就是今天的学习笔记啦，希望对大家有帮助~
以上是关于音频/视频标签的使用的主要内容，如果未能解决你的问题，请参考以下文章