i am new to MediaElement.js. I want to make my player responsive so i want the control's buttons to be enclosed in cols and rows. I have searched but not able to find anything. can anyone help me on how i can set progress bar to 6-cols and player pause button to be enclosed in 1 col.
<!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>
The first thing I would try would be to use the success function to find the elements you want to add the Bootstrap classes to and add them. So something like (using some jQuery syntax):
success: function (player, node) {
var $controls = $(node).parents('.mejs-container').find('.mejs-controls');
$controls.find('.mejs-playpause-button').addClass('col-md-1');
}
In jQuery, you'd add additional classes you might want as a space-separated list in the addClass() method. And you can do addition .find() operations from the $controls variable to target different controls.
Depending on the version of MediaElement.js you're using, you may find the progress bar the hardest to control through this method. Older versions of MEJS set the size of the progress bar as a style attribute based on calculations of the container size and the size of other controls. Changes to the size of the container after load don't always get reflected. This isn't usually a problem as few people manually resize their browser after page load, but it's something to keep in mind.