怎么在html中插入视频和音频

1. HTML中插入视频

在HTML中，可以使用<video>标签来插入视频。具体使用方法如下：

<video src="video.mp4">

    您的浏览器不支持video标签。
</video>

其中，src属性指定视频的URL地址。

注意：为了兼容性，应该提供多个视频格式，使用<source>标签，如下所示：

<video>

    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持video标签。
</video>

其中，type属性指定视频的MIME类型。应该提供多个MIME类型以便于兼容性。

1.1 控制视频播放

可以使用<video>标签属性来控制视频的播放。

autoplay属性可以让视频在页面加载时自动播放：

<video src="video.mp4" autoplay>

    您的浏览器不支持video标签。
</video>

controls属性可以让页面显示视频控制面板：

<video src="video.mp4" controls>

    您的浏览器不支持video标签。
</video>

此外，loop属性可以让视频循环播放，preload属性可以指定视频开始下载等。

1.2 响应式视频

在不同的设备上，视频应该具有不同的大小。可以使用CSS来实现响应式视频：

<style>

    .video {
        max-width: 100%;
        height: auto;
    }
</style>
<video src="video.mp4" class="video">
    您的浏览器不支持video标签。
</video>

该代码将视频的最大宽度设置为100%，高度自动适应。

2. HTML中插入音频

在HTML中，可以使用<audio>标签来插入音频。具体使用方法如下：

<audio src="audio.mp3">

    您的浏览器不支持audio标签。
</audio>

其中，src属性指定音频的URL地址。

注意：与视频相同，为了兼容性，应该提供多个音频格式，使用<source>标签。

2.1 控制音频播放

与视频相同，可以使用<audio>标签属性来控制音频的播放。例如，使用autoplay属性可以在加载页面时自动播放音频。

2.2 响应式音频

与视频类似，可以使用CSS实现响应式音频。具体来说，可以将<audio>标签包裹在一个容器中，并设置该容器的最大宽度，如下所示：

<style>

    .audio-container {
        max-width: 100%;
        height: auto;
    }
</style>
<div class="audio-container">
    <audio src="audio.mp3">
        您的浏览器不支持audio标签。
    </audio>
</div>

这将使音频具有与视频类似的响应式功能。