JavaScript를 사용하여 HTML5 동영상 플레이어 제어

HTML5 video 개체는 JavaScript에서 재생을 제어하는 데 사용할 수 있는 메서드, 속성 및 이벤트를 제공합니다.

웹 페이지에 HTML5 동영상 컨트롤 추가에 설명된 대로 HTML5 video 요소를 통해 웹 페이지에서 동영상 요소 사용을 시작합니다. JavaScript를 추가하면 프로그래밍 방식으로 사용자 지정 재생 컨트롤을 만들고 현재 재생 위치를 가져오고 설정하며 현재 동영상을 변경할 수 있습니다. 여기서는 video 개체를 제어하는 데 사용할 수 있는 몇 가지 기본 메서드 및 속성에 대해 살펴봅니다.

고유한 단추를 만들려면 어떻게 해야 하나요?

HTML5 video 요소에는 동영상 재생을 재생, 일시 중지 및 검색하는 고유한 기본 제공 컨트롤이 있습니다. 다음 예제에서는 playpause 메서드를 사용하여 동영상을 시작하고 중지하며, currentTime 속성을 사용하여 동영상을 검색하고, paused 속성을 사용하여 동영상 플레이어의 현재 재생 상태를 가져옵니다.


<script type="text/javascript">

    function vidplay() {
       var video = document.getElementById("Video1");
       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

    function restart() {
        var video = document.getElementById("Video1");
        video.currentTime = 0;
    }

    function skip(value) {
        var video = document.getElementById("Video1");
        video.currentTime += value;
    }      
</script>

</head>
<body>        

<video id="Video1" >
//  Replace these with your own video files. 
     <source src="demo.mp4" type="video/mp4" />
     <source src="demo.ogv" type="video/ogg" />
     HTML5 Video is required for this example. 
     <a href="demo.mp4">Download the video</a> file. 
</video>

<div id="buttonbar">
    <button id="restart" onclick="restart();">[]</button> 
    <button id="rew" onclick="skip(-10)">&lt;&lt;</button>
    <button id="play" onclick="vidplay()">&gt;</button>
    <button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>         


이 예제에서는 HTML5 video 요소를 source 요소와 함께 사용하여 웹 페이지에서 플레이어 및 동영상 콘텐츠를 설정합니다. 동영상 요소에는 id 특성만 있어 단추 및 JavaScript 기능에 대한 재생 컨트롤을 유지합니다. 단추는 동영상의 재생/일시 중지, 앞뒤로 건너뛰기 및 다시 시작 컨트롤을 제공합니다.

재생일시 중지 단추이기도 합니다. 별도의 단추가 있는 것이 아니라 재생 단추의 텍스트가 기능을 반영하도록 변경됩니다. 재생 단추를 클릭하면 "vidplay()" 함수를 호출하여 paused 속성을 확인합니다. paused 속성은 동영상이 일시 중지되거나 방금 로드된 경우 true를 반환하고 동영상이 재생 중이면 false를 반환합니다. 동영상이 일시 중지되면 "vidplay()"에서 play 메서드를 호출하고 재생 단추의 innerHTML을 "일시 중지"에 대한 기호인 "||"로 변경합니다. 재생 단추를 클릭할 때 동영상이 재생 중이면 pause 메서드가 호출되고 innerHTML이 "재생"에 대한 기호인 ">"로 변경됩니다.

다시 시작("[]"), 뒤로("<<") 및 앞으로(>>) 단추는 모두 currentTime 속성을 사용합니다. currentTime 속성은 현재 재생 위치를 초 단위로 나타냅니다. 재생앞으로 단추는 "skip()" 함수를 호출합니다. "skip()" 함수는 현재 시간에서 10초를 더하거나 빼는 매개 변수를 사용합니다. currentTime을 0보다 작거나 동영상 기간보다 큰 값으로 설정하면 동영상 플레이어에서 해당 값을 동영상의 시작이나 끝으로 설정합니다. 다시 시작("[]") 단추는 "restart()" 함수를 호출하여 currentTime을 0으로 설정합니다.

이 형식을 재생할 수 있을까요?

JavaScript에서 사용할 형식을 확인하는 작업은 웹 페이지에 HTML5 동영상 컨트롤 추가에 표시된 대로 source 요소를 사용하는 경우보다 약간 더 복잡합니다. 그러나 동영상의 요소의 지원은 변경되지 않으므로 사용 가능한 지원을 확인한 후 나머지 검색 세션에 대해 형식을 가정할 수 있습니다.

브라우저의 형식 기능을 찾으려면 video 개체의 canPlayType 메서드를 사용합니다. canPlayType 메서드는 동영상 MIME 형식과 선택적인 코덱 매개 변수를 사용하고 "empty", "maybe" 또는 "probably"의 세 문자열 중 하나를 반환합니다.


  if (myvideo.canPlayType) {
    // CanPlayType returns maybe, probably, or an empty string.
    var playMsg = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"');
    if ("" != playMsg) {
      msg.innerHTML += "mp4/H.264 is " + playMsg + " supported <br/>";
    }
    playMsg = myvideo.canPlayType('video/ogg; codecs="theora"');
    if ("" != playMsg) {
      msg.innerHTML += "ogg is " + playMsg + " supported<br/>";
    }
    playMsg = myvideo.canPlayType('video/webm; codecs="vp8, vorbis"');
    if ("" != playMsg) {
      msg.innerHTML += "webm is " + playMsg + " supported<br/>";
    }
  }
  else {
    msg.innerHTML += "no video support";
  }
}


