audio和video样式兼容

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  //控件的高
        });
    });

//可以自定义样式

展示效果