ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • HTML5 비디오태그 <video></video>
    웹프로그래밍/HTML 2015.04.24 09:58

    비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다. 

    원래 HTML5 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있었다. 

    하지만 HTML5 시대가 오면서 웹표준만으로 동영상을 볼 수 있게 되었다.


    *유튜브는 플래시를 사용해서 동영상을 재생하게 설계되었지만 https://www.youtube.com/html5  에 들어가서 HTML5 기능을 실행하면 플래시 없이 동영상을 볼 수 있다.


    video 태그의 속성

    <video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">

        <source src="Kalimba.mp4" type="video/mp4" />

        <source src="Kalimba.webm" type="video/webm" />

    </video>


    속성 이름

    값 

    설명 

    src

    URL 

    비디오파일의 경로지정 

    height 숫자 비디오의 높이를 지정
    width 숫자 비디오의 너비를 지정
    poster URL 비디오 준비중일 때의 이미지 파일 경로 지정
    muted "muted", "", - 음소거 

    controls

    "controls", "" , -  

    비디오 재생 도구를 출력할지 지정 

    autoplay 

    "autoplay", "", - 

    비디오를 자동 재생할지 지정 

    loop 

    "loop", "", - 

    비디오를 반복할지 지정 

    preload

    "none", "metadata", "auto" 

    음악을 재생하기 전에 모두 불러올지 지정

    none : 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음

    metadata : 사용자가 비디오를 필요로 하지 않을 것이지만, 기본정보(크기,첫프레임,오디오길이 등)는 가져온다.

    auto : 사용자가 비디오를 필요로 하고 미리 다운로드를 한다 (기본값)

     


     *웹브라우저에서 지원하는 비디오파일 형식

     

     IE

    크롬 

    파이어폭스 

    사파리 

    오페라 

    MP4(H.264+ACC)

    O 

    O 

    X 

    O 

    X 

    WebM(VP8+Vorbis)

    X 

    O 

    O 

    X

    O 

    OGV(Theora+Vorbis)

    X 

    O 

    O 

    X 

     


    ※ video.js 플러그인

    웹브라우저마다 표시되는 video태그의 형태가 일관되지 않으므로 웹페이지를 디자인할 때 문제가 될 수 있다.

    또한 IE8이하에서는 video 태그가 동작하지 않는다. 이러한 문제를 해결 할 수 있는 간단한 플러그인이 video.js플러그인 이다.

    IE8에서는 자동으로 플래시에 담겨 동영상이 재생된다.


    http://videojs.com

    <!DOCTYPE HTML>

    <html lang="ko">

    <head>

    <meta charset="UTF-8">

    <title>video.js</title>

    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" />

    <script src="http://vjs.zencdn.net/c/video.js"></script>

    </head>

    <body>

    <video width="640" height="360" controls="controls" class="video-js vjs-default-skin" data-setup="{}">

        <source src="Wildlife.mp4" type="video/mp4" />

        <source src="Wildlife.ogv" type="video/ogv" />

    </video>

    </body>

    </html>

    댓글 0

Designed by Tistory.