"maybe"와 "probably"의 차이점은 canPlayType 메서드에 정보가 충분하지 않다는 것입니다. 예를 들어 코덱 매개 변수가 누락된 경우 메서드에서 mp4 지원에 대해 "maybe"를 반환할 수 있습니다. 이는 지원되지 않는 mp4 코덱이 있을 수 있기 때문입니다. 코덱 매개 변수는 mp4 파일의 보다 구체적인 버전으로 지원의 범위를 좁힙니다.

canPlayType 메서드가 반환하는 세 상태의 모호함으로 인해 브라우저에서 해당 파일 형식을 지원하는지 여부를 결정하기가 어려울 수 있습니다. 규칙은 아니지만 브라우저에서 "maybe"를 반환하는 경우 해당 형식을 지원할 수도 있습니다. 다음 문에서는 반환된 문자열이 "maybe" 또는 "probably"일 경우 부울 true를 반환하고 문자열이 비어 있으면 false를 반환합니다.


var playMsg = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"');
if ("" != playMsg) {
  msg.innerHTML += "mp4/H.264 is " + playMsg + " supported <br/>";
}


이전 예제의 첫 번째 줄에서는 "video/mp4; codecs="avc1.42E01E"" 매개 변수를 사용하여 canPlayType 메서드를 호출합니다. 그런 다음 "if" 문에서 결과가 빈 문자열이 아닌 다른 값인지를 확인합니다. 그럴 경우 메시지와 해당 결과를 표시합니다.

다음 예제에서는 mp4, ogv 및 webm의 세 가지 동영상 형식을 테스트합니다.


<!doctype html>
<html>
<head>
    <title>Using multiple file formats in JavaScript</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=edge"/> --> 
</head>
<body>
  <h1>CanPlayType test for multiple files</h1>
    <div>The canPlayType method tests for specific video formats and codecs. <br />It returns probably, maybe, or an empty string (no support).</div> 
    <br />
    <div>
        <button onclick="checkVideoCompat();">
            Test for video format type
        </button>
    </div>
    <div id="display"> </div>

    <script type= "text/javascript">
      function checkVideoCompat() {
        var myvideo = document.createElement('video');
        var msg = document.getElementById("display");
        msg.innerHTML = "";
        if (myvideo.canPlayType) {
          // CanPlayType returns maybe, probably, or an empty string.
          var playMsg = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"');
          if ("" != playMsg) {
            msg.innerHTML += "mp4/H.264 is " + playMsg + " supported <br/>";
          }
          playMsg = myvideo.canPlayType('video/ogg; codecs="theora"');
          if ("" != playMsg) {
            msg.innerHTML += "ogg is " + playMsg + " supported<br/>";
          }
          playMsg = myvideo.canPlayType('video/webm; codecs="vp8, vorbis"');
          if ("" != playMsg) {
            msg.innerHTML += "webm is " + playMsg + " supported<br/>";
          }
        }
        else {
          msg.innerHTML += "no video support";
        }
      }
    </script>


</body>
</html>


Windows Internet Explorer에서 HTML5 요소 및 기능을 사용하는 경우 사용하는 기능을 테스트하는 것이 가장 좋습니다. 이 예제에서는 createElement 메서드를 사용하여 동영상 개체를 만듭니다. video 개체가 성공적으로 만들어진 경우 "if (myvideo.canPlayType)" 문에서 true가 반환되고 특정 파일 형식을 테스트하는 실행이 계속됩니다.

