2.2.3　MediaStreamTrack事件

1. ended事件

当媒体轨道结束时，触发该事件，此时属性readyState取值变为ended，对应事件句柄onended。

以下情况会触发该事件。

  • 媒体源没有更多数据。
  • 用户注销了相关媒体设备的访问权限。
  • 媒体源设备被移除。
  • 当媒体源来自对等端时，意味着对等端永久性终止了数据发送。

代码清单2-19使用addEventListener监听ended事件，并在触发该事件时改变对应的图标。

代码清单2-19　ended事件示例

track.addEventListener('ended', () => {
  let statusElem = document.getElementById("status-icon");
  statusElem.src = "/images/stopped-icon.png";
})

为onended事件句柄设置处理函数也可以达到同样的目的，如代码清单2-20所示。

代码清单2-20　onended事件句柄示例

track.onended = () => {
  let statusElem = document.getElementById("status-icon");
  statusElem.src = "/images/stopped-icon.png";
}
2. mute事件

当属性mute被设置为true时触发该事件，表明媒体轨道暂时不能提供数据，对应事件句柄onmute。

代码清单2-21使用addEventListener监听mute事件，在事件触发时改变指定ID元素的背景色。

代码清单2-21　mute事件示例

musicTrack.addEventListener("mute", event => {
  document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
}, false);

为onmute事件句柄设置处理函数也可以达到同样的目的，如代码清单2-22所示。

代码清单2-22　onmute事件句柄示例

musicTrack.onmute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
}
3. unmute事件

当取消静音状态时触发该事件，表明媒体轨道可以正常提供数据，对应事件句柄onunmute。

代码清单2-23使用addEventListener监听unmute事件，在事件触发时改变指定ID元素的背景色。

代码清单2-23　unmute事件示例

musicTrack.addEventListener("unmute", event => {
  document.getElementById("timeline-widget").style.backgroundColor = "#fff";
}, false);

为onunmute事件句柄设置处理函数也可以达到同样的目的，如代码清单2-24所示。

代码清单2-24　onunmute事件句柄示例

musicTrack.onunmute = (event) => {
  document.getElementById("timeline-widget").style.backgroundColor = "#fff";
}
上一章目录下一章