Javascript 如何使用mediaelement、js脚本在html播放器中添加自定义按钮

我想在html5播放器的标题附近添加一个额外的按钮“HD”。 在mediaelementplayer.js文件中添加了这段代码

//HD button display starts
(function ($) {
$.extend(MediaElementPlayer.prototype, {
    buildcontextmenu: function (player, controls, layers, media) {

        // create HD button
        $('<div class="mejs-button mejs-hd-button"><span>HD<span/></div>')
       .appendTo(controls);

    }
});
})(mejs.$);
//HD button display stops

//高清按钮显示开始
（函数（$）{
$.extend（MediaElementPlayer.prototype{
buildcontextmenu：功能（播放器、控件、层、媒体）{
//创建高清按钮
$（“HD”）
.附件（控制）；
}
});
})(墨西哥元),；
//高清按钮显示停止

有人能帮忙解决这个问题吗？ 到目前为止，johndyer的mediaelementplayer.js不支持HD开/关按钮。

---

johndyer的参考

您需要按照以下步骤进行操作（这是循环按钮的一个示例）：

---

谢谢@Sam，我使用了你的代码并编写了你的解决方案的普通版本。这一个增加了两个按钮来调整音量，一个加号和一个减号按钮，以进行10个步骤的调整。（mediaelementjs 4.2.8）

Javascript:

var audio_player = document.getElementById('audio-player').children[0];

MediaElementPlayer.prototype.buildvolume_plus = function(player, controls) {
  var
    volume = document.createElement('div'),
    volume_button = document.createElement('button');
  volume.className = 'mejs__button mejs__volumeplus-button';
  volume_button.type = 'button';
  volume.appendChild(volume_button);

  controls.appendChild(volume);

  volume_button.addEventListener('click', function() {
    player.setVolume( player.volume < 1 ? Math.round( (player.volume + .1 )  * 10) / 10 : 1 );

  })
};
MediaElementPlayer.prototype.buildvolume_minus = function(player, controls) {
  var
    volume = document.createElement('div'),
    volume_button = document.createElement('button');
  volume.className = 'mejs__button mejs__volumeminus-button';
  volume_button.type = 'button';
  volume.appendChild(volume_button);

  controls.appendChild(volume);

  volume_button.addEventListener('click', function() {
    player.setVolume( player.volume > 0 ? Math.round( (player.volume - .1 )  * 10) / 10 : 0 );
  })
};

new MediaElementPlayer(audio_player);

var audio_player=document.getElementById（'audio-player'）.children[0]；
MediaElementPlayer.prototype.buildvolume\u plus=函数（播放器、控件）{
变量
卷=document.createElement（'div'），
volume_button=document.createElement（'button'）；
volume.className='mejs__buttonmejs__volumeplus-button'；
volume_button.type='button'；
volume.appendChild（音量按钮）；
控件。追加子对象（卷）；
音量按钮。addEventListener（'单击'，函数（）{
player.setVolume（player.volume<1？数学轮（（player.volume+.1）*10）/10:1）；
})
};
MediaElementPlayer.prototype.buildvolume_减号=函数（播放器，控件）{
变量
卷=document.createElement（'div'），
volume_button=document.createElement（'button'）；
volume.className='mejs__buttonmejs__volumeminus-button'；
volume_button.type='button'；
volume.appendChild（音量按钮）；
控件。追加子对象（卷）；
音量按钮。addEventListener（'单击'，函数（）{
player.setVolume（player.volume>0？数学轮（（player.volume-.1）*10）/10:0）；
})
};
新MediaElementPlayer（音频播放器）；

HTML:

$('video,audio').mediaelementplayer({
    features: ['loop','playpause','current','progress','duration','fullscreen'],
    alwaysShowControls: true,
});

var audio_player = document.getElementById('audio-player').children[0];

MediaElementPlayer.prototype.buildvolume_plus = function(player, controls) {
  var
    volume = document.createElement('div'),
    volume_button = document.createElement('button');
  volume.className = 'mejs__button mejs__volumeplus-button';
  volume_button.type = 'button';
  volume.appendChild(volume_button);

  controls.appendChild(volume);

  volume_button.addEventListener('click', function() {
    player.setVolume( player.volume < 1 ? Math.round( (player.volume + .1 )  * 10) / 10 : 1 );

  })
};
MediaElementPlayer.prototype.buildvolume_minus = function(player, controls) {
  var
    volume = document.createElement('div'),
    volume_button = document.createElement('button');
  volume.className = 'mejs__button mejs__volumeminus-button';
  volume_button.type = 'button';
  volume.appendChild(volume_button);

  controls.appendChild(volume);

  volume_button.addEventListener('click', function() {
    player.setVolume( player.volume > 0 ? Math.round( (player.volume - .1 )  * 10) / 10 : 0 );
  })
};

new MediaElementPlayer(audio_player);

<div id="audio-player">
  <audio src="http://example.com" width="220" height="60" controls data-mejsoptions=\'{"features": ["playpause", "volume_plus", "volume_minus"]}\'></audio>
</div>