HTML5 동영상 종료 이벤트가 여러 번 호출되었습니다.

Question

HTML5 및 종료 된 이벤트에서 동영상을 재생하는 데 문제가 있습니다. 일부 HTML 컨텐트를보고 만료 된 후에 비디오를 재생합니다. 동영상이 종료 되었습니까? 다시 HTML 콘텐츠가 표시됩니다. 이것은 반복해야합니다. 프레 젠 테이션을 위해.

제 첫 번째 실행이 끝난 후 종료 된 이벤트가 반복적으로 발생하고 HTML 콘텐츠가 false로 표시됩니다. 여기

코드의 일부입니다

function playVideo() { 
    var video = $('video')[0]; 
    video.addEventListener('ended', function() { 
     $('video').hide(); 
     fadeShow(); 
    }, false); 
    video.play(); 
} 

function fadeHide() { 
    $('#content').fadeOut(1200, function() { 
     $('div ul[id^=item]').each(function() { 
      $(this).hide(); 
     }); 
     $('li[class^=visitor] span[id]').each(function() { 
      $(this).hide(); 
     }); 
     playVideo(); 
    }); 
} 

fadeHide(); 함수는 두 번, 바로 video.addEventListener('ended', function() {}; 채우기라고 여러 번 호출하지 않습니다. `fadeshow(); HTML 내용을 표시합니다. 실제로 저는 최신 버전의 Chrome을 사용합니다.

누구가 잘못되었는지 아이디어가 있습니까?

HTML 코드입니다. 나는 css로 비디오를 숨긴다.

<video> 
    <source src="video/mp4/xxx.mp4" type="video/mp4" /> 
    <source src="video/ogg/xxx.ogg" type="video/ogg" /> 
    <source src="video/webm/xxx.webm" type="video/webm" /> 
    Your browser does not support the video tag. 
</video> 

Greetz

당신은 한 번 이벤트 리스너를 할당해야하거나 플레이 매번에 할당 할 때, 다시 이벤트 리스너를 분리 할 필요가

Answer 1

.

function playVideo() { 
    var video = $('video')[0]; 
    video.addEventListener('ended', function() { 
     $('video').hide(); 
     video.removeEventListener('ended'); <<<<<<< 
     fadeShow(); 
    }, false); 
    video.play(); 
} 

편집 :이 fiddle와 크롬에서 테스트하고의 EventListener를 제거 실제로 경우에도이 여러 번 발생하기 시작합니다. 이벤트 리스너를 제거해도 올바르게 작동하지 않는 문제가있는 것 같습니다.

이벤트 바인딩/바인딩 해제를 jQuery로 변경해야하며 종료 된 이벤트는 하나뿐입니다.

function playVideo() { 
    var video = $('video')[0]; 
    $('video').bind('ended', function() { 
     $('video').unbind('ended'); 
     $('video').hide(); 
     fadeShow(); 
    }); 
    video.play(); 
} 

그리고 your fiddle

Answer 2

대신 이벤트 리스너를 추가 한 후 수동으로 제거 (짧은 비디오) 업데이트, 단순히 그래서 호출 명령에 내장 된 "하나"(https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#one-first-second-third-)

사용해보십시오 코드는 다음과 같이 어느 정도가 될 것이다 :

function playVideo() { 
 
    var video = $('video')[0]; 
 
    $('video').one('ended', function() { 
 
     $('video').hide(); 
 
     fadeShow(); 
 
    }); 
 
    video.play(); 
 
}

조금 간단하고 API 자체에 더 의존적입니다. API의 기능이 여러 브라우저와 운영 체제에서 커뮤니티의 많은 사람들에 의해 여러 번 테스트 되었기 때문에 일반적으로 좋은 방법이라고 생각합니다.