파일을 변경하려면 어떻게 할까요?

이전 예제에서는 코드의 HTML 부분에서 source 태그를 사용하여 동영상 원본 파일을 지정합니다. 둘 이상의 파일을 재생하려면 src 속성을 사용하여 동영상 파일의 URL을 JavaScript로 지정할 수 있습니다.

이 예제에서 src 속성은 텍스트 입력 필드의 값으로 설정됩니다. 호환되는 동영상 파일의 URL을 필드에 입력하거나 붙여 넣은 다음 로드 단추를 클릭합니다.


<div id= "inputField" style="display:none;" >
    <input type="text" id="videoFile" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />        
    <button id="loadVideo" >Load</button>
</div>


로드 단추를 클릭하면 "getVideo()" 함수가 입력 필드(URL)에서 값을 가져와 src 속성에 할당합니다. 그런 다음 "getVideo()" 함수에서 "재생" 단추에 대한 click 메서드를 호출하여 파일이 재생을 시작합니다.


                //  load video file from input field
                function getVideo() {
                    var fileURL = document.getElementById("videoFile").value;  // get input field                    
                    if (fileURL != ""){
                       video.src = fileURL;
                       video.load();  // if HTML source element is used
                       document.getElementById("play").click();  // start play
                     } else {
                        errMessage("Enter a valid video URL");  // fail silently
                     }
                }


재생 단추를 클릭하면 "vidplay()" 함수를 호출하여 재생하거나 일시 중지합니다. 재생할 단일 파일만 원본 요소에 의해 설정된 이전 예제와 달리 "vidplay()"에서 먼저 src 속성을 확인합니다. 페이지가 처음 로드되는 경우처럼 비어 있으면 "getVideo()" 함수가 호출되어 텍스트 필드에서 URL을 로드합니다. "getVideo()"는 입력 필드에서 URL을 가져오고, load 동영상 메서드를 호출한 다음 파일을 재생하는 재생 단추의 클릭 이벤트를 발생시킵니다. 페이지에서 이미 동영상을 재생 중인 경우 새 파일을 입력 필드에 붙여 넣으면 로드 단추를 클릭하여 파일을 변경합니다.


                 //  play video
                 function vidplay(evt) {
                    if (video.src == "") {  // on first run, src is empty, go get file
                        getVideo();
                    }
                    button = evt.target; //  get the button id to swap the text based on the state                                    
                    if (video.paused) {   // play the file, and display pause symbol
                       video.play();
                       button.textContent = "||";
                    } else {              // pause the file, and display play symbol  
                       video.pause();
                       button.textContent = ">";
                    }                                        
                }


다음 예제에서는 body 요소의 onload 이벤트를 사용하여 "init()" 함수를 호출하고 예제의 모든 기능을 캡슐화합니다.


<script type="text/javascript">
    // Master function, encapsulates all functions
    function init() {
        var video = document.getElementById("Video1");                                               
        if (video.canPlayType) {   // tests that we have HTML5 video support
            // if successful, display buttons and set up events
            document.getElementById("buttonbar").style.display = "block";
            document.getElementById("inputField").style.display = "block";

            //  button events
            //  Play
            document.getElementById("play").addEventListener("click", vidplay, false);
            //  Restart
            document.getElementById("restart").addEventListener("click", function(){
                setTime(0);
             }, false);
            //  Skip backward 10 seconds
            document.getElementById("rew").addEventListener("click", function(){
                setTime(-10);                
            }, false);
            //  Skip forward 10 seconds
            document.getElementById("fwd").addEventListener("click", function(){
                setTime(10);
            }, false);                
            //  set src == latest video file URL
            document.getElementById("loadVideo").addEventListener("click", getVideo, false);
                            
            // fail with message 
            video.addEventListener("error", function(err) {
                errMessage(err);
            }, true);

            //  button helper functions 
            //  skip forward, backward, or restart
            function setTime(tValue) {
            //  if no video is loaded, this throws an exception 
                try {
                    if (tValue == 0) {
                        video.currentTime = tValue;
                    }
                    else {
                        video.currentTime += tValue;
                    }
                    
                 } catch (err) {
                     // errMessage(err) // show exception
                 errMessage("Video content might not be loaded");
                   }
         }
             //  play video
             function vidplay(evt) {
                if (video.src == "") {  // on first run, src is empty, go get file
                    getVideo();
                }
                button = evt.target; //  get the button id to swap the text based on the state                                    
                if (video.paused) {   // play the file, and display pause symbol
                   video.play();
                   button.textContent = "||";
                } else {              // pause the file, and display play symbol  
                   video.pause();
                   button.textContent = ">";
                }                                        
            }
            //  load video file from input field
            function getVideo() {
                var fileURL = document.getElementById("videoFile").value;  // get input field                    
                if (fileURL != ""){
                   video.src = fileURL;
                   video.load();  // if HTML source element is used
                   document.getElementById("play").click();  // start play
                 } else {
                    errMessage("Enter a valid video URL");  // fail silently
                 }
            }
            //  display an error message 
            function errMessage(msg) {
            // displays an error message for 5 seconds then clears it
                document.getElementById("errorMsg").textContent = msg;
                setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
            }

        } // end of runtime
    }// end of master         
