自定义video控件

自定义您的媒体播放器

您可能决定希望音频或视频播放器在浏览器中具有一致的外观,或者只是希望对其进行调整以匹配您的站点。实现此目的的一般技术是省略该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);}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容