学习日记-HTML5-3

最新推荐文章于 2024-07-18 15:09:36 发布

trch1989

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量344

点赞数

文章标签： html5 audio video

本文链接：https://blog.csdn.net/trch1989/article/details/54933612

版权

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	设置视频播放器的宽度。

trch1989

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习日记-HTML5-3

视频-audio<!doctype html><meta charset="utf-8"><audio>你的浏览器不支持audio标签</audio>这样可以测试，该浏览器是否支持，如果看到字说明不支持。正式写法为：(test.mp3此音频文件是测试用，需自行准备，放在与所编辑页面相同的文件夹里)<audio src="test.mp3" autoplay>你的浏览器不支持audio标签</
复制链接

扫一扫