mediaelement.js - How to hide Audio controls?

I am trying to implement Mediaelement.js into a site for both video and audio, the video is all working great however what I need to do is hide the audio element so it does not show on the page at all and that the MEJS audio c开发者_StackOverflowontrol bar isnt visible. Playback for the audio will be handled through a function to play/pause the audio as needed.

Ive tried altering the CSS and also changing the audio code to include "hidden=true" currently the audio blocks look like this:

    <audio id="Audio101" hidden="true">
    <source src="audio/audio1.mp3" />
    <source src="audio/audio1.ogg" />
    <embed src="audio/audio1.mp3" hidden=true autostart=false loop=false>
    </audio>

Does anyone know how to hide only the Audio (not Video) MEJS controls?

Cheers.

You can specify the player controls that are displayed with the 'features' parameter. This example shows only the volume control and sets the player to the size of just that button.

$('audio').mediaelementplayer({
    features: ['volume'],
    audioWidth: 26,
    audioHeight: 30
});

The 'features' available are:

    features: ['playpause','progress','current','duration','tracks','volume','fullscreen']

To show no controls at all:

$('audio').mediaelementplayer({
    features: ['volume'],
    audioWidth: 26,
    audioHeight: 30
}); 

You can instantiate a MediaElement instead of a full fledged MediaElementPlayer:

var $element = $('<audio src="foo.mp3" autoplay="true"/>');

var mediaelement = new MediaElement($element.get(0), {
    startVolume: 1
});

You can then play/pause like this:

mediaelement.play()
mediaelement.pause()

it's a bit dirty, but this seems to work:

$('#Audio101').mediaelementplayer({
     success: function(){
          $('.mejs-container').css('display', 'none');
     }
})

Also you can use JQuery to show/hide controls:

Add this to the css:

.mejs-container .mejs-controls {    
   display: none;    
}       

Then use this in javascript:
Show - $('.mejs-container .mejs-control').css('display','block');
Hide - $('.mejs-container .mejs-control').css('display','none');

MediaElement.js version 4.2.*

The player support API called hideControls(), so you can do like:

$('#Audio101').mediaelementplayer({
 success:function(media, node, player) {
    player.hideControls();
  }
});

In this way, the player will hide the control but player box is still remain.

Other trick to hide the player box. you can do like:

$('#Audio101').mediaelementplayer({
 success:  function(media, node, player) {
    player.hideControls();
    $(player.node).parents('.mejs__container').hide(1000);
  }
});

Please see the example:

$('a#btn1').click(function() {
  $('#player1').mediaelementplayer({
    // add desired features in order
    features: ['playpause', '[feature_name]', 'current', 'progress', 'duration', 'volume'],
    hideVideoControlsOnLoad: true,
    success: function(media, node, player) {
      media.play();
      player.hideControls();
    }
  });
  $(this).hide();
});

$('a#btn2').click(function() {
  $('#player2').mediaelementplayer({
    // add desired features in order
    features: ['playpause', '[feature_name]', 'current', 'progress', 'duration', 'volume'],
    hideVideoControlsOnLoad: true,
    success: function(media, node, player) {
      media.play();
      player.hideControls();
      $(player.node).parents('.mejs__container').hide(1000);
    }
  });
  $(this).hide();
});

<audio id="player1" width="320">
    		  <source src="sample.mp3" type="audio/mpeg">
    	</audio>
<a href="#" id='btn1'>sample1</a>

<br>
<audio id="player2" width="320">
    		  <source src="sample.mp3" type="audio/mpeg">
    	</audio>
<a href="#" id='btn2'>sample2</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.3/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.3/mediaelementplayer.min.css">