Prevent HTML5 Video native controls from appearing on mouse hover

Question

I have a HTML5 video embedded in a webpage. For various reason I do not have access to the video tag itself, though I can access it through an iFrame. Via JavaScript, I have run the following code:

videoElement.removeAttribute('controls');
videoElement.muted = true;

where 'videoElement' is a reference to the DOM object of the video tag.

The video mutes, which means its responding to setting the 'mute' property, but the native controls still appear when the mouse hovers over the video, even though I have removed the 'controls' attribute.

Can anyone spot what I'm doing wrong?

EDIT:

Here is the code I'm using, it uses the Kaltura platform, so might not make much sense:

This Kaltura library then creates an iFrame and populates it the appropriate media player for the user's device / browser, whether it's HTML5 video, Flash etc. The drawback is that you lose a certain amount of control, and are limited to what Kaltura allows you to configure.

SimBot · Accepted Answer

UPDATE:

I found it very hard to discover how to customise the look and feel of the Kaltura Media Player, took a long time of reading the docs and experimenting, but the following long-winded aproach is how I finally how I managed it:

I wrote a custom plugin for Kaltura, and then put my finctionality in that plugin:

kWidget.embed({
    'targetId': 'kaltura_player_0000000000',
    'wid': '_000000',
    'uiconf_id': 00000000,
    'flashvars': {
        'controlsHolder.includeInLayout': false,
        'controlsHolder.visible': false,
        'externalInterfaceDisabled': false,
        'loop': false,
        'autoPlay': true,
        'autoMute': true,
        'IframeCustomPluginCss1' : 'assets/css/custom_styles.css?sid=',
        "video-component": {
            'plugin': true,
            'iframeHTML5Js' : 'assets/js/custom_component.js?sid='
        },
        readyCallback: function(playerId) {
            var kdp = document.getElementById(playerId);

            kdp.addJsListener( 'playerStateChange', function(playerState, playerId) {
                if (['playing','paused'].indexOf(playerState) > -1) {
                    // declared in custom_component.js
                    updateStateButton();
                }
            }
        }
    }
});

The code above configures the basic player, then the plugin adds my custom controls and binds them to the player, and a custom css file hides the controls th eplayer ships with:

mw.kalturaPluginWrapper(function() {

    mw.PluginManager.add( 'video-component', mw.KBaseComponent.extend({

        defaultConfig: {
            parent: "videoHolder",          // the container for the button 
            order: 41,                      // the display order ( based on layout )
            displayImportance: 'low',       // the display importance, determines when the item is removed from DOM
            align: "right",                 // the alignment of the button

            cssClass: "kaltura-logo",       // the css name of the logo
            href: 'http://www.kaltura.com', // the link for the logo
            title: 'Kaltura',               // title
            img: null                       // image
        },
        getComponent: function() {
            console.log('running custom video component');

            if (!this.$el) {
                var playPauseBtn = document.createElement('img');
                playPauseBtn.setAttribute('id', 'play-pause');
                playPauseBtn.setAttribute('src', 'assets/images/pause.png');

                var muteButton = document.createElement('img');
                muteButton.setAttribute('id', 'video-volume');
                muteButton.setAttribute('src', 'assets/images/volume_on.png');

                this.$el = document.createElement('div');
                this.$el.setAttribute('id', 'custom-video-controls');
                this.$el.setAttribute('id', 'custom-video-controls');

                this.$el.appendChild(playPauseBtn);
                this.$el.appendChild(muteButton);

                var videos = document.getElementsByTagName('video');
                var video = videos[0];

                var togglePlayPauseBtn = function(buttonClicked) {
                    // player state can be toggled via clicking on the video, or on the play / pause button
                    // if the play / pause button is clicked it will trigger the 'playerStateChange' event
                    // which will trigger this function again, the following statements prevent a race condition
                    if (window.buttonClicked) {
                        window.buttonClicked = false;
                        return false;
                    }
                    if (buttonClicked) {
                        window.buttonClicked = true;
                    }

                    // togle video state
                    if (video.paused) {
                        video.play();
                        $(playPauseBtn).attr('src', 'assets/images/pause.png');
                    } else {
                        video.pause();
                        $(playPauseBtn).attr('src', 'assets/images/play.png');
                    }
                }

                window.parent.updateStateButton = function() {
                    togglePlayPauseBtn();
                }

                $(playPauseBtn).on('click', function() {
                    togglePlayPauseBtn(true);
                });

                $(muteButton).on('click', function() {
                    if (!video.muted) {
                        video.muted = true;
                        $(muteButton).attr('src', 'assets/images/volume_on.png');
                    } else {
                        video.muted = false;
                        $(muteButton).attr('src', 'assets/images/volume_off.png');
                    }
                });

                setTimeout(function() {
                    $(playPauseBtn).fadeOut('slow');
                    $(muteButton).fadeOut('slow');
                }, 2000);

                $('.mwPlayerContainer').on('mousemove', function() {
                    clearInterval(window.playPauseFadeOut);

                    $(playPauseBtn).fadeIn(100);
                    $(muteButton).fadeIn(100);

                    window.playPauseFadeOut = setTimeout(function() {
                        $(playPauseBtn).fadeOut('slow');
                        $(muteButton).fadeOut('slow');
                    }, 1200);
                });
            }

            return $(this.$el);
        }
    }) );

});

Finally, here is the custom css:

.mwPlayerContainer .playerPoster, 
.mwPlayerContainer .largePlayBtn, 
.mwPlayerContainer .controlBarContainer,
.mwPlayerContainer .topBarContainer  {
    display: none !important;
}
.mwPlayerContainer .videoHolder #custom-video-controls {
    text-align: center;
}
.mwPlayerContainer .videoHolder #custom-video-controls #play-pause {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -80px 0 0 -80px;
    border: 0;
    cursor: pointer;
}
.mwPlayerContainer .videoHolder #custom-video-controls #video-volume {
    position: absolute;
    left: 90%;
    top: 50px;
    border: 0 !important;
}

Prevent HTML5 Video native controls from appearing on mouse hover

Answers (2)

Related Questions