Question

我是MediaElement.js的新手。我想让我的播放器响应，所以我希望控件的按钮被包含在cols和rows中。我已搜索但无法找到任何内容。任何人都可以帮助我如何设置进度条到6-cols和玩家暂停按钮被包含在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()方法中以空格分隔的列表。而且，您可以从.find()变量中进行附加的$controls操作，以定位不同的控件。

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

如何应用bootstrap类mediaelementjs按钮

1 个答案: