HTML | DOM 视频加载( ) 方法(1)

📌 相关文章

📜 HTML | DOM 视频加载( ) 方法(1)

📅 最后修改于: 2023-12-03 15:15:37.226000 🧑 作者: Mango

HTML | DOM 视频加载() 方法

HTML5中新增了<video>标签，使得在网页中嵌入视频变得方便了很多。而HTML DOM提供了相应的方法用于控制和操作视频。在本文，我们将探讨HTML DOM视频加载方法的使用。

HTML DOM 视频对象

在HTML DOM中，可以使用getElementById()方法获取视频元素，并创建HTML<video>元素。下面是一个简单的例子，选取id为video的视频元素，并将其与一个JavaScript变量vid关联。

<!DOCTYPE html>
<html>
<body>

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

<script>
var vid = document.getElementById("video");
</script>

</body>
</html>

HTML DOM 视频加载方法

load() 方法

load()方法用于加载视频，它将重置视频。在使用play()方法播放视频后也可以使用该方法，以便再次播放视频。下面是一个例子，加载一个主视频和一个广告视频，并在主视频播放结束后播放广告视频。

<!DOCTYPE html>
<html>
<body>

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

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

<script>
var vid = document.getElementById("video");
var ad = document.getElementById("ad");

vid.addEventListener('ended', function() {
  ad.load();
  ad.play();
});
</script>

</body>
</html>

canplaythrough 事件

canplaythrough事件在播放视频之前触发，表示视频的缓冲区已达到可播放状态。下面是一个例子，当视频达到可播放状态时，在控制台输出"log"。

<!DOCTYPE html>
<html>
<body>

<video id="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>

<script>
var vid = document.getElementById("video");

vid.addEventListener('canplaythrough', function() {
  console.log("log");
});
</script>

</body>
</html>

结论

HTML DOM 视频加载方法提供了在网页中加载、控制和操作视频的功能。 load()方法用于加载视频，canplaythrough事件表示视频的缓冲区已达到可播放状态。在实际开发中，需要熟练掌握这些方法和事件，以实现更多高级功能。