·您当前的位置:主页 > 技术教程 > 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); 

 

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!