LynX's Time

Lost Space

Sky2 Layout

Windows Internet Explorer 9은 HTML5 동영상을 새로 지원했습니다.HTML5 동영상을 사용하면 타사 플러그 인이나 JavaScript 없이도 웹 페이지에 전체 기능을 갖춘 동영상 플레이어를 포함할 수 있습니다.

시작하는 방법은?

HTML5 video 요소를 사용하여 웹 페이지에 동영상 플레이어를 추가하는 가장 기본적인 방법은 한 줄의 HTML로 수행됩니다. controls 특성을 추가하면 사용자가 동영상 재생을 제어할 수 있습니다. 다른 특성을 사용하여 원본 파일을 설정하거나 자리 표시자 이미지를 추가하거나 동영상 재생을 자동으로 시작할 수 있습니다. 대부분의 HTML 요소처럼 CSS 스타일시트를 사용하여 요소의 스타일과 위치를 지정할 수 있습니다.

HTML5 요소의 구문은 다음과 같습니다.

<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video> 

이 예에서는 한 줄의 코드에 대해 다양한 작업을 수행합니다. src 특성은 재생할 동영상 파일을 가리킵니다. src 특성은 동영상 요소에 대한 콘텐츠를 지정하는 두 가지 방법 중 하나를 제공합니다. 동영상을 재생하려면 비디오 파일의 URL에 src 특성을 할당합니다.

controls 특성은 브라우저에 기본 제공 재생 컨트롤을 표시하도록 지정합니다. 기본 제공 컨트롤의 기능과 모양은 브라우저마다 다를 수 있습니다. 최소한 재생 및 일시 중지 컨트롤, 동영상에서 앞/뒤로 건너뛰는 단추 또는 진행률 표시줄, 시간 카운터가 표시되어야 합니다. 동영상을 재생하는 동안 컨트롤은 일반적으로 숨겨져 있으며, 마우스 커서를 플레이어 위로 이동하면 컨트롤이 다시 나타납니다.

autoplay는 동영상을 로드 후 바로 재생하도록 하는 부울 특성입니다.

동영상 요소에 사용할 수 있는 특성

동영상 요소는 동영상 재생 및 표시를 제어하는 많은 특성을 지원합니다. 이 표에서는 기본 동영상 특성에 대해 설명합니다. 부울 특성은 존재할 경우 "true"로 간주되고 video 요소의 특성으로 존재하지 않을 경우 "false"로 간주됩니다.

Note  동영상 플레이어의 치수를 하나(예: 높이)만 설정하면 동영상 플레이어에서 해당 치수에 맞게 동영상 크기를 설정하고 비디오 콘텐츠의 가로 세로 비율을 기반으로 다른 치수를 조정합니다. 두 치수를 모두 동영상 콘텐츠와 일치하지 않는 가로 세로 비율로 설정하면 플레이어에서는 가로 세로 비율을 유지하면서 적합한 가장 근사한 치수로 배율을 조정합니다. 동영상은 한쪽에 공백을 두고 가로 또는 세로로 가운데에 배치됩니다.

다음 예에서는 동영상을 재생하고, 콘텐츠가 로드될 때까지 포스터를 표시하고, 재생 컨트롤이 있는 비디오를 반복적으로 재생합니다.

<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" >
HTML5 Video is required for this example
</video> 

HTML의 동영상 요소에 대해 위의 특성을 설정할 수 있지만 JavaScript를 사용할 때 사용할 수 있는 많은 다른 옵션이 있습니다. 자세한 내용은 JavaScript를 사용하여 HTML5 동영상 플레이어 제어를 참조하세요.

여러 형식을 지원하는 방법

동영상 요소에서는 src 특성을 한 번에 하나만 설정할 수 있습니다. 파일 형식을 하나만 사용하려는 경우에는 문제가 되지 않습니다. 하지만 여러 파일 형식과 브라우저를 지원하려면 source 요소를 사용할 수 있습니다.

