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


91

특정 시점에서 시작하려면 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> 

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


2
어떤 브라우저? 통화를 몇 밀리 초 지연 해 보셨습니까? 어쩌면 완전히 비디오 요소를로드하는 데 시간이 더 조금 복용
오르 티

답변:


130

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

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

2
Safari에서는 작동하지 않습니다. loaddata 이벤트도 시도했습니다. 어떤 아이디어?
Simon Perepelitsa 2011

신경 쓰지 마. 이것은 WEBM 형식의 문제입니다. MP4가 잘 작동합니다.
Simon Perepelitsa 2011

사용 'durationchange'이벤트와 재생중인 비디오를 변경하기 전에 항상 전화 일시 정지
제이슨 화이트

53

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

여기에 예가 있습니다.

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


브라우저 지원이 좋습니다. 모든 HTML5 지원 브라우저는 최소한 기본 임시 미디어 조각도 지원한다고 생각합니다.
Jim S.

@michaelhanon, IE를 위해 polyfill을 작성하는 것이 다소 쉬울 것입니다. 내가 기회를 얻는 경우에 내가 할 수있는 ... 비디오의 시간을 변경하기 위해 자바 스크립트를 사용하여 쿼리 매개 변수를 찾을 지원하지 않을 경우, 브라우저를 감지 URL을 헤어
gdgr

END 시간을 설정하는 조각이 있습니까?
DGoiko

점 뒤에 몇 분의 1 #t=17.79
초도 허용됩니다

51

JAVASCRIPT를 사용하지 않고

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

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

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


두 번째 숫자는 시작하기 위해로드 된 비디오의 양을 끝내지 않는 것 같습니다. 첫 번째 숫자는 작동했습니다. 이견있는 사람?
Martian2049

이것은 정말로 잘 작동하지 않습니다. 브라우저는 여전히이 원하는대로, 어쩌면 그냥 시작하고 결정 곳에서 끝만큼 미리로드 만 프리로드는 ... 멈추지 않았다
Martian2049

28

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

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

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


두 번째 숫자는 시작하기 위해로드 된 비디오의 양을 끝내지 않는 것 같습니다. 첫 번째 숫자는 작동했습니다. 이견있는 사람?
Martian2049

브라우저로 작업 할 때 W3C 사양 및 caniuse.com을 확인하여 기능이 얼마나 널리 지원되는지 확인하는 것이 좋습니다. (최고의 StackOverflow 답변은 사양에 대한 링크입니다.)이 경우 'Media Fragments'라고하며 사양은 여기에 있습니다. w3.org/TR/media-frags
Michael Scheper

3

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


loadedmetadata가 올바른 이벤트라고 생각하지만 dataloaded를 수신하지 않는 한 seekable.length 0 (OSX의 Safari에서만)을 얻었습니다. 감사합니다
Statuswoe 2015-07-02

1
왜 이것이 반대 투표였습니까? OP에서 제공하는 예제와 직접 관련이 없을 수 있지만 사실은 정확하고 질문의 일반적인 주제와 관련이 있습니다.
JayPea

3

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


1
이것은 약 5 년 전에 작성된 두 개의 다른 고득점 답변의 반복 일뿐입니다.
Michael Scheper
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.