【HTML5】视频标签和音频标签

视频标签和音频标签

视频标签

  语法 ：

<video src="视频路径" controls></video> //提供播放、暂停和音量的控件
<video src="视频路径" autoplay></video> //自动播放
<video src="视频路径" loop></video> //循环播放

  还可以使用width和height属性设置视频的宽度和高度。
  video标签支持Ogg、MPEG4、WebM等视频格式。
  ※如果浏览器不支持video标签，可以在video标签中间插入一段文字用于提示，这样旧的浏览器就可以显示这段文字给用户，具体操作如下：

<video src="视频路径" controls>你的浏览器不支持video标签</video>

  ※在video标签中虽然可以使用src属性来链接视频路径，但是只能链接一种格式的视频，很难让每种浏览器都支持这种格式，所以就出现了单标签source用来解决这个问题。source标签嵌套在video标签里面，并且可以出现多次，每个source标签对应一种格式的视频。这样浏览器会在这些格式中自动选择第一种自己可以识别的视频来进行播放。

<video controls>
	<source src="xxx.mp4" />
	<source src="xxx.webm" />
</video>

---

音频标签

  语法 ：

<audio src="音频路径" controls></audio> //提供播放、暂停和音量的控件
<audio src="音频路径" autoplay></audio> //自动播放
<audio src="音频路径" loop></audio> //循环播放

  还可以使用width和height属性设置音频的宽度和高度。
  video标签支持Ogg、MP3、WAV等音频格式。
  ※如果浏览器不支持audio标签，可以在audio标签中间插入一段文字用于提示，这样旧的浏览器就可以显示这段文字给用户，具体操作如下：

<audio src="音频路径" controls>你的浏览器不支持audio标签</audio>

  跟video标签一样，可以使用单标签source来解决浏览器对音频的兼容性问题。

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

---

我寻见一片海 碧蓝且耀着光

大片船只航行其上 都向着远方

                         Shared by Foriver_江河

© 1997-2020 江河 All Rights Reserved.