source 요소는 동영상 요소를 사용하여 동영상 콘텐츠 형식에 대한 "자동 맞춤"을 제공합니다. 즉, 여러 형식을 할당하면 HTML5 동영상 플레이어에서 가장 호환되는 형식을 자동으로 선택합니다. 대개 Windows Internet Explorer의 경우 .mp4 파일이 선택되고, 다른 브라우저의 경우에는 .ogg/.ogv 형식이 선택됩니다. 이 예에서는 다음과 같은 세 가지 파일 형식을 갖는 동영상 요소를 보여 줍니다.

 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>             
   <p>Fallback code if video isn't supported</p>/
 </video>

이 예에는 — mp4, webm 및 ogg 동영상의 세 가지 형식이 나열됩니다. 브라우저에 따라 동영상 요소에서 재생 가능한 형식을 선택합니다. 아무 형식도 재생할 수 없거나 HTML5 동영상이 지원되지 않는 경우 작업이 완료되지 않고 video 태그 사이에 포함된 텍스트가 표시됩니다. 이 "대체" 동작을 사용하여 메시지를 표시하거나 포함된 플레이어를 추가할 수 있습니다.

이전 브라우저에서는 어떻게 됩니까?

플러그 인 또는 외부 플레이어 없이 웹 페이지에 동영상을 추가할 경우 새 Windows UI에서 Internet Explorer 9 또는 Internet Explorer 10을 실행 중인 사용자나 플러그 인을 지원하지 않는 모바일 장치 사용자에게는 문제가 되지 않지만, 지원하는 최신 브라우저를 사용 중인 사용자로 대상이 제한될 수 있습니다. 동영상 및 오디오 HTML5 요소를 사용하면 사용자 브라우저에서 HTML5를 지원하지 않는 경우에만 실행되는 태그 사이에 텍스트 또는 코드를 넣을 수 있습니다.

Note  오디오 및 동영상 요소는 두 요소가 지원되지 않는 경우에만 요소 사이의 코드가 실행되는 canvas와 다릅니다. Canvas에서는 태그 사이의 코드가 표시되지 않지만 canvas가 지원되는 경우에도 실제로 실행됩니다. 개발자는 Canvas Shadow DOM을 사용하여 화면 낭독 프로그램 및 다른 장치에 대한 접근성 지원을 제공할 수 있습니다. 자세한 내용은 HTML5 Canvas 및 Canvas Shadow DOM을 참조하세요.

다음 예는 Adobe Flash Player를 실행하여 이전 브라우저를 지원하도록 개체 태그를 추가한 점을 제외하고 마지막 예와 비슷합니다.

 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>     
   <object>
     <embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" />
   </object>        
   HTML5 Video is required for this example
 </video>

이 예에서 브라우저는 HTML5 동영상을 지원할 경우 동영상 형식을 표시하려고 시도합니다. HTML5 동영상을 지원하지 않을 경우 개체 및 포함 태그를 사용하여 플래시 플레이어를 로드합니다.

다른 대체 옵션은 이 예에 표시된 것처럼 동영상 콘텐츠에 대한 링크만 제공합니다.

HTML5 Video is required for this example. 
<a href="demo.mp4">Download the video</a> file. 

JavaScript를 사용하는 Windows 스토어 앱의 대체 기술에 대한 자세한 내용은 플러그 인 및 ActiveX 컨트롤을 참조하세요.

작은 스타일을 추가할 수 있나요?

HTML5 동영상 플레이어를 웹 페이지 디자인에 통합하도록 CSS를 사용하여 스타일 지정할 수 있습니다. height 및 width를 설정하고, 배경, 테두리 및 position을 지정하고, CSS를 사용하여 동영상 요소의 visibility를 제어할 수 있습니다.

CSS의 z-index 속성을 사용하여 동영상 요소에 대해 이미지, 텍스트 또는 다른 동영상을 오버레이할 수 있습니다. 예를 들면 동일한 화면의 큰 동영상 위에 작은 비디오를 오버레이하는 PiP(화면 속 화면)가 있습니다.

