前端基础-HTML多媒体标签

多媒体标签

1.embed标签

不是h5独有，h4就有，用来播放音频和视屏

<embed src="邓紫棋-喜欢你.mp3"></embed>
<embed src="邓紫棋_喜欢你.webm"></embed>

说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、flac、AIFF、AU、MP3、MP4等等，Netscape及新版的IE 都支持。

在这里插入图片描述

多学一招：embed标签有属性可以控制播放状态

autostart=true/false --用来控制音频或视频文件是否在下载完之后就自动播放（IE可用）

loop=正整数/true/false --用来控制音频或视屏文件在播放结束之后是否循环播放或循环播放的次数

hidden=true/no --用来设置多媒体的控制面板是否隐藏

参考：https://www.cnblogs.com/lgx5/p/5714494.html

2.audio标签

h5专门用来播放音频的，支持的格式有MP3、OGG、WAV

<audio src="邓紫棋-喜欢你.mp3" controls autoplay="autoplay"></audio>

在这里插入图片描述

controls="controls"用来显示控制面板

autoplay="autoplay"用来控制自动播放

loop="loop"用来设置循环播放

多学一招：为了兼容，通常会写多个资源，第一个不能播放就播放第二个，原因是不同的浏览器支持的格式不一样，所以出现了一种兼容写法（前提是准备三种格式的视频文件）

<audio controls autoplay>
	<source src="music/music.mp3">
    <source src="music/music.ogg">
</audio>

浏览器会从上到下依次去读，在这个过程中，只要读到自己识别的视频文件就直接播放这个视频文件，并且不会再往后继续读取

参考：https://www.cnblogs.com/linn/p/3408515.html

3.video标签

h5专门用来播放视屏的，可以写单个，也可以写多个，支持格式有MP4、WebM、OGG

<video controls autoplay loop>
    <source src="邓紫棋_喜欢你.mkv">
    <source src="邓紫棋_喜欢你.webm">
</video>

参考：https://blog.csdn.net/keji_123/article/details/77717849

在这里插入图片描述