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

Question

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

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

我想把这个:

进入这个:

有人知道怎么做吗？我不能只使用 JavaScript 访问播放器，因为它位于由 Brightcove 服务填充的 iframe 中。

Answer 1

您可以使用 javascript player plugin 来做到这一点，它在播放器 iframe 中运行。使用 overlay API创建自定义播放按钮和 playOverlayCallbacks()以防止显示默认播放覆盖。

像这样的东西可以在插件中工作:

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

}());