mediaelement.js - 如何隐藏音频控件？

Question

我正在尝试将 Mediaelement.js 实现到视频和音频网站中，视频运行良好，但我需要做的是隐藏音频元素，这样它根本不会显示在页面上，并且 MEJS 音频控件酒吧不可见。音频的播放将通过根据需要播放/暂停音频的函数来处理。

我尝试过更改 CSS 并更改音频代码以包含“hidden=true”，当前音频块如下所示：

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

有谁知道如何仅隐藏音频（而不是视频）MEJS 控件？

干杯。

Answer 1

您可以指定使用“features”参数显示的播放器控件。此示例仅显示音量控制并将播放器设置为该按钮的大小。

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

可用的“功能”是：

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

根本不显示控件：

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

Answer 2

您可以实例化一个 MediaElement 而不是一个完整的 MediaElementPlayer：

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

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

然后您可以像这样播放/暂停：

mediaelement.play()
mediaelement.pause()

Answer 3

它有点脏，但这似乎有效：

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

Answer 4

您还可以使用 JQuery 显示/隐藏控件：

将其添加到 css：

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

然后在 javascript 中使用它：
显示 - $('.mejs-container .mejs-control').css('display','block');
隐藏 - $('.mejs-container .mejs-control').css('display','none');

Answer 5

MediaElement.js version 4.2.*

播放器支持名为 hideControls() 的 API，因此您可以这样做：

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

这样，播放器将隐藏控件，但播放器框仍然保留。

隐藏玩家框的其他技巧。你可以这样做：

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

请看例子：

$('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">