Javascript 如何应用引导类mediaelementjs按钮_Javascript_Twitter Bootstrap_Mediaelement.js

Javascript 如何应用引导类mediaelementjs按钮

javascript twitter-bootstrap

Javascript 如何应用引导类mediaelementjs按钮,javascript,twitter-bootstrap,mediaelement.js,Javascript,Twitter Bootstrap,Mediaelement.js,我是MediaElement.js的新手。我想让我的播放器反应灵敏，所以我希望控件的按钮被封装在列和列中。我已经找过了，但什么也没找到。有谁能帮我把进度条设为6列，把播放器暂停按钮设为1列 <!DOCTYPE html> <html> <head> <title>MediaElement</title> <script type="text/javascript" src="jquery.min.js">

我是MediaElement.js的新手。我想让我的播放器反应灵敏，所以我希望控件的按钮被封装在列和列中。我已经找过了，但什么也没找到。有谁能帮我把进度条设为6列，把播放器暂停按钮设为1列

   <!DOCTYPE html>
<html>
<head>
    <title>MediaElement</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="../build/mediaelement-and-player.js"></script>
    <link rel="stylesheet" type="text/css" href="custom.css">

</head>
<body>
<div class="audio-player">
    <audio id="audio">
        <source src="1.mp3" type="audio/mp3">
    </audio>    
</div>

<script type="text/javascript">
    $(document).ready(function(){
        mejs.i18n.language('de'); // Setting German language

    $('audio,video').mediaelementplayer({
        alwaysShowControls: true,
        features: ['playpause','volume','progress'],
        audioVolume: 'vertical',
        audioWidth: '100%',
        success: function(player, node) {
        }
    });
    });
</script>
</body>
</html>


媒体元素
$（文档）.ready（函数（）{
mejs.i18n.language（'de'）；//设置德语
$（“音频、视频”）.mediaelementplayer({
alwaysShowControls:对，
特点：[“播放暂停”，“音量”，“进度]，
音频音量：“垂直”，
音频宽度：“100%”，
成功：功能（播放器、节点）{
}
});
});

我要尝试的第一件事是使用

success

函数查找要添加引导类的元素并添加它们。例如（使用一些jQuery语法）：

在jQuery中，您需要在

addClass（）

方法中添加可能需要的其他类，作为一个空格分隔的列表。您可以从

$controls

变量执行加法

.find（）

操作，以针对不同的控件

根据您使用的MediaElement.js的版本，您可能会发现进度条最难通过此方法控制。旧版本的MEJS基于容器大小和其他控件大小的计算，将进度条的大小设置为

样式

属性。装载后对容器大小的更改并不总是得到反映。这通常不是一个问题，因为很少有人在页面加载后手动调整浏览器的大小，但这是需要记住的

success: function (player, node) {
    var $controls = $(node).parents('.mejs-container').find('.mejs-controls');


    $controls.find('.mejs-playpause-button').addClass('col-md-1');
}