3

#videodiv私は現在divを持っています.HTML5ビデオプレーヤーを含むとしましょう( SublimeVideo、しかしそれは無関係な情報かもしれません)。ページ読み込み時#videodivはわずか 100px です。ユーザーが 内の任意の場所をクリックする#videodivと、jQuery で div を 250px に拡張したいと思います。

あなたはこう言っているかもしれません -- それは jQuery 関数が来るのと同じくらい簡単です。クリックしてアニメーション化するだけです! そして、あなたは正しいでしょう...

ここに問題があります:#videodivに含まれ、div 全体を埋めるHTML5 ビデオ プレーヤーは、発生したすべてのクリックをキャプチャします。これは、プレーヤーの再生/一時停止機能をトリガーするために行われますが、その後、プログラマーが含まれている div に jQuery クリック機能を設定することを禁止します。

幸いなことに、この状況で#videodivは、100% フルボディ幅の div であり、正確な高さは 100px です。したがって、上記の問題を念頭に置いて、別の方法は、ページの上部 100 ピクセルで発生する (div ではなく) HTML ドキュメント内のクリックをキャプチャできるかどうかを判断し、関数をトリガーすることです。

つまり、jQuery を使用して、ページの最初の 100 ピクセル内の任意の場所でマウス クリックを検出し、divvideodivを 250 ピクセルにアニメーション化するにはどうすればよいでしょうか?

代替/より良いソリューションは大歓迎ですが、jQuery が推奨される方法です。

4

2 に答える 2

1

このようなものが機能するはずです - ニーズに合わせて幅と高さの値を変更してください。pageX横向きでpageY縦向きなので、左上隅に 100x100 のスペースをマッピングしました。これもニーズに合わせて変更します。

// Bind the click event to the body - any static parent container will do
$('body').on('click', function(e) {

    // Fire the callback if the click was in the top 100px by 100px
    if (e.pageX <= 100 && e.pageY <= 100) {

        // Prevent crazy animations and redundant handling
        $(this).off('click'); 

        // Scale the video to the appropriate size
        $('#videodiv').animate({
            width  : '250px',
            height : '250px'
         }, 1000);
    }
});

ここにデモがあります：http://jsfiddle.net/bKm4U/

于 2013-02-20T19:02:58.130 に答える
0

ここにある別のStackOverflowの質問で提供されている次の回答でこの質問を解決しました：HTML5ビデオが終了したときを検出する

次の 2 つの手順だけです。

  1. onplayjQuery で検出する
  2. jQuery関数を実行

ご覧のとおり、HTML5 は非常に単純化されています。ドキュメントにもっと簡単にアクセス/検索できるようになればいいのにと思います。

于 2013-02-21T01:43:53.177 に答える