zoukankan      html  css  js  c++  java
  • 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  //控件的高
            });
        });
    
    //可以自定义样式
    
    展示效果

  • 相关阅读:
    dom4j 创建XML文件
    Convert.ToInt32()与int.Parse()的区别
    委托
    工厂模式
    策略模式
    大型网站架构演化
    字符串反转(面试)
    switch(面试)
    带宽计算
    新语法
  • 原文地址:https://www.cnblogs.com/zhy7blog/p/12517030.html
Copyright © 2011-2022 走看看