在移动设备上替换Brightcove的智能播放器上的默认播放按钮

Question

我很可能只需要正确的术语来找到答案;但是，我想其他人已经遇到过这个问题并立即知道如何解决它。

我正在使用Brightcove的服务和他们的智能播放器。我已经配置了一个Chromeless播放器，并试图消除所有控件，因为我的页面控件将使用他们的API来播放，暂停等。在桌面上，这可以正常工作。在移动设备（iOS7 Safari）上，视频播放器上有一个播放按钮覆盖，我想用自己的图形替换它。

我想转此：

进入这个：

任何人都知道如何做到这一点？我不能只使用JavaScript进入播放器，因为它位于由Brightcove服务填充的iframe中。

Answer 1

您可以使用javascript player plugin执行此操作，该overlay API在播放器iframe内运行。使用playOverlayCallbacks()创建自定义播放按钮和{{3}}，以防止显示默认播放叠加层。

这样的东西可以在插件中使用：

(function() {

    function addPlayOverlay() {

        var overlay = videoPlayer.overlay();

        $(overlay).css('background', 'transparent url("http://example.com/playbutton.png") no-repeat center center')
            .width($(document).width())
            .height($(document).height())
            .css("-webkit-box-shadow","inset 0 0 150px rgba(0,0,0,0.9)")
            ;

        $(overlay).click(function(){
            // Play when custom overlay is clicked
            videoPlayer.play();
        });

        videoPlayer.playOverlayCallbacks({
            show: function() {
                // Show custom overlay
                $(overlay).fadeIn();
                // Prevent standard play overlay
                return false; 
            },
            hide: function() {
                // Hide play overlay
                $(overlay).fadeOut();
                return false;
            }
        });
    }

    var 
        bcplayer = brightcove.api.getExperience(),
        videoPlayer = bcplayer.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER),
        experience = bcplayer.getModule(brightcove.api.modules.APIModules.EXPERIENCE);;

    if (experience.getReady()) {
        addPlayOverlay();
    } else {
        experience.addEventListener(brightcove.player.events.ExperienceEvent.TEMPLATE_READY, addPlayOverlay);
    }

}());