[TIL] 0609 | video 태그의 영상을 특정 구간만 재생하도록 하기

Teasan·2023년 6월 9일
0

TIL

목록 보기
28/36
post-thumbnail
post-custom-banner

페이지의 autoplay 되는 비디오 영상을 특정 구간만 재생하도록 요청을 받았다. 구글링을 해보니 video 요소에 url을 지정할 때 재생할 미디어 부분을 지정하는 추가 정보(특정 구간 재생)를 선택적으로 포함할 수 있다는 사실을 알게 되었다.

⚡️ When specifying the URI of media for an or element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.

비디오 영상 컨텐츠의 시간 범위 설정은 다음과 같은 형태로 설정해주면 된다.

#t=[start time][,end time]

video 태그에 삽입된 영상의 특정 구간만 재생하기를 원한다면, video 요소에 영상 주소를 url로 지정할 때 영상 주소의 끝에 해당 시간 범위 설정을 같이 포함해주면 된다. 예를 들면,

<video autoplay src="http://가상의비디오경로.mp4" />

라는 비디오 태그가 있을 때

10초에서 20초 사이의 범위에서 재생하도록 하기 위해서는 아래와 같이 설정해주면 된다.

<video autoplay src="http://가상의비디오경로.mp4#t=10,20" />

만약, 비디오가 처음 시작하고 나서 10초까지 재생하기를 원한다면,

<video autoplay src="http://가상의비디오경로.mp4#t=,10" />

으로 설정해주면 된다!



⚡️ 참조


https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
https://stackoverflow.com/questions/39200247/how-can-i-set-a-end-time-value-to-a-video-played-on-a-browser-using-html

profile
일단 공부가 '적성'에 맞는 개발자. 근성있습니다.
post-custom-banner

0개의 댓글