본문 바로가기

개발/etc

[Html] Video Tag start_time, end_time

반응형

운영 중인 사이트에 고객이 올려놓은 동영상의 thumbnail 이미지가 동일하다는 문의가 들어왔다.

 

동영상의 첫 번째 프레임이 전부 같았던 문제.

슈퍼 하도급 용역은 동영상 프레임 문제니 동영상을 수정하라고 할 수 없으므로,

video src value에 start_time을 조정해준다.

※poster attr를 사용하여 직접 썸네일을 지정해 줄 수도 있다.

<video src="somekindvideo.mp4#t0.2"/>

이런 식으로 시작시간을 미세하게 조정해주면 thumbnail도 바뀐다.

※ HTML5 공식 문서에는 따로 언급 안되어 있다.

 

#t=[start_time], [end_time] 

위와 같은 형식으로 구간을 설정할 수도 있으며,

#t=[hour]:[minutes]:[seconds]로 시간을 지정할 수 있다고 한다.

 

https://web.dev/video-and-source-tags/

 

<video> 및 <source> 태그

웹용 비디오 파일을 제대로 준비하고, 정확한 치수와 해상도를 주고, 다양한 브라우저를 위해 별도의 WebM 및 MP4 파일도 생성하셨네요. 그렇지만 모두가 보려면 웹 페이지에 추가해야 합니다.

web.dev

 

 

반응형