1.2 HTML5新增的多媒体标签
2021-03-01 11:25
标签：media mod rac 按钮 播放视频 load block span 基本 新增的多媒体标签主要包含两个∶ 音频: 视频: 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。 HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。 当前 1.2 HTML5新增的多媒体标签
1.2.1 视频
元素支持三种视频格式:尽量使用mp4格式
浏览器
MP4
WebM
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始
YES
YES
Safari
YES
NO
NO
Opera
YES 从 Opera 25 版本开始
YES
YES
属性
值
描述
autoplay
autoplay
如果出现该属性，则视频在就绪后马上播放。
controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮。
height
pixels
设置视频播放器的高度。
loop
loop
如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted
muted
如果出现该属性，视频的音频输出为静音。
poster
URL
规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload
auto metadata none
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src
URL
要播放的视频的 URL。
width
pixels
设置视频播放器的宽度。
video controls="controls" autoplay muted loop poster="./media/pig.jpg">
source src="movie.mp4" type="video/mp4">
source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
video>
1.2.2 音频
当前 元素支持三种音频格式:
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |
audio controls>
source src="horse.ogg" type="audio/ogg">
source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
audio>
1.2.3 多媒体标签总结
-
音频标签和视频标签使用基本一致
-
多媒体标签在不同浏览器下情况不同，存在兼容性问题
-
谷歌浏览器把音频和视频标签的自动播放都禁止了
-
谷歌浏览器中视频添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）
-
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
1.2 HTML5新增的多媒体标签
标签：media mod rac 按钮 播放视频 load block span 基本
原文地址：https://www.cnblogs.com/zhif97/p/14423538.html
下一篇：网页添加live2D萌妹