2012-04-19 2 views
2

JQuery Reveal 플러그인을 사용하여 간단한 플래시 폴백을 사용하여 HTML5 비디오를 보여줍니다. Reveal은 IE8, IE9, Firefox, Chrome, Safari, Win XP, Win 7, OS X, iPad 2 및 Android 2.3에서 잘 작동합니다.JQuery ZURB Reveal Plugin - 가까운 방법으로 동영상을 종료하십시오.

동영상을 표시하는 데만 사용되며 한 페이지에 여러 개의 동영상을 표시 할 때도 잘 작동합니다.

모달 창에 Esc 키와 배경을 클릭하는 것과 같이 작동하는 "닫기"링크가 있습니다. 그러나. . . 난 단지

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

가 어떻게 그것은 또한에 대한 비디오를 일시 중지 할 수 있도록 코드를 추가 할 HTML 페이지에 다음 스크립트를 추가하여 가까운 링크에 대한 폐쇄 비디오를 일시 정지하는 방법을 찾을 수 있었다 Esc 키와 배경 클릭?

동영상을 일시 중지하면 모달 창을 닫을 때 동영상이 계속 재생되지 않으며 그만하면됩니다.

관련 jquery.reveal.js 파일을보고 모든 닫는 이벤트를 볼 수 있지만이를 추가하는 방법에 대한 단서가 없으므로 분명히 JavaScript에서도 n00b가 아닙니다. (LOL, 완전히 변경하거나 변경 사항에 영향을 미치지 않습니다.).

감사합니다.

http://subquark.com/html5/lightbox/course.htm 현재 테스트 샘플은

답변

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'); 
    });  

내가 (끝) 표시하여 별도의 코드를 추가합니다.

희망이 도움이됩니다.

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") { 

이 아직도 크롬에 표시되는 iframe을의로 실행 문제를 해결, 그리고 비디오를 재생 중지합니다.

+0

Jesse! 그 자리 였어! 감사합니다. John, 귀하의 기술은 잘 작동합니다.) – user1344843

+0

안녕하세요, 문제는 내가 이것을 경험하고 있는데, 동영상을 닫은 후 동영상을 다시 실행하려고하면 모달이 드롭되지만 동영상이 없습니다. 모달. 모달과 비디오가 의도 한대로 작동하려면 페이지를 새로 고쳐야합니다. – umbregachoong