学习日记-HTML5-3

2024-04-27 15:15:50

字体：大中小

来源：转载

供稿：网友

HTML5中音频与视频标签-audio

<!doctype html><meta charset="utf-8"><audio>你的浏览器不支持audio标签</audio>

这样可以测试，该浏览器是否支持，如果看到字说明不支持。正式写法为：(test.mp3此音频文件是测试用，需自行准备，放在与所编辑页面相同的文件夹里)

<audio src="test.mp3" autoplay>你的浏览器不支持audio标签</audio>

在这里面会发现没有可以对音乐操作的按钮，其中autoplay是自动播放，这里音乐只能用于背景音乐。所以需要 controls 属性，出现生成一个用于控制的播放器。

<audio src="test.mp3" controls autoplay>你的浏览器不支持audio标签</audio>

如果想要循环播放则需要使用到loop属性。

<audio src="test.mp3" controls autoplay loop>你的浏览器不支持audio标签</audio>

各个浏览器支持的格式见表：

浏览器	MP3	Wav	Ogg
Internet Explorer	Y	N	N
Chrome	Y	Y	Y
Firefox	Y	Y	Y
Safari	Y	Y	N
Opera	Y	Y	Y

为了适配各个浏览器，可以用source列出各个资源，让浏览器遍历识别。

<audio controls autoplay loop> <source src="test.mp3" type="audio/mp3"> <source src="test.ogg" type="audio/ogg"> <source src="test.wav" type="audio/wav"> 你的浏览器不支持audio标签</audio><br>

各个浏览器对于视频格式支持见表：

浏览器	MP4	WebM	Ogg
Internet Explorer	Y	N	N
Chrome	Y	Y	Y
Firefox	Y 从 Firefox 21 版本开始,linux 系统从 Firefox 30 开始	Y	Y
Safari	Y	N	N
Opera	Y 从 Opera 25 版本开始	Y	Y

视频-同音频一样，但多了width与height两种属性，用于设置播放窗口大小。

<video controls autoplay loop width="500" height="300"> <source src="test.mp4" type="video/mp4"> <source src="test.webm" type="video/webm"> <source src="test.ogg" type="video/ogg"> 你的浏览器不支持video标签</video><br>

如果想要静音可以使用muted属性

<video controls muted autoplay loop width="500" height="300"> <source src="test.mp4" type="video/mp4"> <source src="test.webm" type="video/webm"> <source src="test.ogg" type="video/ogg"> 你的浏览器不支持video标签</video><br>

而在视频加载号之前，可使用poster属性，设置下载时与播放前的图片。值为URL

<video controls muted autoplay loop width="500" height="300" poster="test.jpg"> <source src="test.mp4" type="video/mp4"> <source src="test.webm" type="video/webm"> <source src="test.ogg" type="video/ogg"> 你的浏览器不支持video标签</video><br>

video标签的各种属性表如下：

属性	值	描述
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
PReload	auto，metadata，none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
src	URL	要播放的视频的 URL。
height	pixels	设置视频播放器的高度。
width	pixels	设置视频播放器的宽度。