·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5技术onvolumechange事件控制静音

时间:2015-06-08 15:14酷播
在此页面的结尾处尝试该示例并注意外部按钮和视频对象中的内置控件如何保持同步。 以对 onvolumechange 事件使用相同的技术以控制静音按钮上的图形。由于没有单独的静音和音量事件,因此下一示例使用 onvolumechange 来处理两个状态。

[html5]html5技术onvolumechange事件控制静音

  1. 在此页面的结尾处尝试该示例并注意外部按钮和视频对象中的内置控件如何保持同步。 
  2.  
  3. 以对 onvolumechange 事件使用相同的技术以控制静音按钮上的图形。由于没有单独的静音和音量事件,因此下一示例使用 onvolumechange 来处理两个状态。 

 

  1. video.addEventListener("volumechange", function () { 
  2.     if (video.muted) { 
  3.         // if muted, show mute image 
  4.         document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />" 
  5.     } else { 
  6.         // if not muted, show not muted image 
  7.         document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />" 
  8.     } 
  9. }, false); 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器