问题描述:

I wanted to add a extra button "HD" near caption inside html5 player.

Added this piece of code inside mediaelementplayer.js file.

//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

can anyone help to solve this issue?

As of now mediaelementplayer.js by johndyer doesnot support HD on/off button.

Reference http://mediaelementjs.com/ by johndyer

网友答案:

You need to do it as follows (this is an example for a Loop button):

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

Then, when creating your video player you can just add your variable to the features list for example:

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