HTML5 Video(视频)

HTML5 提供了一个 <video> 元素，用于在网页中嵌入视频内容。通过 <video> 元素，我们可以轻松地在网页上播放视频，而无需使用第三方插件。

基本用法

要在网页中嵌入视频，我们需要使用 <video> 元素，并指定视频文件的路径。下面是一个简单的示例：

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

在上面的示例中，<video> 元素包含了一个 <source> 子元素，用于指定视频文件的路径和类型。controls 属性用于显示视频控制条，让用户可以播放、暂停、调整音量等。

支持的视频格式

HTML5 视频支持多种视频格式，常见的包括 MP4、WebM 和 Ogg。为了确保视频在不同浏览器和设备上都能正常播放，我们可以提供多个不同格式的视频源：

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

控制视频播放

除了使用 controls 属性显示视频控制条外，我们还可以通过 JavaScript 控制视频的播放、暂停、音量等。下面是一个简单的示例：

// www.javascriptcn.com code example
<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  var video = document.getElementById('myVideo');
  
  function playVideo() {
    video.play();
  }
  
  function pauseVideo() {
    video.pause();
  }
</script>

在上面的示例中，我们通过 JavaScript 获取了 <video> 元素，并定义了两个函数 playVideo 和 pauseVideo 分别用于播放和暂停视频。

自定义样式

通过 CSS 可以对 <video> 元素进行样式定制，例如改变视频的宽度、高度、边框等。下面是一个简单的示例：

<video controls style="width: 100%; height: auto; border: 1px solid #ccc;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在上面的示例中，我们通过内联样式设置了视频的宽度为 100%、高度自适应、边框为 1px 实线灰色。

以上就是关于 HTML5 视频的基本用法和一些常见操作，希望对你有所帮助。