5.事件监听器

在创造你的应用程序的动态视频体验的第一步是处理播放器事件。让我们现在做这件事情。看看在event_listeners.html和event_listeners.js文件（单击演示页面顶部的“Event Listeners”链接，查看文件的呈现方式）

event_listeners.js

var player;
// Callback for when the YouTube iFrame player is ready
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // Set Player height and width
    height: '390',
    width: '640',
    // Set the id of the video to be played
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady
      // You can add more event listeners here
    }
  });
};

function onPlayerReady (){
  //add onStateChange event handler
  player.addEventListener("onStateChange","onPlayerStateChange");

  //add your own rate listener below:

};

有两种方法可以创建事件侦听器和上面的代码演示了他们两个。您可以列出事件和事件处理函数的名称作为events对象的属性传递到一个新的播放器【译者注：代码第11行】，或在player对象已经创建后调用addEventListener方法【译者注：代码第19行】。 addEventListener采取两个字符串参数：事件的名称和处理事件的函数的名称。您也可以使用相同参数的removeEventListener函数来删除事件侦听器。以下事件可用于事件侦听器注册：

事件	描述
onReady	当播放器完成加载并准备开始接收API调用时，此事件触发。如果您想要自动执行某些操作（如播放视频或显示有关视频的信息），则应用程序应实现此功能，一旦播放器准备就绪
onStateChange	当播放器的状态发生变化时，该事件触发。 API传递给事件监听器函数的事件对象的data属性将指定一个与新的播放器状态对应的整数。可能的值是：
onPlaybackQualityChange	当视频播放质量实际上发生变化，而不是当请求质量改变时，此事件触发。
onPlaybackRateChange	当视频播放速率发生变化，而不是当请求速率更改时，此事件触发。
onError	当播放器发生错误，此事件触发。 该API会将一个事件对象传递给事件侦听器函数。
onApiChange	此事件触发时就表示播放器已加载（或卸载）某个公开的API方法的模块。

一些类似onStateChange的事件包括事件对象的data属性，API传递给事件侦听器函数，该函数指定事件的数据。在onStateChange的情况下，传递对应于新播放器状态的整数。可能的值是：

-1	未开始
0	结束
1	播放
2	暂停
3	缓冲
5	视频线索

命名空间变量也可用于本作，例如在event_listeners.js看到：

event_listeners.js

function onPlayerStateChange(event){
  // Get current state
  var state = "Current state: "
  if (event.data == YT.PlayerState.ENDED){
    state += "Ended";
  } 
  else if (event.data == YT.PlayerState.PLAYING){
    state += "Playing";
  } 
  else if (event.data == YT.PlayerState.PAUSED){
    state += "Paused";
  }  
  else if (event.data == YT.PlayerState.BUFFERING){
    state += "Buffering";
  }
  else if (event.data == YT.PlayerState.CUED){
    state += "Cued";
  } else{
    state += "Unknown";
  }

  // Update video state div
  document.getElementById('currentState').innerText = state;
};

当播放器第一次加载视频时，它会广播一个未开始（-1）事件。当视频被提示和准备播放时，播放器将广播视频提示（5）事件。

创建自己的事件监听

在event_listener.js中实现onPlaybackRateChange函数，包括使用events对象或addEventListener函数创建指向onPlaybackRateChange的事件侦听器。

提示：onPlaybackRateChange事件调用事件监听器，其中一个对象作为具有data属性的参数。

通过点击按钮并更改速度来触发速率事件侦听器。