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

Question

我想在 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 不支持高清开/关按钮。引用 http://mediaelementjs.com/作者:约翰迪尔

Answer 1

您需要按如下方式进行(这是循环按钮的示例):

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,
});