your programing

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

lovepro 2020. 10. 15. 08:20
반응형

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


HTML5 비디오 (VP8 인코딩)를 재생하려고합니다. 내가 원하는 것은 특정 위치에서 연주하는 것입니다. 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

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


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


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

참고 URL : https://stackoverflow.com/questions/5981427/start-html5-video-at-a-particular-position-when-loading

반응형