【JavaScript】事件监听：多媒体事件

a辰龙a

已于 2024-01-19 17:42:26 修改

阅读量1.1k

点赞数 20

文章标签： javascript 开发语言

于 2024-01-19 17:37:24 首次发布

本文链接：https://blog.csdn.net/weixin_47040861/article/details/135703636

版权

一、play：当媒体开始播放时触发。

二、pause：当媒体暂停播放时触发。

三、ended：当媒体播放结束时触发。

四、timeupdate：当媒体的播放时间发生变化时触发，通常与进度条等播放控件

五、canplay：当媒体可以开始播放时触发，表示媒体已经加载到足够的数据以供播放。

六、loadedmetadata：当媒体的元数据（例如尺寸、时长等）加载完成时触发。

七、error：当媒体加载或播放过程中发生错误时触发。

JavaScript提供了一些多媒体事件，用于处理音频和视频等多媒体元素的相关操作和交互。这些事件可以通过JavaScript代码来监听，并在事件触发时执行相应的操作。

一、play：当媒体开始播放时触发。

play事件在媒体开始播放时触发，可以用于执行一些与播放相关的操作。下面是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>Play Event Example</title>
  <script>
    var video = document.getElementById('myVideo');

    video.addEventListener('play', function() {
      console.log('Video started playing');
      // 在视频开始播放时执行其他操作，比如显示控制按钮、隐藏封面图等
    });
  </script>
</head>
<body>
  <video id="myVideo" src="video.mp4" controls></video>
</body>
</html>

在上面的例子中，我们创建了一个<video>元素并指定了一个视频文件作为其源文件。通过JavaScript代码，我们使用addEventListener方法为play事件添加了一个事件处理函数。在事件处理函数中，我们打印了一条消息并可以执行其他操作，例如显示控制按钮或隐藏封面图像等。当视频开始播放时，play事件将被触发，并执行相应的操作。

二、pause：当媒体暂停播放时触发。

pause事件在媒体暂停播放时触发，可以用于执行一些与暂停播放相关的操作。下面是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>Pause Event Example</title>
  <script>
    var video = document.getElementById('myVideo');

    video.addEventListener('pause', function() {
      console.log('Video paused');
      // 在视频暂停播放时执行其他操作，比如显示暂停按钮、显示广告等
    });
  </script>
</head>
<body>
  <video id="myVideo" src="video.mp4" controls></video>
</body>
</html>

在上面的例子中，我们创建了一个<video>元素并指定了一个视频文件作为其源文件。通过JavaScript代码，我们使用addEventListener方法为pause事件添加了一个事件处理函数。在事件处理函数中，我们打印了一条消息并可以执行其他操作，例如显示暂停按钮或显示广告等。当视频暂停播放时，pause事件将被触发，并执行相应的操作。

三、ended：当媒体播放结束时触发。

ended事件在媒体播放结束时触发，可以用于执行一些与播放结束相关的操作。下面是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>Ended Event Example</title>
  <script>
    var video = document.getElementById('myVideo');

    video.addEventListener('ended', function() {
      console.log('Video ended');
      // 在视频播放结束时执行其他操作，比如显示相关推荐视频、自动重新播放等
    });
  </script>
</head>
<body>
  <video id="myVideo" src="video.mp4" controls></video>
</body>
</html>

在上面的例子中，我们创建了一个<video>元素并指定了一个视频文件作为其源文件。通过JavaScript代码，我们使用addEventListener方法为ended事件添加了一个事件处理函数。在事件处理函数中，我们打印了一条消息并可以执行其他操作，例如显示相关推荐视频或自动重新播放等。当视频播放结束时，ended事件将被触发，并执行相应的操作。

四、timeupdate：当媒体的播放时间发生变化时触发，通常与进度条等播放控件结合使用。

timeupdate事件在媒体的播放位置发生变化时触发，通常用于实时更新媒体播放的进度条或显示当前播放时间。下面是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>Timeupdate Event Example</title>
  <style>
    #progressBar {
      width: 300px;
      height: 10px;
      background-color: #ccc;
    }
    #progress {
      width: 0%;
      height: 100%;
      background-color: #00f;
    }
  </style>
  <script>
    var video = document.getElementById('myVideo');
    var progressBar = document.getElementById('progress');

    video.addEventListener('timeupdate', function() {
      var currentTime = video.currentTime;
      var duration = video.duration;
      var progress = (currentTime / duration) * 100;

      progressBar.style.width = progress + '%';
    });
  </script>
