2

私は JQuery Reveal プラグインを使用して、HTML5 ビデオを単純な Flash フォールバックで表示することに成功しています。Reveal は、IE8、IE9、Firefox、Chrome、Safari、Win XP、Win 7、OS X、iPad 2、および Android 2.3 でうまく機能します。

ビデオを表示するためにのみ使用されており、1 つのページに多くのビデオを表示する場合にも問題なく動作します。

Escキーと背景をクリックするのと同じように機能するモーダルウィンドウに「閉じる」リンクがあります。でも 。. . HTMLページに次のスクリプトを追加することで、閉じるリンクの閉じたビデオを一時停止する方法を見つけることができました

$('.close-reveal-modal').click(function() {
    $('video, audio').each(function() {
        $(this)[0].pause();    
    });
});

Esc キーとバックグラウンド クリックでビデオを一時停止するコードを追加するにはどうすればよいですか?

ビデオを一時停止すると、モーダルウィンドウが閉じられたときにビデオが再生されなくなります。それが私がする必要があることです。

関連するjquery.reveal.jsファイルを見て、すべての終了イベントを確認しますが、それを追加する方法がわからないためです（笑、完全に壊すか、変更には影響しません!)。

ありがとう！

http://subquark.com/html5/lightbox/course.htm現在のテスト サンプル

4

2 に答える 2

0

私はこれと同じ問題を抱えていて、ソースを編集する場所を見つけました。ファイルjquery.reveal.jsの95〜124行目：

  modal.bind('reveal:close', function () {
    if(!locked) {
        lockModal();
        if(options.animation == "fadeAndPop") {
            modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
            modal.animate({
                "top":  $(document).scrollTop()-topOffset + 'px',
                "opacity" : 0
            }, options.animationspeed/2, function() {
                modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
                unlockModal();
            });                 
        }   
        if(options.animation == "fade") {
            modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
            modal.animate({
                "opacity" : 0
            }, options.animationspeed, function() {
                modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
                unlockModal();
            });                 
        }   
        if(options.animation == "none") {
            modal.css({'visibility' : 'hidden', 'top' : topMeasure});
            modalBG.css({'display' : 'none'});  
        }       
    }
    //ADD YOUR EXTRA EVENTS HERE!
    modal.unbind('reveal:close');
  });

私がマークした場所（最後）に追加のコードを追加します。

お役に立てれば！

于 2012-07-07T01:17:52.000 に答える
0

YouTube iframe を使用してライトボックスにビデオを表示していたサイトに似たものを修正しました。私はこれからコードを変更しました：

  modal.bind('reveal:close', function () {
    if(!locked) {
        lockModal();
        if(options.animation == "fadeAndPop") {

これに：

  modal.bind('reveal:close', function () {
    if(!locked) {
        lockModal();
        modal.children('iframe').remove(); // Remove iframes.
        if(options.animation == "fadeAndPop") {

これにより、Chrome で iframe がまだ表示されているという問題が解決され、ビデオの再生が停止します。

于 2012-11-21T18:49:25.230 に答える