HTML Study : Canvas & Video

- video tags- video attributes

- video events- video controls

video tags

브라우저마다지원하는비디오의형식이상이한데, 하나의 video 태그내에여러 source 태그를작성해두면브라우저에상관없이비디오의실행을보장할수있음.

video 태그에비디오를삽입하는 3가지방식 (1) :- <video> 태그내의 <source> 태그를사용

video tagsvideo 태그에비디오를삽입하는 3가지방식 (2) :- <video> 태그의 src attribute 를사용

가장사용이쉽고,직관적임

video tagsvideo 태그에비디오를삽입하는 3가지방식 (3 - 1) :- javascript제어 –코드로 video 태그만들기

위와같은방식으로동적으로 DOM 에객체를생성하고 video 태그를첨부할수있다.앞의두경우와는다르게이 video 를재생하려면별도의이벤트가필요하다.

video tagsvideo 태그에비디오를삽입하는 3가지방식 (3 - 1) :- javascript제어 –현재브라우저에맞는 video 확장자찾기

video 태그에 src 를지정하지않은상태로도현재브라우저에서지원하는영상포멧을찾을수있다.현재 mp4, webm, ogg 3 종이있고, ogg 는 ogv 와동일하다.

video attributes

autoplay >> 자동실행controls >> 비디오제어판표시loop >> 반복여부preload >> 프리로드poster >> 비디오가다음작업을준비할동안표기될이미지지정

video events

6 장에서가장많이사용하는 2 가지 event :- canplay : 브라우저가비디오를플레이할수있는상황에발생- canplaythrough : 브라우저가버퍼링없이비디오를플레이할수있는상황

만약사용자가끊김없는재생을원한다면 canplaythrough 이벤트를,버벅거리더라도가능한빨리보여주려면 canplay 이벤트를활용해야한다.

더많은이벤트에대한정보는아래링크참조 :http://www.w3schools.com/tags/ref_av_dom.asp

video on canvas

Canvas 안에서비디오를재생하는것은눈속임이다.(1)

HTML 에는캔버스의영역만지정할뿐어떠한비디오의속성이나태그도작성할필요가없다. (원한다면해도되지만.)

video on canvas

Canvas 안에서비디오를재생하는것은눈속임이다.(2)

실제로는 video 태그는별도로작동하고, 캔버스는비디오의개별장면을이미지로그려낸다.DOM 에 video 태그를생성하고사용자의눈에서감춘다.

video on canvas

Canvas 안에서비디오를재생하는것은눈속임이다.(3)

canvas를작동시키는 function 내에서는 video 태그를별도로실행(video.play())하고,매 setInterval 이호출되는시점마다현재이미지를그린다.

video on canvas

video.width 와 video.videoWidth 는다르다.(height 에도동일적용)

width 는동영상재생기의너비를의미한다.반면 videoWidth 는비디오원본의너비를의미함

video.height

video.videoHeight

video on canvas

video 를 canvas에표현할때, 다른그림혹은문자를표기가능

이미지를먼저그리고정보를나타낼문자를출력한다.문자출력위치를이미지위에해서자막과같이표기할수도있음.

fun with video

어차피 drawImage 로출력하다보니, 앞서배웠던transform 등을활용하면마음대로변형할수있다.

fun with video

어차피 drawImage 로출력하다보니, 앞서배웠던transform 등을활용하면마음대로변형할수있다.

FIN

github : http://github.com/juneyoung/HTML5_2014_12/

tree/master/HTML5_study/jyoh/week8