html5如何获取视频的时间

在HTML5中，我们可以使用<video>标签来嵌入视频，为了获取视频的时间，我们需要使用JavaScript来操作<video>元素，以下是详细的技术教学：

1、我们需要在HTML文件中创建一个<video>标签，并为其添加一个ID，以便我们可以通过JavaScript轻松地访问它。

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

2、接下来，我们需要编写一个JavaScript函数来获取视频的总时间、当前时间和播放时间，我们将这些信息显示在一个<div>元素中，在HTML文件中添加一个<div>元素，用于显示视频时间信息：

<div id="videoInfo"></div>

3、现在，我们需要编写JavaScript代码来获取视频的时间信息，我们需要获取对<video>元素的引用，我们可以使用duration属性获取视频的总时间（以秒为单位），使用currentTime属性获取当前播放时间（以秒为单位），我们需要编写一个函数来更新<div>元素中的时间信息。

// 获取对<video>元素的引用
var video = document.getElementById("myVideo");
// 定义一个函数来更新时间信息
function updateTime() {
  // 获取视频的总时间（以秒为单位）
  var duration = video.duration;
  // 获取当前播放时间（以秒为单位）
  var currentTime = video.currentTime;
  // 将总时间和当前时间转换为分钟和秒的格式
  var minutes = Math.floor(duration / 60);
  var seconds = Math.floor(duration % 60);
  var currentMinutes = Math.floor(currentTime / 60);
  var currentSeconds = Math.floor(currentTime % 60);
  // 更新<div>元素中的时间信息
  document.getElementById("videoInfo").innerHTML = "总时间：" + minutes + "分" + seconds + "秒";
}
// 当视频加载时，调用updateTime函数来更新时间信息
video.addEventListener("loadedmetadata", updateTime);
// 当视频播放时，每秒调用一次updateTime函数来更新时间信息
video.addEventListener("timeupdate", updateTime);

现在，当您在浏览器中打开HTML文件并播放视频时，您应该可以看到视频的总时间和当前时间显示在页面上，请注意，这个示例仅适用于MP4和OGG格式的视频，如果您需要支持其他格式的视频，请确保为每种格式提供一个<source>标签。