防止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