简介：

欢迎来到我们的HTML教程的第8部分！在本文中，我们将探讨HTML5音频和视频元素，使我们可以直接嵌入和控制媒体内容中的网页。使用HTML5音频和视频，您可以通过提供多媒体内容而不依赖外部插件或播放器来增强用户体验。让我们深入了解HTML5音频和视频！

html5音频元素：

HTML5中的<audio>元素允许我们在网页中嵌入音频内容。我们可以使用src属性指定音频文件源，并在不支持音频元素的浏览器中提供替代内容。

示例：

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

在上面的示例中，我们添加了一个带有控件属性的音频元素，该元素将默认音频控件（播放，暂停，音量）显示为用户。我们还提供了MP3格式的音频源，以及无支撑浏览器的替代内容。

html5视频元素：

同样，HTML5中的<video>元素允许我们将视频内容嵌入网页中。我们可以使用src属性指定视频文件源，并在元素中为不支持视频元素的浏览器提供替代内容。

示例：

<video controls>
    <source src="video/video.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

在上面的示例中，我们添加了一个带有controls属性的视频元素，从而为用户启用了默认的视频控件。我们已经指定了MP4格式的视频源，并为未支持的浏览器提供了替代内容。

控制音频和视频播放：

HTML5音频和视频元素带有内置控件，允许用户玩，暂停，寻求，调整音量等等。但是，我们还可以使用JavaScript编程地控制媒体播放。

示例：

var audio = document.getElementById("myAudio");
var video = document.getElementById("myVideo");

function playMedia() {
    audio.play();
    video.play();
}

function pauseMedia() {
    audio.pause();
    video.pause();
}

function seekMedia(seconds) {
    audio.currentTime += seconds;
    video.currentTime += seconds;
}

在上面的示例中，我们使用JavaScript获得了对音频和视频元素的参考。然后，我们通过调整currentTime属性来定义播放，暂停和寻求媒体的功能。

样式音频和视频元素：
HTML5音频和视频元素可以使用CSS进行样式，以匹配您的网页的设计。您可以针对<audio>和<video>元素或其父容器来应用自定义样式。

示例：

audio {
    width: 100%;
}

video {
    width: 100%;
}

在上面的示例中，我们使用CSS将音频和视频元素的宽度设置为100％，使它们响应并填充可用空间。

结束：

HTML5音频和视频元素提供了一种无缝的方式，可以直接在网页中嵌入多媒体内容。在本教程中，我们探讨了使用<audio>和<video>元素的基础知识，使用JavaScript控制媒体播放，并使用CSS造型元素。通过利用HTML5音频和视频的功能，您可以为用户创建引人入胜且交互式的多媒体体验。愉快的编码！