2

アプリのモバイル向けに最適化されたランディング ページを構築しています。モバイルで YouTube 埋め込みコードの特定の動作を取得しようとしています。動画は、動画の特定の時間に開始および終了する必要があります。

埋め込みコードは次のとおりです。

<iframe id="player" type="text/html" width="100%" height="100%"
        src="http://www.youtube.com/embed/[ID]?html5=1&enablejsapi=1&showinfo=0&modestbranding=0&controls=0&rel=0&start=10&end=20&loop=1"
        frameborder="0"></iframe>

また、コードからオブジェクトを作成して、js API で埋め込みビデオを処理できるようにしています。また、念のために同じパラメーターを渡しています。(iFrame html は、onYouTubeIframeAPIReady 関数が呼び出されるときにテンプレートとして作成されます。

function onYouTubeIframeAPIReady() {

    var youtubeTemplate = $("#youtubeTemplate").html();

    $('#thumbnail-inner').html(_.template(youtubeTemplate, {
         //Params
    }));

    youtubePlayer = new YT.Player('player', {
        height: '100%',
        width: '100%',
        enablejsapi: 1,
        events: {
            'onReady' : onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError' : onPlayerError
        },
        rel: 0,
        playerVars: {
            modestBranding: 1,
            showinfo: 0,
            html5: 1,
            controls: 0
        },
        loop: 1,
        start: 10

    });

}

iOS 7 ブラウザーおよび Android 上の Chrome では意図したとおりに動作します。ただし、Android ストック ブラウザ (HTC one でテスト済み) では、次の動作が見られます。

  1. ビデオは開始点からではなく、最初から始まります
  2. ビデオは end パラメータを認識し、再生を停止します
  3. Android ストック ブラウザでは、埋め込みプレーヤーは、同じデバイスの Android Chrome の埋め込みプレーヤーとは異なって見えます。ビデオが読み込まれる前は、グレーのエンボス デザインです。

開始点を機能させる方法を知っている人はいますか?

ありがとう

4

0 に答える 0