防止HTML5视频本机控件出现在鼠标悬停时

Question

我在网页中嵌入了HTML5视频。 由于各种原因，我无法访问视频标签本身，尽管可以通过iFrame对其进行访问。 通过JavaScript，我运行了以下代码：

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

其中“ videoElement”是对视频标签的DOM对象的引用。

视频会静音，这意味着它会响应设置“静音”属性，但是即使将“ controls”属性删除，当鼠标悬停在视频上时，本机控件仍会出现。

谁能发现我在做什么错？

编辑：

这是我正在使用的代码，它使用Kaltura平台，因此可能没有多大意义：

<script src="http://cdnapi.kaltura.com/p/{PARTNER_ID}/sp/{PARTNER_ID}00/embedIframeJs/uiconf_id/{uiConfId}/partner_id/{PARTNER_ID}"></script>

<script>
    mw.setConfig('Kaltura.LeadWithHTML5', true);
    mw.setConfig('EmbedPlayer.NativeControls', true);
    mw.setConfig('EmbedPlayer.EnableRightClick', false);
    mw.setConfig('controls', false);

    kWidget.embed({
            'targetId': 'kaltura_player_0000000000',
            'wid': '_000000',
            'uiconf_id': '000000',
            'entry_id': '1_000000',
            'flashvars': {
                'controlsHolder.includeInLayout': false,
                'controlsHolder.visible': false,
                'externalInterfaceDisabled': false,
                'loop': false,
                'autoPlay': true,
                'autoMute': true
            },
            'params': {
                'wmode': 'transparent'
            },
            readyCallback: function( playerId ){
                var kdp = $('#kaltura_player_0000000000_ifp').contents().find('video');

                // This is where I attempt to remove the controls attribute:

                kdp[0].removeAttribute('controls');
                kdp[0].muted = true;
            }
    });
</script>

然后，这个Kaltura库创建一个iFrame，并为用户的设备/浏览器（无论是HTML5视频，Flash等）填充适当的媒体播放器。缺点是您失去了一定的控制权，并且仅限于Kaltura允许您配置。

Answer 1

更新：

我发现很难发现如何自定义Kaltura Media Player的外观和感觉，花了很长时间阅读文档并进行了实验，但是以下冗长的方法才是我最终如何管理它的方法：

---

我为Kaltura编写了一个自定义插件，然后将自己的功能放在该插件中：

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

上面的代码配置了基本播放器，然后插件添加了我的自定义控件并将其绑定到播放器，而自定义css文件隐藏了eplayer附带的控件：

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

});

最后，这是自定义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;
}

Answer 2

请尝试以下操作：

videoElement.controls = false