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

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

5 个答案: