audio/video 兼容浏览器样式
利用MediaELEment.js插件:(官网http://www.mediaelementjs.com/)
借鉴文章 使用MediaElement.js构建个性的HTML5音频和视频播放器
//引用插件
<link rel="stylesheet" href="../css/mediaelementplayer.css" /> // 和 css文件同级 mejs-controls.svg
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/mediaelement-and-player.js"></script>
//实现
<div class="audio-player">
<audio id="audio-player" src="http://nls.alicdn.com/bgm/2.wav" type="audio/WAV" controls="controls"></audio>
</div>
//js事件
$(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true, //在播放且鼠标不在视频上方时隐藏控件
features: ['playpause','current','progress','duration','tracks','volume'], //按钮显示的顺序和类型
audioVolume: 'horizontal', //音量滑块在音频元素上的位置
startVolume: 0.8, //初始音量
loop: true, //循环播放
audioWidth: 400, //控件的宽
audioHeight: 120 //控件的高
});
});
//可以自定义样式