[javascript] 로드 할 때 특정 위치에서 HTML5 비디오를 시작 하시겠습니까?

특정 시점에서 시작하려면 HTML5 비디오가 필요합니다. 50 초 이후의 시간을 가정 해 봅시다.

시도했지만 예상대로 작동하지 않습니다. 내가 뭘 잘못하고 있니?

다음은 코드입니다.

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" />
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script>

페이지가로드되면 처음부터 재생이 시작됩니다. 하지만 잠시 후처럼 재생 중에 이것을 호출하면 정상적으로 작동합니다. 내가 놓친 것이 있습니까?



답변

특정 시간을 검색하려면 브라우저가 비디오 길이를 알 때까지 기다려야합니다. 따라서 다음과 같은 ‘loadedmetadata’이벤트를 기다리고 싶다고 생각합니다.

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);


답변

Media Fragments URI 와 직접 연결할 수 있으며 파일 이름을 file.webm # t = 50으로 변경하면됩니다.

여기에 예가 있습니다.

이것은 매우 멋지다, 당신은 모든 종류의 것을 할 수있다. 하지만 현재 브라우저 지원 상태를 모릅니다.


답변

JAVASCRIPT를 사용하지 않고

#t=[(start_time), (end_time)]미디어 URL 끝에 추가 하기 만하면 됩니다. 유일한 단점은 비디오가 종료 시간을 나타내는 데 걸리는 시간을 알아야한다는 것입니다.
예:

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

참고 : IE에서는 지원되지 않습니다 .


답변

html5에서 비디오 태그를 사용할 때 비디오 시작 및 종료 시간을 조정합니다.

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

여기서 쉼표의 왼쪽은 시작 시간 (초)이고 쉼표의 오른쪽은 종료 시간 (초)입니다. 시작 시간에만 영향을 미치려면 쉼표와 종료 시간을 삭제하십시오.


답변

HLS 소스 용 Safari Mac에서는 메타 데이터 이벤트 대신 loadeddata 이벤트를 사용해야했습니다.


답변

#t=10,20조각을 사용하면 저에게 효과적이었습니다.


답변