</script>

</head>
<body onload="init();">        

<video id="Video1" style="border: 1px solid blue;" height="240" width="320">      
     HTML5 Video is required for this example
</video>

<div id="buttonbar" style="display: none;")>
    <button id="restart" >[]</button> 
    <button id="rew" >&lt;&lt;</button>
    <button id="play">&gt;</button>
    <button id="fwd" >&gt;&gt;</button>
</div>     
<div id= "inputField" style="display:none;" >
    <input type="text" id="videoFile" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />        
    <button id="loadVideo" >Load</button>
</div>
<div id="errorMsg" style="color:Red;" ></div>


이 예제에서는 JavaScript addEventListener 메서드를 사용하여 HTML의 각 button 요소에 대한 onclick 이벤트가 아닌 단추에 대해 클릭 처리기를 제공합니다. 되감기, 앞으로다시 시작 단추는 각각 "setTime()" 함수를 호출하여 전달된 값을 기반으로 currentTime 동영상 속성을 설정합니다. 재생 단추는 "vidplay()" 함수를 호출하여 파일을 재생합니다.

참고  

온라인 동영상 사이트에서 동영상 링크를 붙여 넣는 경우 실제 동영상 파일(.mp4, .ogv 또는 유사한 확장명 사용)인지 확인해야 합니다. 웹에는 테스트 동영상 파일 원본이 많지만 일부 웹 사이트에서는 파일에 대한 링크가 아니라 검색용 URL을 제공합니다.

잘못된 부분이 있으면 어떻게 하나요?

오류 없이 코드를 작성하기란 어려운 일입니다. 이 예제에는 오류를 방지하거나 파악하도록 설계된 영역이 포함되어 있습니다. 예제가 실행될 때 HTML5 동영상 지원이 없으면 단추가 표시되지 않습니다. 그러나 동영상이 지원되면 일부 작업에서 예외가 발생합니다. oncanplay 이벤트를 사용하여 동영상 콘텐츠가 로드될 때까지 단추를 사용할 수 없도록 하는 예제는 HTML5 동영상 이벤트 사용을 참조하세요.

예외를 발생시키는 한 가지 작업은 로드된 동영상이 없을 때 currentTime 속성을 설정하는 것입니다. 이전 예제에서 "setTime()" 함수 코드는 예외가 발생될 경우 오류 메시지를 표시하는 try/catch 블록에서 실행됩니다. 예제에서는 유용한 메시지가 표시되지만 대신 원시 예외 표시에 대한 설명을 제거할 수 있습니다.


   //  skip forward, backward, or restart
   function setTime(tValue) {
   //  if no video is loaded, this throws an exception 
       try {
           if (tValue == 0) {
               video.currentTime = tValue;
           }
           else {
               video.currentTime += tValue;
           }
           
        } catch (err) {
            // errMessage(err) // show exception
        errMessage("Video content might not be loaded");
          }
}


참고  F12 개발자 도구를 사용하면 F12 도구 콘솔이나 스크립트 탭으로 메시지를 보내 디버깅할 코드의 특정 영역에서 다시 보고할 수 있습니다. 콘솔로 메시지를 보내면 alert 메서드 호출처럼 코드 실행이 중단되지 않습니다. JavaScript를 사용하여 Windows 스토어 앱을 만들 때 페이지를 디버깅하려면 Microsoft Visual Studio를 사용합니다. F12 도구 콘솔 사용에 대한 자세한 내용을 보려면 How to use the F12 Developer Tools을 참조하세요.

