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 control 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.

回答1:

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
});

回答2:

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()

回答3:

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

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

回答4:

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');

回答5:

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">

来源：https://stackoverflow.com/questions/6708037/mediaelement-js-how-to-hide-audio-controls

标签

mediaelement.js