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

【问题标题】：Replace default play button on Brightcove's Smart Player on mobile devices替换移动设备上 Brightcove 智能播放器上的默认播放按钮
【发布时间】：2013-10-30 07:00:48
【问题描述】：

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

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

我想转这个：

进入这个：

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

【问题讨论】：

标签： iframe video html5-video brightcove

【解决方案1】：

您可以使用在播放器 iframe 中运行的 javascript player plugin 来执行此操作。使用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);
    }

}());

【讨论】：