javascript - 防止鼠标悬停时出现 HTML5 视频 native 控件

Question

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

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

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

视频静音，这意味着它响应设置“静音”属性，但当鼠标悬停在视频上时， native 控件仍然出现，即使我已删除“控件”属性。

有人能发现我做错了什么吗？

编辑:

这是我正在使用的代码，它使用 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();
                }
            }
        }
    }
});

上面的代码配置基本播放器，然后插件添加我的自定义控件并将它们绑定(bind)到播放器，自定义 css 文件隐藏播放器附带的控件:

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