HTML5 Video 控件如何使用?

HTML5 提供了 <video> 元素，用于在网页上嵌入和播放视频。以下是如何使用HTML5 <video> 控件的基本步骤：

添加<video>元素： 在HTML文件中，你需要添加一个<video>元素来嵌入视频。例如：

<video src="video.mp4" controls></video>

上述代码中，src属性指定了要播放的视频文件的URL，controls属性添加了视频播放控制按钮，允许用户暂停、播放、音量控制等。

设置备用视频格式： 为了确保跨浏览器兼容性，你应该提供多个视频格式（通常是MP4、WebM和Ogg），因为不同的浏览器支持不同的视频格式。你可以使用<source>元素来为不同格式的视频提供备选项。例如：

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

浏览器将尝试播放第一个支持的格式。如果不支持任何格式，它将显示最后一个<source>标签内的文本。

添加其他属性： <video>元素支持许多其他属性，如width和height来设置视频的宽度和高度，autoplay来自动播放视频，loop来循环播放，等等。

<video controls width="640" height="360" autoplay loop>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

JavaScript 控制： 你还可以使用JavaScript来控制视频的播放、暂停和其他操作。通过获取<video>元素的引用，你可以使用JavaScript来执行这些操作。例如：

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

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

这只是HTML5 <video>元素的基本用法。你还可以使用JavaScript和CSS来自定义视频播放器的外观和行为，以满足你的项目需求。此外，一些现成的视频播放器库和框架（如Video.js和plyr）也可用于增强视频播放体验和交互性。