如何应用 bootstrap 类 mediaelementjs 按钮

Question

我是 MediaElement.js 的新手。我想让我的播放器响应，所以我希望控件的按钮包含在 cols 和 rows 中。我已经搜索过但找不到任何东西。任何人都可以帮助我如何将进度条设置为 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>

Answer 1

我要尝试的第一件事是使用 success 函数找到要添加 Bootstrap 类的元素并添加它们。所以像（使用一些 jQuery 语法）：

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


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

在 jQuery 中，您可以在 addClass() 方法中添加您可能想要的其他类作为 space 分隔列表。您可以从 $controls 变量进行加法 .find() 操作以针对不同的控件。

根据您使用的 MediaElement.js 版本，您可能会发现进度条最难通过此方法控制。旧版本的 MEJS 将进度条的大小设置为基于容器大小和其他控件大小的计算的 style 属性。加载后容器大小的变化并不总能得到反映。这通常不是问题，因为很少有人会在页面加载后手动调整浏览器大小，但请记住这一点。

如何应用 bootstrap 类 mediaelementjs 按钮

How to apply bootstrap classes mediaelementjs button

javascript

mediaelement.js

twitter-bootstrap