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

how to add custom button inside html player using mediaelement,js script

本文关键字：播放器 添加 自定义 按钮 html mediaelement 何使用 js 脚本      更新时间：2023-10-04

我想在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

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

您需要按如下方式执行（这是一个循环按钮的示例）：

MediaElementPlayer.prototype.buildloop = function(player, controls, layers, media) {
    var
        // create the loop button
        loop =
        $('<div class="mejs-button mejs-loop-button ' + ((player.options.loop) ? 'mejs-loop-on' : 'mejs-loop-off') + '">' +
            '<span></span>' +
        '</div>')
        // append it to the toolbar
        .appendTo(controls)
        // add a click toggle event
        .click(function() {
            player.options.loop = !player.options.loop;
            if (player.options.loop) {
                loop.removeClass('mejs-loop-off').addClass('mejs-loop-on');
            } else {
                loop.removeClass('mejs-loop-on').addClass('mejs-loop-off');
            }
        });
}

然后，在创建视频播放器时，您可以将变量添加到功能列表中，例如：

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

谢谢@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);

HTML:

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