插入视频和音频的基本语法-编程入门课：HTML(5)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：HTML(5)从入门到实战

在过去，要在网页中嵌入视频和音频，需要使用第三方插件，如Flash。但是，HTML5使得在网页中嵌入音频和视频变得更加容易和直观。

插入视频
在HTML5中，我们可以使用`<video>`标签来插入视频。下面是一个插入视频的示例：
```asp
<video src="video.mp4" controls></video>

```
在这个示例中，`<video>`标签中的src属性指定了视频的URL。controls属性会显示视频控件，包括播放、暂停、音量、全屏等控件。

除了src和controls属性外，`<video>`标签还有一些其他的属性，如autoplay、loop、muted、width、height、poster等。下面是一个更完整的示例：
```asp
<video src="video.mp4" controls autoplay loop muted width="640" height="360" poster="poster.png"></video>

```
在这个示例中，我们添加了autoplay、loop、muted、width、height和poster属性。autoplay属性指定视频在加载后自动播放，loop属性指定视频循环播放，muted属性指定视频静音播放，width和height属性指定视频的宽度和高度，poster属性指定视频封面图片的URL。

插入音频
在HTML5中，我们可以使用`<audio>`标签来插入音频。下面是一个插入音频的示例：
```asp
<audio src="audio.mp3" controls></audio>

```
在这个示例中，`<audio>`标签中的src属性指定了音频的URL。controls属性会显示音频控件，包括播放、暂停、音量等控件。
```asp
<audio src="audio.mp3" controls autoplay loop muted preload="auto"></audio>

```

在这个示例中，我们添加了autoplay、loop、muted和preload属性。autoplay属性指定音频在加载后自动播放，loop属性指定音频循环播放，muted属性指定音频静音播放，preload属性指定音频在页面加载时是否预加载。

支持的格式
在插入视频和音频时，我们需要注意浏览器支持的格式。不同的浏览器支持不同的视频和音频格式。常用的视频格式有MP4、WebM和Ogg，常用

除了src和controls属性外，`<audio>`标签还有一些其他的属性，如autoplay、loop、muted、preload等。下面是一个更完整的示例：
```asp
<audio src="audio.mp3" controls autoplay loop muted preload="auto"></audio>

```
在这个示例中，我们添加了autoplay、loop、muted和preload属性。autoplay属性指定音频在加载后自动播放，loop属性指定音频循环播放，muted属性指定音频静音播放，preload属性指定音频在页面加载时是否预加载。

支持的格式
在插入视频和音频时，我们需要注意浏览器支持的格式。不同的浏览器支持不同的视频和音频格式。常用的视频格式有MP4、WebM和Ogg，常用的音频格式有MP3、WAV和OGG。为了确保我们的网页在各种浏览器上都能够正确地显示和播放音频和视频，我们应该为每个格式提供一个备用的URL。我们可以使用`<source>`标签来为视频和音频提供备用的URL，如下所示：
```asp
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

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

```
在这个示例中，我们为每个视频和音频格式提供了一个`<source>`标签。type属性指定了格式的MIME类型。如果浏览器不支持任何一个格式，就会显示`<video>`或`<audio>`标签中的备用文本。

除了使用`<source>`标签，我们还可以使用`<object>`和`<embed>`标签来嵌入视频和音频，但这些标签已经不被推荐使用，因为它们需要使用特定的插件，如Flash，而HTML5标准已经越来越普及和成熟。

视频和音频的样式和交互
除了插入视频和音频外，我们还可以通过CSS和JavaScript来为视频和音频添加样式和交互。例如，我们可以使用CSS来改变视频的大小和位置，或者使用JavaScript来控制音频的播放和暂停。

下面是一个使用CSS改变视频大小和位置的示例：
```asp
<style>
  video {
    width: 50%;
    margin: 0 auto;
  }
</style>

```
在这个示例中，我们使用CSS将视频的宽度设置为父元素的50%，并使视频水平居中对齐。

下面是一个使用JavaScript控制音频播放和暂停的示例：
```asp
<audio src="audio.mp3" controls></audio>

<button id="play-button">Play</button>
<button id="pause-button">Pause</button>

```
在这个示例中，我们使用JavaScript获取了`<audio>`元素和两个按钮，当点击"Play"按钮时，调用play()方法播放音频；当点击"Pause"按钮时，调用pause()方法暂停音频。

该分类下的相关小册推荐：

编程入门课：CSS(3)从入门到实战