html中如何播放视频文件

在HTML中播放MP4视频，我们主要通过<video>标签来实现，这个标签是HTML5引入的新元素，用于在网页中嵌入视频内容。

使用<video>标签

要使用<video>标签，首先需要在你的HTML文档中添加一个<video>元素，你可以设置各种属性来控制视频的显示，例如宽度、高度、是否自动播放等，以下是一个基本的示例：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在这个例子中，我们设置了视频的宽度为320像素，高度为240像素，并且添加了控制器(controls),用户可以通过这些控制器来控制视频的播放、暂停等操作，我们还设置了两个源(source),分别对应两种不同的视频格式：MP4和OGG，如果用户的浏览器不支持<video>标签或者指定的视频格式，那么就会显示“Your browser does not support the video tag.”这句话。

设置视频源

如果你有多种格式的视频文件，你可以使用多个<source>元素来指定不同格式的视频文件，每个<source>元素都有一个src属性，用于指定视频文件的URL,以及一个type属性，用于指定视频文件的格式。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在这个例子中，我们同时提供了MP4和OGG两种格式的视频文件，如果用户的浏览器支持其中一种格式，那么就会显示对应的视频文件，否则，就会显示前面提到的那句话。

控制视频播放

除了设置视频的宽度、高度和源之外，你还可以使用其他属性来控制视频的播放，你可以使用autoplay属性来让视频在页面加载完成后立即播放，或者使用loop属性来让视频循环播放，以下是一个包含这些属性的例子：

<video width="320" height="240" autoplay loop controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在这个例子中，我们设置了autoplay和loop属性，使得视频在页面加载完成后立即播放，并在播放结束后再次播放。

相关问题与解答

Q1: 如何调整视频的大小？

A1: 你可以使用CSS来调整视频的大小，你可以使用width和height属性来设置视频的宽度和高度，或者使用object-fit属性来让视频保持其原始比例并填充整个容器。

<style>
  video {
    width: 100%; /* 或者设置具体的宽度 */
    height: auto; /* 让高度自动适应 */
  }
</style>