2017-10-15 4 views
0


동영상 재생이 시작된 5 초 후에 내 비디오에 'onclick'이벤트 수신기를 추가하려고합니다. 사용자가 특정 URL로 리디렉션해야합니다. 현재 js 코드 :비디오가 재생 된 후 작업을 수행하는 데 몇 초가 걸리지 않습니까?

문제는 'timeupdate'가 실행될 때마다 함수가 실행되고있는 것 같습니다. 하지만 비디오 currenttime이 5에 도달하면 onclick 처리기를 비디오에 할당 한 다음 myfunc 실행을 마칩니다.
어떻게 할 수 있습니까? 내 목적에 부합하는 더 좋은 방법이 있습니까?

+0

하나 (HTTPS :

function myfunc() { if (this.currentTime > 5) { location.href = "http://www.google.com"; }; } 

이 전체 샘플 코드 (HTML 및 자바 스크립트 모두 포함)입니다 : //www.w3schools.com/tags/av_event_timeupdate.asp)). 이벤트가 발생할 때마다 함수가 실행되는 것을 원하지 않는다면 먼저 video 요소에'click' 이벤트를 추가 한 다음'currentTime' 속성을 사용하도록 제안합니다. – CrisMVP3200

+0

@ CrisMVP3200 샘플 코드 pls를 제공해 주시겠습니까? –

+0

@MissCode 예, 아래 확인;) – CrisMVP3200

답변

1

timeupdate 이벤트 (동영상이 재생 될 때마다 기능이 실행되거나 재생 위치가 이동됨을 의미) 대신에 click 이벤트 만 사용하는 것이 좋습니다 addEventListener 메서드 또는 onclick 속성 사용).

/* Attach the click event with the addEventListener() method 
    By default, the third parameter, useCapture, is false */ 
document.getElementById("my_video_1").addEventListener("click", myfunc); 

/* Attach the click event with the onclick property */ 
document.getElementById("my_video_1").onclick = myfunc; 

그런 다음 click 이벤트 trigerring에서 실행하는 함수에서 비디오의 현재 시간이 5 초를 초과하는지 확인합니다. 은`timeupdate` 이벤트가 비디오 ([W3 스쿨] 재생되는 때입니다 해고 두 circunstances의

<!DOCTYPE html> 
<html lang="es"> 
    <head> 
     <meta charset="UTF-8"/> 
    </head> 
    <body> 
     <video id="my_video_1" width="426px" height="240px" autoplay controls muted> 
      <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/> 
     </video>  
    </body> 
    <script> 
     document.getElementById("my_video_1").addEventListener("click", myfunc); 
     // document.getElementById("my_video_1").onclick = myfunc; 

     function myfunc() { 
      if (this.currentTime > 5) { 
       location.href = "https://www.google.com"; 
      }; 
     } 
    </script> 
</html> 
+0

예. 이것은 잘 작동합니다. Txx –