HTML 音频/视频

HTML 提供了 <audio> 和 <video> 元素，用于在网页中嵌入音频和视频内容。以下是这两个元素的基本用法：

<audio> 元素

<audio> 元素用于嵌入音频文件。示例：

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

controls 属性添加了音频控制面板，使用户能够播放、暂停和调整音量。

<source> 元素用于指定不同格式的音频文件，以便浏览器选择支持的格式。

<video> 元素

<video> 元素用于嵌入视频文件。示例：

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

width 和 height 属性定义了视频的宽度和高度。

controls 属性添加了视频控制面板，类似于 <audio> 元素。

<source> 元素同样用于指定不同格式的视频文件。

通用属性

src 属性指定媒体文件的URL。

type 属性指定媒体文件的MIME类型。

autoplay 属性使媒体在加载时自动播放。

loop 属性指定媒体是否应该在结束时重新开始播放。

preload 属性指定是否在页面加载时预加载媒体文件。

poster 属性指定在加载视频之前显示的图像。

事件和 JavaScript 控制

通过 JavaScript，你可以以编程方式控制 <audio> 和 <video> 元素。例如，你可以使用 play() 方法来开始播放媒体，使用 pause() 方法来暂停播放。还可以监听诸如 play, pause, ended 等事件，以便在媒体状态发生变化时执行特定的操作。

var audio = document.getElementById("myAudio");
audio.play(); // 开始播放音频

var video = document.getElementById("myVideo");
video.pause(); // 暂停播放视频

这是一个简单的介绍，使用这些元素可以创建丰富的音频和视频体验，包括自定义控件、媒体事件处理和与 JavaScript 的交互。

转载请注明出处：http://www.pingtaimeng.com/article/detail/12453/HTML