</head>
<body>
  <video id="myVideo" src="video.mp4" controls></video>
  <div id="progressBar">
    <div id="progress"></div>
  </div>
</body>
</html>

在上面的例子中，我们创建了一个<video>元素并指定了一个视频文件作为其源文件。通过JavaScript代码，我们使用addEventListener方法为timeupdate事件添加了一个事件处理函数。在事件处理函数中，我们计算当前播放时间与总播放时间的比例，并将其转换为百分比，用于更新进度条的宽度。通过CSS样式，我们创建了一个进度条容器和一个进度条元素，并使用JavaScript代码更新进度条的宽度，以反映视频播放的进度。

每当视频播放位置发生变化时，timeupdate事件将被触发，并执行相应的操作。在本例中，进度条将根据视频的播放位置实时更新，以显示当前的播放进度。

五、canplay：当媒体可以开始播放时触发，表示媒体已经加载到足够的数据以供播放。

canplay事件在媒体能够播放时触发，通常用于检测媒体是否可以开始播放。下面是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>Canplay Event Example</title>
  <script>
    var video = document.getElementById('myVideo');

    video.addEventListener('canplay', function() {
      console.log('Media can be played');
      // 执行其他操作，如播放视频
    });
  </script>
</head>
<body>
  <video id="myVideo" src="video.mp4"></video>
</body>
</html>

在上面的例子中，我们创建了一个<video>元素并指定了一个视频文件作为其源文件。通过JavaScript代码，我们使用addEventListener方法为canplay事件添加了一个事件处理函数。在事件处理函数中，我们简单地在控制台输出一条消息，表示媒体可以播放了。

当媒体加载完成并准备好播放时，canplay事件将被触发，并执行相应的操作。在本例中，我们只是输出了一条消息，但你可以根据需要执行其他操作，比如自动播放视频或显示播放按钮等。

六、loadedmetadata：当媒体的元数据（例如尺寸、时长等）加载完成时触发。

loadedmetadata事件在媒体的元数据加载完成时触发，通常用于在媒体元数据可用时执行相应的操作。下面是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>Loadedmetadata Event Example</title>
  <script>
    var video = document.getElementById('myVideo');

    video.addEventListener('loadedmetadata', function() {
      console.log('Metadata loaded');
      console.log('Duration:', video.duration);
      console.log('Video width:', video.videoWidth);
      console.log('Video height:', video.videoHeight);
      // 执行其他操作，如显示视频信息
    });
  </script>
</head>
<body>
  <video id="myVideo" src="video.mp4"></video>
</body>
</html>

在上面的例子中，我们创建了一个<video>元素并指定了一个视频文件作为其源文件。通过JavaScript代码，我们使用addEventListener方法为loadedmetadata事件添加了一个事件处理函数。在事件处理函数中，我们输出了一条消息表示媒体元数据已加载，并打印了一些媒体的相关信息，如视频的时长、宽度和高度。

当媒体的元数据加载完成时，loadedmetadata事件将被触发，并执行相应的操作。你可以根据需要在事件处理函数中执行其他操作，比如显示视频的相关信息、调整播放器的大小等。

七、error：当媒体加载或播放过程中发生错误时触发。

error事件在处理多媒体元素或其他资源加载失败时非常有用。它可以用于捕获加载错误并采取适当的处理措施。

<!DOCTYPE html>
<html>
<head>
  <title>Error Event Example</title>
</head>
<body>
  <img src="nonexistent_image.jpg" alt="Image">
  <script>
    const image = document.querySelector('img');

    image.addEventListener('error', function() {
      console.log('Image failed to load.');
      // 执行其他处理操作，比如显示替代图像或显示错误消息
    });
  </script>
</body>
</html>

在上述例子中，我们尝试加载一个不存在的图像文件。当图像加载失败时，error事件被触发，事件处理程序会在控制台打印出错误消息。你可以根据实际需求，进一步处理错误情况，比如显示替代图像或显示用户友好的错误消息。