html5 video/audio 监听事件属性及方法

HTML5 <video> 和 <audio> 元素提供了一系列的事件监听属性，可以用来响应播放状态的改变。以下是一些常用的事件监听属性：

1. onplay - 当媒体播放开始时触发。
2. onpause - 当媒体播放暂停时触发。
3. onended - 当媒体播放结束时触发。
4. ontimeupdate - 当媒体的播放位置发生改变时触发。
5. onerror - 当在加载过程中发生错误时触发。

以及相关的DOM方法：

1. play() - 开始播放媒体。
2. pause() - 暂停媒体播放。

示例代码：

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<script>
  var video = document.getElementById('myVideo');
 
  // 当视频开始播放时
  video.onplay = function() {
    console.log('Video is playing...');
  };
 
  // 当视频暂停时
  video.onpause = function() {
    console.log('Video is paused...');
  };
 
  // 当视频播放到结尾时
  video.onended = function() {
    console.log('Video has ended...');
  };
 
  // 当播放位置发生变化时
  video.ontimeupdate = function() {
    console.log('Current playback position: ' + video.currentTime + ' seconds');
  };
 
  // 当发生错误时
  video.onerror = function() {
    console.error('Error: ' + video.error.code);
  };
 
  // 通过按钮控制视频播放
  document.getElementById('playButton').onclick = function() {
    video.play();
  };
 
  document.getElementById('pauseButton').onclick = function() {
    video.pause();
  };
</script>

在这个例子中，我们为 <video> 元素添加了事件监听器，并且通过两个按钮控制视频的播放和暂停。