您可能决定希望音频或视频播放器在浏览器中具有一致的外观,或者只是希望对其进行调整以匹配您的站点。实现此目的的一般技术是省略该controls属性以便不显示默认浏览器控件,使用 HTML 和 CSS 创建自定义控件,然后使用 JavaScript 将您的控件链接到音频/视频 API。
如果您需要额外的东西,可以添加默认播放器中当前不存在的功能,例如播放速率、质量流切换甚至音频频谱。您还可以选择如何让您的播放器响应——例如,您可以在某些情况下删除进度条。
您可以检测点击、触摸和/或键盘事件来触发播放、暂停和滑动等操作。为了用户的方便和可访问性,记住键盘控件通常很重要。
一个简单的例子——首先在 HTML 中设置你的音频和自定义控件:
一个简单的例子——首先在 HTML 中设置你的音频和自定义控件:
<audioid="my-audio"src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio><buttonid="my-control">play</button>
复制到剪贴板
添加一些 JavaScript 来检测播放和暂停音频的事件:
window.onload=function(){varmyAudio=document.getElementById('my-audio');varmyControl=document.getElementById('my-control');functionswitchState(){if(myAudio.paused==true){myAudio.play();myControl.innerHTML="pause";}else{myAudio.pause();myControl.innerHTML="play";}}functioncheckKey(e){if(e.keycode==32){//spacebarswitchState();}}myControl.addEventListener('click',function(){switchState();},false);window.addEventListener("keypress",checkKey,false);}