Video play() 方法

在 web 前端开发中，视频播放是一个常见的需求。而在控制视频播放的过程中，play() 方法是一个非常重要的方法。本文将详细介绍play() 方法的用法，以及一些常见的场景和示例代码。

什么是 play() 方法

play() 方法是 HTML5 中 <video> 元素的方法之一，用于开始播放视频。当调用这个方法时，视频将从当前位置开始播放。如果视频已经处于播放状态，再次调用play()方法将不会有任何效果。

如何使用 play() 方法

要使用play()方法，首先需要获取到 <video> 元素的引用。可以通过document.getElementById()方法或者其他选择器方法来获取到视频元素，然后调用play()方法即可开始播放视频。

示例代码如下：

// 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>
  const video = document.getElementById('myVideo');
  video.play();
</script>

在这个示例中，我们首先创建了一个带有控制条的视频元素，并为其设置了一个 id 为myVideo。然后通过document.getElementById('myVideo')方法获取到视频元素的引用，最后调用play()方法开始播放视频。

play() 方法的常见用途

自动播放视频

有时候我们希望在页面加载完成后自动播放视频，可以在页面加载完成时调用play()方法来实现自动播放的效果。

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

<script>
  window.onload = function() {
    const video = document.getElementById('autoPlayVideo');
    video.play();
  }
</script>

播放按钮

通常情况下，我们会在页面中添加一个播放按钮来控制视频的播放和暂停。当用户点击播放按钮时，可以通过调用play()方法来开始播放视频。

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

<button onclick="playVideo()">Play</button>

<script>
  function playVideo() {
    const video = document.getElementById('playButtonVideo');
    video.play();
  }
</script>

在这个示例中，我们为视频元素添加了一个控制条，并在页面中添加了一个按钮。当用户点击按钮时，会调用playVideo()函数，然后在函数内部调用play()方法开始播放视频。

总结

通过本文的介绍，我们了解了play()方法在视频播放中的重要性以及常见的用法。希望本文对你有所帮助，祝你在 web 前端开发中取得更多的成功！