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

【问题标题】：mediaelement.js - How to hide Audio controls?mediaelement.js - 如何隐藏音频控件？
【发布时间】：2011-07-15 13:54:37
【问题描述】：

我正在尝试将 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 控件？

干杯。

【问题讨论】：

您解决了这个问题吗？我的回答解决了你的问题吗？

标签： mediaelement.js

【解决方案1】：

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

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

可用的“功能”是：

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

完全不显示控件：

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

【讨论】：

【解决方案2】：

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

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

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

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

mediaelement.play()
mediaelement.pause()

【讨论】：

这很有效，如果你想隐藏所有的控件，应该使用它。否则，alexroper 是正确的。

【解决方案3】：

有点脏，但这似乎可行：

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

【讨论】：

【解决方案4】：

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

将这个添加到 css 中：

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

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

【讨论】：

【解决方案5】：

MediaElement.js 版本 4.2.*

播放器支持 API 称为 hideControls()，所以你可以这样做：

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

【讨论】：