모든 HTML5 비디오 끄기

Question

하나의 비디오가있는 사이트에서 모든 HTML5 비디오를 끄는 방법을 찾고 있습니다. 모달 창을 사용하여 콘텐츠를 표시하는 앱을 개발하고 있습니다. 이 콘텐츠 중 일부는 HTML5 동영상입니다. 사용자가 동영상을 재생 한 다음 해당 동영상이 포함 된 모달 창을 닫으려고 결정하면 동영상을 중단하고 싶습니다.

내가 같은 방법을 시도했습니다 다음

function stopVideo() { 
    // Make sure to turn off and reset the video 
    $('.html5-video').each(function(index, element) { 
     $(this).get(0).currentTime = 0; 
     $(this).get(0).pause(); 
    }); 
} 

이 Safari에서 잘 작동; 그러나 FireFox와 Chrome에서는 요소가 숨겨져있어 더 이상 사용할 수 없다는 오류가 발생합니다. 누구나 안정적으로 모든 비디오를 중단하는 방법에 대한 아이디어가 있습니까?

감사합니다.

Answer 1

우선, jQuery에 대해 배워야 할 것이 있습니다. $() (일부 인수와 함께)를 호출 할 때마다 성능에 나쁜 새로운 jQuery 객체가 생성됩니다. 당신에게 같은 인수 $()를 호출 할 경우이 될 것입니다 귀하의 경우, 그래서 당신은 결과를 캐시한다 :

var video_object = $(this).get(0); 
video_object.currentTime = 0; 
video_object.pause(); 

을 둘째, 때 jQuery를, 문맥에서 가진 각 루프 함수 (this)와 두 번째 인수는 html-objects입니다. 따라서 $() - 메소드로 래핑 한 다음 .get (0)을 수행하는 것은 의미가 없습니다.

그래서이는 방법과 동일 : 지금 백업 문제에

function stopVideo() { 
    // Make sure to turn off and reset the video 
    $('.html5-video').each(function(index, element) { 
     element.currentTime = 0; 
     element.pause(); 
    }); 
} 

. 위의 코드가 오류없이 작동하고있는 것 같습니다 (예 : http://jsfiddle.net/klaascuvelier/fypAR/)