onplaying 事件

在网页开发中，我们经常会遇到需要控制视频播放的场景，比如当视频开始播放时需要执行一些操作。这时候我们就可以使用 onplaying 事件来实现。onplaying 事件在视频播放时触发，我们可以在事件处理函数中编写相关代码来实现我们想要的功能。

onplaying 事件的基本用法

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

<script>
  const video = document.querySelector('video');

  video.onplaying = function() {
    console.log('视频开始播放了！');
    // 在这里可以编写相关操作
  };
</script>

在上面的示例代码中，我们先创建了一个 video 元素，并为其添加了 controls 属性，这样就会显示视频播放控件。然后通过 document.querySelector 方法获取到 video 元素，接着给其绑定了 onplaying 事件处理函数，当视频开始播放时，控制台会输出"视频开始播放了！"。

onplaying 事件的应用场景

1. 播放时显示提示信息

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

<div id="tip" style="display: none;">视频正在播放中...</div>

<script>
  const video = document.querySelector('video');
  const tip = document.getElementById('tip');

  video.onplaying = function() {
    tip.style.display = 'block';
  };

  video.onpause = function() {
    tip.style.display = 'none';
  };
</script>

在上面的示例中，当视频开始播放时，会显示一个提示信息"视频正在播放中..."，当视频暂停时，提示信息会隐藏起来。

2. 播放时统计播放时长

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

<div id="duration">0</div>

<script>
  const video = document.querySelector('video');
  const duration = document.getElementById('duration');

  video.onplaying = function() {
    const start = Date.now();

    setInterval(() => {
      const elapsed = Math.round((Date.now() - start) / 1000);
      duration.textContent = `播放时长：${elapsed} 秒`;
    }, 1000);
  };
</script>

在上面的示例中，当视频开始播放时，会统计视频的播放时长，并每秒更新一次显示在页面上。

总结

通过 onplaying 事件，我们可以在视频播放时执行一些操作，比如显示提示信息、统计播放时长等。这为我们提供了很多可能性，可以根据实际需求来灵活运用。希望本文对你有所帮助！