0

1 人のメイン プレーヤーでビデオ ギャラリーを作成しています。

ユーザーがリンクをクリックすると、YouTube ビデオがメインのビデオ プレーヤーで再生されます。一部のビデオはフォールドの下に表示されるため、ページを上にスクロールして、ユーザーがメインのビデオ プレーヤーを表示できるようにします。

ユーザーがタグをクリックしたときに、ダブル アクションが必要です。1) 動画を開く 2) 上にスクロール

このようなことは可能ですか？

助けてください。

ありがとうございました

4

1 に答える 1

0

探している機能を備えた簡単なデモを作成しました。<a>動画の「リンク」は単にページ上のイベントのトリガーとして機能するため、アンカー要素を使用する必要さえありません。span、またはその他の要素を同じように簡単に使用できます (bodyセレクターをより具体的なコンテナー要素のセレクターに置き換えることもできます)。

$(document).ready(function(){ 
    $('#video-link').on('click', function(e) {
        //Scroll the user down to the video
        $('body').animate({
            'scrollTop': $('#video-player').offset().top + 'px',
        }, 400, function() {
            //Start playing the embedded video
            var src = $('#video-player').attr('src');
            $('#video-player').attr('src', src + '?autoplay=1');
        });
    });
});

このコードは、埋め込み動画のsrc属性に autoplay タグを追加することで、動画の再生をトリガーすることに注意してください。これにより、他の方法で動画をトリガーしようとした場合に発生する可能性のあるクロスドメインのセキュリティ制限を回避できます。

また、このソリューションでは、1 つのアクション (ビデオの再生など) を別のアクション (ページのスクロールなど) にスケジュールすることにも注意してください。これにより、ビデオが表示されないためにページがまだスクロールしている間に、ユーザーがビデオのコンテンツを見逃すことがなくなります。

jsFiddle デモ: http://jsfiddle.net/nzkKv/5/

于 2013-10-11T22:13:40.347 に答える