화면 속 화면은 스포츠 이벤트의 다이어그램, 수화 통역사 등과 같은 관련 콘텐츠를 표시하는 데 주로 사용되는 기술입니다. 다음 예에서는 CSS를 사용하여 큰 동영상 위에 작은 비디오를 배치합니다. 또한 CSS를 사용하여 동영상 플레이어의 너비를 설정하고 삽입된 이미지 주위에 색이 지정된 테두리를 넣습니다.

    <style type="text/css">       
    #Video1
    {
     position:absolute;
     top: 50px;
     left:0px;        
     width:1000px;       
     border:2px solid blue;
     display:block;
     z-index:99;
     }
        
   #Video2
    {
     position:absolute;
     top:80px;
     left:60px;
     width:300px;
     border:2px solid red;        
     z-index:100;
    }
    
    </style>
</head>
    <body>        
       <video id="Video1" controls loop autoplay >
           <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" />           
       </video>
       
       <video id="Video2" muted autoplay controls >
           <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
           HTML5 Video not supported
       </video>             

z-index 속성을 사용하여 표시 순서를 변경할 수 있습니다. 일반적으로 웹 페이지의 요소는 만들어진 순서대로 표시됩니다. 한 요소가 다른 요소와 겹칠 경우 마지막에 렌더링된 요소가 완전히 표시됩니다. 최상위 요소인지 확인하려면 두 번째 동영상 프레임의 z-index를 100으로 설정합니다(비디오보다 먼저 만들어진 요소가 100개 미만이라고 가정). 두 번째 동영상 프레임은 재생 중인 비디오의 크기와 페이지에 있는 요소의 수를 기반으로 배치됩니다.

다른 CSS 속성을 사용할 수 있습니다. 예를 들어 transform을 사용하여 이미지를 회전하거나 borderRadius를 사용하여 다음 예에 표시된 것처럼 동영상 요소에 둥근 모서리를 만들 수 있습니다. 자세한 내용은 CSS 스타일시트 참조 페이지를 참조하세요.

<html>
  <head>
    <title>Rotating a video</title>
    <style type="text/css">
   /* Set basic style for video */     
    #theVideo  
   {
        display:block;
        position:absolute;
        left:200px;
        top:200px;
        border: 2px solid red;
        border-radius: 20px;  
    }   
    /* Light up the image as a button, change cursor */
    #rotateVideo:hover
    {
        border:2px solid green;
        cursor: hand;                
     }
        
    </style>
    <script type="text/javascript">
        //  When the HTML elements load, call init()
        document.addEventListener("DOMContentLoaded", init, false);

        //  Rotate the video by 30degrees when image is clicked
        function init() {
            var rotateVal = 0;       //  Global variable to hold current rotation value
            document.getElementById("rotateVideo").addEventListener("click", function () {
                rotateVal = (rotateVal += 30) % 360;  // Calculate the next value, but keep between 0 and 360
                var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
                document.getElementById("theVideo").style.msTransform = temp;  // Set the style
            }, false);                    
        }
    </script>
   
  </head>
  <body>
    <img src="rotate.png" id="rotateVideo" alt="Rotate button" title="Click to rotate 30 degrees" role="button"/>
    <video src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" id="theVideo" controls >
      This example requires Internet Explorer 9 or later
    </video>
  </body>
</html>

이동할 위치

여기서는 한 줄의 HTML을 사용하여 웹 페이지에 전체 기능을 갖춘 동영상 플레이어 컨트롤을 추가하는 방법에 대해 살펴보았습니다. 또한 전체 브라우저 지원을 위해 여러 동영상 형식을 지원하는 방법과 HTML5 동영상을 지원하지 않는 브라우저 지원을 위한 간단한 대체 예제를 살펴보았습니다.

JavaScript를 사용하여 HTML5 동영상 플레이어 제어에서는 JavaScript를 사용하여 재생을 위한 외부 컨트롤을 추가하고, 파일 형식과의 호환성을 확인하고, 재생 볼륨과 속도를 제어하는 방법에 대해 설명합니다.