HTML54 [HTML5] canvas에 마우스로 사각형 그리기 마우스로 사각형을 그리기 위해서, HTML5 canvas를 이용해본다. mousedown시에는 마우스 클릭상태를 on으로 변경하며, 사각형의 시작 x, y 좌표를 얻고, mousemove시 클릭 상태라면, 시작 x, y와 현재 마우스 point를 사용해 사각형을 그리고, mouseup시에는 마우스 클릭상태를 off로 변경한다. 2021. 2. 26. [HTML5] track 태그 속성 사용하여 Video 자막 추출하기 HTML5 태그에서 속성을 이용해서 현재 재생중인 자막의 텍스트를 불러올 수 있다. 우선 자막 텍스트를 추출하기 위해 알아야할 함수는 다음과 같다. HTMLMediaElement.textTracks Media 내부에 선언된 객체의 순서를 지켜 순서대로 TextTrack을 반환하는 함수이다. 자막 읽기 위와 같은 코드에서 .textTracks의 반환 결과는 [track(Korean1), track(Korean2), track(Korean3)]이 된다. .textTracks의 반환 결과 : HTMLMediaElement.pause(), HTMLMediaElement.pause .pause()는 의 재생상태를 일시정지로 변경하는 메소드로 .play()와 반대되는 함수이다.(.play()는 를 재생시키는 함수).. 2020. 2. 12. [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. 이전 1 다음 반응형
