본문 바로가기

FrontEnd/HTML5 & CSS & JavaScript29

[HTML5] Video Track 태그 사용하기(자막 파일 사용하기) HTML5 태그에서 태그를 이용하여 자막 파일을 영상에 사용할 수 있다. HTML5 태그 태그는 media 요소 ( 및 )의 자막, 캡션 파일과 같은 시간별 텍스트가 포함된 파일을 지정하는데 사용된다. 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 TTML(Timed Text Markup Language) 형식을 사용해야 한다. WebVTT WEBVTT FILE 000:00:01.000 --> 00:00:02.500Hello. This is frist Subtitle. 100:00:02.500 --> 00:00:03.000It is very easy to use. 0 : 헤더, 필수 요소는 아니다.00:00:01.000 --> 00:00:02.500 : 시간으로 -->.. 2020. 1. 31.
[HTML5] Video 태그 기본 속성 HTML5 이전에는 플러그인이 있는 브라우저에서만 비디오를 재생할 수 있었으나,HTML5에서는 태그를 사용하여 웹페이지에 영상을 첨부할 수 있다. Browser 지원 버전 브라우저 별 태그 지원 버전은 다음과 같다. HTML5 Video Format HTML5에서 지원하는 Video Format : MP4, WebM, OggVideo Format 역시 브라우저 별로 다르다. HTML5 Video Attributeautopaly : 자동 재생 (true, false)- true : 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작된다.- false : 사용자가 재생 버튼을 누를 때까지 재생하지 않는다. buffered : 버퍼링 범위 얻기- 미디어의 어느 시간대가 버퍼에 들어 있는지.. 2020. 1. 30.
[CSS] 반응형 웹페이지 메뉴바 Mobile에서와 Desktop에서 UI가 달라지는 반응형 웹페이지 메뉴바 2018. 7. 29.
[CSS] hover시 게시물을 미리 볼 수 있는 사진 효과 마우스를 올렸을 때 게시물의 제목과 세부 내용, 게시물에 달린 나머지 사진을 미리 볼 수 있는 Hover 효과 2018. 7. 25.
[CSS] Hover시 객체 rotate&scale 애니메이션 2018. 7. 24.