HTML5：新增多媒体
2021-07-01 本文已影响0人
前小小
<source> 标签
<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源
| 属性 | 值 | 描述 |
|---|---|---|
| media | media_query | 规定媒体资源的类型，供浏览器决定是否下载 |
| src | url | 规定媒体文件的url |
| type | MIME_type | 规定媒体资源的 MIME 类型 |
例：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
音频标签 <audio>
<audio> 标签定义声音，比如音乐或其他音频流。<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 播放控件 |
| loop | loop | 循环播放 |
| src | url | 要播放的音频的url |
语法：
<audio src="文件地址" controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio> 标签。
</ audio>
视频标签 <video>
<video> 标签定义视频，比如电影片段或其他视频流。<video> 元素支持三种视频格式：MP4、WebM、Ogg。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 播放控件 |
| width | pixels(像素) | 设置播放器宽度 |
| height | pixels(像素) | 设置播放器高度 |
| loop | loop | 循环播放 |
| preload | auto（预先加载） none（不加载） | 预先加载 |
| src | url | 视频 url 地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
语法：
<video src="文件地址" controls="controls"> </video>
// 播放录像
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
</ video >
例：
<style>
video {
width: 100%;
}
</style>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg"></video>
</body>
<track> 标签
<track> 标签为媒体元素（比如 <audio> ， <video>）规定外部文本轨道，也就是字幕，字幕格式有 WebVTT 格式（.vtt 格式文件）。
| 属性 | 值 | 描述 |
|---|---|---|
| default | default | 规定该轨道是默认的 |
| kind | captions，chapters，descriptions，metadata，subtitles | 规定文本轨道的文本类型 |
| label | text | 规定文本轨道的标签和标题 |
| src | url | 必需的 规定轨道文件的 url |
| srclang | language_code | 规定轨道文本数据的语言。如果 kind 属性值是 "subtitles"，则该属性是必需的 |
例：带有字幕轨道（friday.vtt）的视频
<video width="320" height="240" controls>
<video controls src="/video/php/friday.mp4">
<track default kind="captions" srclang="en" src="/video/php/friday.vtt" />
您的浏览器不支持嵌入视频！
</video>
</video>
