HTML5 비디오 - 특정 시간에 비디오를 시작하고 x 시간 동안 재생합니다.

Question

특정 지역에서 로컬 비디오를 시작하고 특정 기간 동안 재생하도록 단추를 만들려고합니다. 특정 시점에 재생해야하지만 특정 기간 동안 재생하는 방법을 모릅니다.

다음은 코드입니다.

HTML :

<video id="myvideo" width="1000"> 
     <source src="video.mp4" type="video/mp4"> 
     Your browser does not support HTML5 video. 
</video> 
    <div> 
     <p> 
      <button id="playme">Play/Pause Video</button> 
     </p> 
     <p> 
      <button id="jump">Jump to 4 seconds</button> 
     </p> 
     <p> 
      <button id="jump2">Jump to 11 seconds</button> 
     </p> 
    </div> 

자바 스크립트 :

당신이 아마이 일반적인 코드 같은 것을 함께 연주의로 비디오의 currentTime 속성을 폴링 할 필요가 이것을 달성하기 위해

var myvideo = document.getElementById('myvideo'), 
playbutton = document.getElementById('playme'), 
jumplink = document.getElementById('jump'), 
jumplink2 = document.getElementById('jump2'); 

jumplink.addEventListener("click", function (event) { 
    event.preventDefault(); 
    myvideo.play(); 
    myvideo.pause(); 
    myvideo.currentTime = 4; 
    myvideo.play(); 
}, false); 

jumplink2.addEventListener("click", function (event) { 
    event.preventDefault(); 
    myvideo.play(); 
    myvideo.pause(); 
    myvideo.currentTime = 11; 
    myvideo.play(); 
}, false); 

playbutton.addEventListener("click", function() { 
    if (myvideo.paused) { 
     myvideo.play(); 
    } else { 
     myvideo.pause(); 
    } 
}, false); 

Answer 1

...

var button = document.getElementById('play') 
var video = document.getElementById('video'); 
var startTime = 10; 
var endTime = 20; 

button.addEventListener('click', playVideo, !1); 

function playVideo(e) { 

    function checkTime() { 
     if (video.currentTime >= endTime) { 
      video.pause(); 
     } else { 
      /* call checkTime every 1/10th 
       second until endTime */ 
      setTimeout(checkTime, 100); 
     } 
    } 

    video.currentTime = startTime; 
    video.play(); 
    checkTime(); 
} 

업데이트

어떻게 앱을 구현할 수 있는지 살펴 보겠습니다.

두 개의 '점프'버튼과 재생 버튼이 있습니다. 이 버튼 중 하나가 활성화되면 클릭 된 버튼의 HTML id에 따라 시작 시간과 종료 시간을 설정하는 단일 함수를 호출 할 수 있습니다. 그 값들은 이미 위에서 요약 한 함수와 같은 것으로 전달 될 수 있습니다. 클릭하면

로 시작 각각의 버튼에 이벤트 리스너를 할당하려면

... 여기

var myvideo = document.getElementById('myvideo'); 

/* add the same event and 
    handler function to each 
    of the three buttons */ 
var buttons = ['playme','jump','jump2']; 

buttons.forEach(function(bn) { 
    document.getElementById(bn).addEventListener(
     'click', buttonEvents, !1 
    ); 
}); 

하면 세 개의 HTML 버튼의 각각은 buttonEvents() 함수를 호출합니다. 이 인수 및 연극의로 시작 및 종료 시간을받는 기능 :이 함수는

function buttonEvents(e) { 
    /* get the id of the clicked button */ 
    var element_id = e.target.id; 
    /* E.G. element_id = 'playme', 'jump', or 'jump2' */ 

    /* declare variables before setting them */ 
    var timeStart = 0; 
    var timeEnd = 0; 

    /* set start and end values depending 
     on which button was clicked */ 
    switch(element_id) { 
     case 'playme': 
      /* example values... */ 
      timeStart = 0; 
      timeEnd = 100; 
      break; 
     case 'jump': 
      timeStart = 4; 
      timeEnd = 12; 
      break; 
     case 'jump2': 
      timeStart = 12; 
      timeEnd = 24; 
    } 

    /* call 'playVideo()' */ 
    playVideo(timeStart, timeEnd); 
} 

은 우리에게 뭔가를 줄 것 위에서 설명한 일반적인 기능으로 'playButton으로'기능을 결합 ... 이런 식으로 뭔가를 보일 수 있습니다 동영상이 일시 중지되었거나 재생중인 경우 새로운 시작 시간으로 점프하는 경우 ...

function playVideo(startTime, endTime) { 

    function checkTime() { 
     if (myvideo.currentTime >= endTime) { 
      myvideo.pause(); 
     } else { 
      /* call checkTime every 1/10th 
       second until endTime */ 
      setTimeout(checkTime, 100); 
     } 
    } 

    /* stop if playing (otherwise ignored) */ 
    myvideo.pause(); 
    /* set video start time */ 
    myvideo.currentTime = startTime; 
    /* play video */ 
    myvideo.play(); 
    /* check the current time and 
     pause IF/WHEN endTime is reached */ 
    checTime(); 
} 

도움이 되었기를 바랍니다.