3

おそらく、答えを見つけるために適切な用語が必要なだけです。ただし、他の誰かがすでにこの問題に遭遇しており、その解決方法をすぐに知っていると思います。

Brightcove のサービスと Smart Player を使用しています。Chromeless プレーヤーを構成し、ページのコントロールが API を使用して再生、一時停止などを行うため、すべてのコントロールを排除しようとしました。デスクトップでは、これで問題なく動作します。モバイル デバイス (iOS7 Safari) では、ビデオ プレーヤーに再生ボタン オーバーレイがあり、これを独自のグラフィックに置き換えたいと考えています。

私はこれを変えたい：

ここに画像の説明を入力

これに：

ここに画像の説明を入力

誰でもこれを行う方法を知っていますか? ブライトコーブ サービスで満たされた iframe 内にあるため、JavaScript を使用してプレーヤに到達することはできません。

4

1 に答える 1

3

これは、プレーヤーの iframe 内で実行されるJavaScript プレーヤー プラグインを使用して行うことができます。オーバーレイ 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);
    }

}());
于 2013-10-22T08:16:07.133 に答える