동영상 속성으로 수행할 수 있는 기타 작업

동영상 속성 playbackRate, volumemuted를 사용하면 사운드트랙의 재생 속도 컨트롤 및 볼륨 컨트롤을 추가할 수 있습니다. 다음 예제에서는 재생 속도를 늘리고 줄이는 단추를 추가하여 오래된 영화처럼 재생하거나 슬로우 모션으로 재생합니다. 또한 볼륨을 변경하거나 오디오 트랙을 완전히 음소거하는 단추도 있습니다.


// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
    setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
    setVol(.1);  // up by 10%
}, false);

// playback speed buttons
document.getElementById("slower").addEventListener("click", function () {
    video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function () {
    video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function () {
    video.playbackRate = 1;
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
    if (video.muted) {
        video.muted = false;
        evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
    } else {
        video.muted = true;
        evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
    }
}, false);


playbackRate 속성은 기본 설정 1을 사용하여 동영상의 기본 또는 정상 재생 속도의 승수를 나타냅니다. 속성을 2로 설정하면 재생 속도가 두 배가 되고 0.5로 설정하면 절반 속도로 재생됩니다. playbackRate가 음수 값으로 설정되면 Windows Internet Explorer 9에서는 0으로 반올림되어 기본적으로 재생이 일시 중지됩니다. Internet Explorer 10에서 playbackRate에 음수 값을 설정하면 동영상이 반대로 재생됩니다. W3C 사양에서는 상한을 권장하지 않지만 Internet Explorer에서는 playbackRate를 최대 8배속 속도로 제한합니다.

volume 속성을 사용하면 동영상 사운드트랙의 볼륨을 제어할 수 있습니다. volume 속성은 0에서 1 사이의 부동 소수점 값을 사용합니다. volume 속성은 0에서 1 사이여야 합니다. 그렇지 않으면 예외가 발생합니다. 다음 예제에서는 예외를 발생시키지 않고 볼륨 속성을 설정하는 한 가지 방법을 보여 줍니다. 볼륨 함수에서는 전달된 값 1 또는 10%(양수 또는 음수)를 현재 볼륨에 추가합니다. 볼륨이 허용 범위 0-1 외부에 있으면 가장 가까운 허용된 값으로 설정되어 예외를 방지합니다.


// change volume based on incoming value 
function setVol(value) {
    var vol = video.volume;
    vol += value;
    //  test for range 0 - 1 to avoid exceptions
    if (vol >= 0 && vol <= 1) {
        // if valid value, use it
        video.volume = vol;
    } else {
        // otherwise substitute a 0 or 1
        video.volume = (vol < 0) ? 0 : 1;                        
    }
}


muted 속성은 true로 설정되면 사운드트랙을 바로 음소거하거나 false로 설정되면 volume 속성에 설정된 볼륨 수준으로 사운드트랙을 복원합니다. 다음 예제에서는 muted 속성을 토글하고 단추에 표시되는 이미지를 전환하는 음소거 단추 이벤트 처리기를 보여 줍니다.


document.getElementById("mute").addEventListener("click", function (evt) {
    if (video.muted) {
        video.muted = false;
        evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
    } else {
        video.muted = true;
        evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
    }
}, false);


다음은 이전의 모든 예제에 대한 전체 코드 목록입니다.


<html >
  <head>
    <title>Full player example</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->    
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->

    <script type="text/javascript">
        function init() {        // Master function, encapsulates all functions
            var video = document.getElementById("Video1");                                               
            if (video.canPlayType) {   // tests that we have HTML5 video support
                // if successful, display buttons and set up events
                document.getElementById("buttonbar").style.display = "block";                
                document.getElementById("inputField").style.display = "block";

                // helper functions
                //  play video
                function vidplay(evt) {
                    if (video.src == "") {  // inital source load
                        getVideo();
                    }
                    button = evt.target; //  get the button id to swap the text based on the state                                    
                    if (video.paused) {   // play the file, and display pause symbol
                        video.play();
                        button.textContent = "||";
                    } else {              // pause the file, and display play symbol  
                        video.pause();
                        button.textContent = ">";
                    }
                }
                //  load video file from input field
                function getVideo() {
                    var fileURL = document.getElementById("videoFile").value;  // get input field                    
                    if (fileURL != "") {
                        video.src = fileURL;
                        video.load();  // if HTML source element is used
                        document.getElementById("play").click();  // start play
                    } else {
                        errMessage("Enter a valid video URL");  // fail silently
                    }
                }



                //  button helper functions 
                //  skip forward, backward, or restart
                function setTime(tValue) {
                //  if no video is loaded, this throws an exception 
                    try {
                        if (tValue == 0) {
                            video.currentTime = tValue;
                        }
                        else {
                            video.currentTime += tValue;
                        }
                        
                     } catch (err) {
                         // errMessage(err) // show exception
                     errMessage("Video content might not be loaded");
                       }
             }
                //  display an error message 
                function errMessage(msg) {
                // displays an error message for 5 seconds then clears it
                    document.getElementById("errorMsg").textContent = msg;
                    setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
                }
                // change volume based on incoming value 
                function setVol(value) {
                    var vol = video.volume;
                    vol += value;
                    //  test for range 0 - 1 to avoid exceptions
                    if (vol >= 0 && vol <= 1) {
                        // if valid value, use it
                        video.volume = vol;
                    } else {
                        // otherwise substitute a 0 or 1
                        video.volume = (vol < 0) ? 0 : 1;                        
                    }
                }
                //  button events               
                //  Play
                document.getElementById("play").addEventListener("click", vidplay, false);
                //  Restart
                document.getElementById("restart").addEventListener("click", function () {
                    setTime(0);
                }, false);
                //  Skip backward 10 seconds
                document.getElementById("rew").addEventListener("click", function () {
                    setTime(-10);
                }, false);
                //  Skip forward 10 seconds
                document.getElementById("fwd").addEventListener("click", function () {
                    setTime(10);
                }, false);
                //  set src == latest video file URL
                document.getElementById("loadVideo").addEventListener("click", getVideo, false);

                // fail with message 
                video.addEventListener("error", function (err) {
                    errMessage(err);
                }, true);
                // volume buttons
                document.getElementById("volDn").addEventListener("click", function () {
                    setVol(-.1); // down by 10%
                }, false);
                document.getElementById("volUp").addEventListener("click", function () {
                    setVol(.1);  // up by 10%
                }, false);

                // playback speed buttons
                document.getElementById("slower").addEventListener("click", function () {
                    video.playbackRate -= .25;
                }, false);
                document.getElementById("faster").addEventListener("click", function () {
                    video.playbackRate += .25;
                }, false);
                document.getElementById("normal").addEventListener("click", function () {
                    video.playbackRate = 1;
                }, false);
                document.getElementById("mute").addEventListener("click", function (evt) {
                    if (video.muted) {
                        video.muted = false;
                        evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
                    } else {
                        video.muted = true;
                        evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
                    }
                }, false);
            } // end of runtime
        }// end of master         
    </script>
    
    </head>
    <body onload="init();" >        
    
    <video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element">            
         HTML5 Video is required for this example
    </video>
    
    <div id="buttonbar" style="display: none;")>
        <button id="restart" title="Restart button">[]</button> 
        <button id="slower" title="Slower playback button">-</button> 
        <button id="rew" title="Rewind button" >&lt;&lt;</button>
        <button id="play" title="Play button">&gt;</button>
        <button id="fwd" title="Forward button" >&gt;&gt;</button>
        <button id="faster" title="Faster playback button">+</button>
        <button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>     
        <br />
        <label>Playback </label>
            <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>    
        
        <label>  Volume </label>
            <button id="volDn"  title="Volume down button">-</button>
            <button id="volUp"  title="Volume up button">+</button>
            <button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>        
    </div>   
    <br/>  
    <div id= "inputField" style="display:none;" >
        <label>Type or paste a video URL: <br/>
        <input type="text" id="videoFile" style="width: 300px;"  title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />        
        <button id="loadVideo" title="Load video button" >Load</button>
        </label>
    </div>
    <div title="Error message area" id="errorMsg" style="color:Red;"></div>  
    </body>
</html>


HTML5 동영상 이벤트에서는 이벤트를 사용하여 콘텐츠의 사용 가능 여부를 확인하는 방법, 동영상 재생 상태 및 동영상에서 현재 재생 위치를 모니터링하는 방법을 살펴봅니다.

관련 항목

웹 페이지에 HTML5 동영상 컨트롤 추가
How to use the F12 Developer Tools
HTML5 동영상 이벤트 사용
HTML5를 사용하여 웹 페이지에 오디오 플레이어를 추가하는 방법
Video object

 

 

표시:
© 2014 Microsoft