HTML5 동영상 이벤트 사용

HTML5 동영상 이벤트는 웹 페이지를 간소화하고 웹 페이지에 효율성을 추가할 수 있는 방법을 제공합니다.

이벤트를 사용하는 이유는?

HTML5 동영상 개체는 웹 페이지의 콘텐츠를 간소화하고 향상시킬 수 있는 많은 이벤트를 제공합니다. 여기에서는 이벤트를 사용하여 콘텐츠의 사용 가능 여부, 동영상 재생 상태 및 동영상에서 현재 재생 위치를 모니터링하는 방법을 확인하는 예제를 살펴봅니다.

내 웹 페이지의 준비 상태는?

동영상을 사용하는 웹 페이지의 경우 페이지 요소가 로드된 경우와 콘텐츠가 재생될 수 있는 경우의 두 가지 "준비" 수준이 있습니다.

HTML5 동영상 페이지에서 가장 일반적인 첫 번째 작업은 브라우저에서 동영상을 지원하는지 여부를 확인하는 것입니다. 이 작업은 페이지의 동영상 요소를 만들었는지 여부와 스크립트에 필요한 속성을 사용할 수 있는지 여부를 확인하여 수행되는 경우가 많습니다. DOM(문서 개체 모델)에서 요소가 로드되거나 만들어진 경우 스크립트에서는 요소를 확인할 수만 있습니다. 웹 페이지 요소 로드가 완료되었는지 확인하는 적절한 방법은 document 개체에서 DOMContentLoaded 이벤트를 사용하는 것입니다. 이 이벤트는 페이지 요소 로드가 완료되고 기본 DOM을 사용할 수 있는 경우에 발생합니다. 다음 예제에서는 웹 페이지의 "init()" 함수를 호출하는 DOMContentLoaded에 대한 처리기를 만듭니다.


  //  When the HTML elements load, call init()
  document.addEventListener("DOMContentLoaded", init, false);
 
  //  Rotate the video by 30degrees when image is clicked
  function init() {
    var video = document.getElementById("theVideo");
    if (video) {
      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);
    }
  }


이 예제의 "init()" 함수는 페이지의 스크립트 부분에서 모든 기능을 캡슐화합니다.

또 다른 방법은 이 항목에 대한 예제에서 수행한 것과 같이 <script> 섹션을 추가하는 것입니다. HTML 부분이 로드된 후 스크립트 섹션이 로드됩니다. 이렇게 하면 모든 HTML 요소가 로드됩니다. HTML 섹션의 모든 콘텐츠를 로드하는 경우 미디어가 요소보다 로드하는 데 더 오래 걸리므로 onload 이벤트를 사용하여 완료를 확인해야 할 수 있습니다.

스크립트 섹션은 "video", "vLength", "pgFlag" 등 여러 가지 전역 변수를 설정합니다. 이러한 변수는 동영상 개체, 현재 로드된 동영상의 길이(나중에 계산에 사용됨) 및 진행률 추적에 사용되는 플래그를 제공합니다.


var video = document.getElementById("Video1");
var vLength;
var pgFlag = ""; // used for progress tracking


그런 다음 동영상 변수를 테스트하여 canPlayType 속성을 사용할 수 있는지 확인합니다. 사용할 수 있는 경우 HTML5 video 요소가 지원되고 다른 모든 코드가 실행됩니다. 동영상이 지원되지 않으면 구문(video.canPlayType)이 false를 반환하고 메시지가 표시됩니다. 동영상 지원이 확인되면 표시 스타일을 통해 입력 필드가 사용됩니다.


if (video.canPlayType) {   // tests that we have HTML5 video support


이제 파일을 입력 필드에 입력하고 로드할 수 있습니다. 동영상 파일의 위치에 따라 네트워크 또는 서버 속도 저하로 인해 나머지 페이지가 있으면 동영상이 준비되지 않을 수 있습니다. 다음 예제에서는 oncanplay 이벤트를 사용하여 동영상이 재생을 시작할 만큼 충분히 로드된 경우를 알려줍니다. oncanplay 이벤트가 발생하면 처리기에서 재생 컨트롤을 표시하여 재생 준비가 되었다는 신호를 보냅니다.


// content has loaded, display buttons and set up events
video.addEventListener("canplay", function () {
  document.getElementById("buttonbar").style.display = "block";
}, false);


동영상이 동영상 개체에 로드되면 처음으로 로드되는 항목 중 하나는 동영상에 대한 정보가 포함된 메타데이터입니다. 다음 예제에서는 onloadedmetadata 이벤트를 사용하여 동영상의 길이를 결정합니다. onloadedmetadata 이벤트는 video 개체가 기간을 알려는 콘텐츠에 대한 충분한 정보를 가져올 때 발생합니다.


//  display video duration when available
video.addEventListener("loadedmetadata", function () {
  vLength = video.duration.toFixed(1);
  document.getElementById("vLen").textContent = vLength; // global variable
}, false);


현재 위치?

마지막 예제에서는 로드된 동영상의 기간이나 길을 가져오는 방법을 살펴보았습니다. 동영상 재생이 시작되면 ontimeupdate 이벤트를 사용하여 동영상에서의 현재 위치를 가져올 수 있습니다. ontimeupdate 이벤트는 currentTime 속성이 변경될 때 발생합니다. 이벤트 처리기에서 currentTime 값은 동영상 개체에서 가져와 표시됩니다. currentTime 속성은 소수 자릿수를 최대 12자리까지 사용할 수 있는 부동 소수점 변수입니다. 그러나 성능상의 이유로 이 이벤트는 Windows Internet Explorer에서 1초에 네 번만 발생됩니다. 예제에 표시하기 위해 "toFixed()" 메서드를 사용하여 currentTime을 한 자리로 반올림합니다. 동영상이 실행되면 현재 시간이 업데이트되고 표시됩니다.


//  display the current and remaining times
video.addEventListener("timeupdate", function () {
  //  Current time  
  var vTime = video.currentTime;
  document.getElementById("curTime").textContent = vTime.toFixed(1);
  document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);


또한 예제에서는 기간에서 현재 시간을 빼서 나머지 시간을 보고합니다.

현재 해당 단추의 역할은?

동영상 플레이어 컨트롤의 일반적인 경향은 재생일시 중지 또는 사운드음소거 같은 두 상태 사이의 토글 단추입니다. JavaScript를 사용하여 HTML5 동영상 플레이어 제어의 예제에서는 단추 처리기에서 이 작업을 수행합니다. 예를 들어 재생 단추를 클릭하면 클릭 처리기에서 paused 속성을 확인하고 동영상을 재생하거나 일시 중지합니다. 또한 단추를 전환하여 동영상이 재생될 때는 텍스트를 일시 중지하고 동영상이 일시 중지될 때는 텍스트를 재생합니다. 이 작업은 대부분의 경우에 작동하지만 동영상 요소에서 controls를 사용하도록 설정한 경우에는 두 가지 단추 설정이 동기화되지 않을 수 있습니다. 이 예제에서는 재생 단추 처리기에서 일시 중지된 속성 사용을 보여 줍니다.


                //  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 = ">";
                    }
                }


더 좋은 방법은 onpauseonplaying 이벤트를 사용하여 단추를 동기화하는 것입니다. 단추를 클릭하면 일시 중지된 속성만 확인하는 이전 예제와 달리 다음 예제에서는 단추가 해당 상태에 도달한 방법에 관계없이 동영상 재생 상태가 변경되면 단추를 토글합니다.


//  paused and playing events to control buttons
video.addEventListener("pause", function () {
  document.getElementById("play").textContent = ">";
}, false);

video.addEventListener("playing", function () {
  document.getElementById("play").textContent = "||";
}, false);


이 페이지 끝에 있는 예제를 시험하여 외부 단추와 동영상 개체에 내장된 컨트롤이 동기화된 상태로 유지되는 방식을 확인합니다.

onvolumechange 이벤트에서 동일한 기술을 사용하여 음소거 단추의 그래픽을 제어할 수 있습니다. 별도의 음소거 및 볼륨 이벤트가 없으므로 다음 예제에서는 onvolumechange를 사용하여 두 상태를 처리합니다.


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


이 예제에서는 onvolumechange 이벤트가 발생하면 "if" 문에서 muted 속성을 테스트합니다. video 개체의 사운드트랙이 음소거되면 음소거 그래픽이 표시되고 그렇지 않으면 사운드 그래픽이 표시됩니다. 그래픽이 변경되면 alt 텍스트도 변경되어 접근성에 대한 정확한 설명을 제공합니다.

참고  모든 단추, 입력 요소 및 동영상 요 소에서는 사용자가 요소 위에 마우스를 놓으면 title 특성을 사용하여 도구 설명을 제공합니다. 이 실습에서는 화면 읽기 프로그램 장치에 적합한 식별 텍스트도 제공합니다.

이미 수행된 경우?

HTML5 동영상 플레이어에서 재생할 콘텐츠를 버퍼링해야 합니다. 동영상 콘텐츠가 큰 경우 사용자에게 좋은 환경을 제공하려면 페이지에서 재생 및 메시징을 관리해야 할 수 있습니다. 예를 들어 다운로드에 너무 오래 걸리는 경우 설명 없이 동영상을 바로 중지하는 대신 이벤트를 사용하여 문제가 있음을 사용자에게 경고할 수 있습니다. onstalled, onwaiting 또는 onended를 사용하여 동영상이 중단될 때 작업을 결정할 수 있습니다. 다음 표에서는 재생 및 사용자의 기대를 관리하는 데 사용할 수 있는 이벤트에 대해 설명합니다.

이벤트설명
oncanplaythrough 추가 버퍼링 없이 파일의 끝까지 재생을 완료할 수 있을 때 발생합니다.
onloadstart Internet Explorer에서 미디어 데이터 찾기를 시작할 때 발생합니다. 동영상(또는 오디오) 리소스가 사이트에서 요청된 경우 발생하며 요청당 한 번만 발생합니다.
onloadeddata 현재 재생 위치에서 미디어 데이터가 로드될 때 발생합니다. 동영상이 재생을 시작합니다.
onended 재생의 끝에 도달할 때 발생합니다.
onemptied 동영상 개체가 초기 상태로 초기화할 때 발생합니다.
onstalled 다운로드가 4초 이상 동안 중단된 경우 발생합니다. 이 경우 네트워크 문제를 나타낼 수 있습니다.
onwaiting 다음 동영상 프레임을 사용할 수 없기 때문에 재생이 중지될 때 발생합니다(버퍼링될 수 있음).
onprogress 미디어 콘텐츠 다운로드의 진행률을 나타내기 위해 발생됩니다. 다운로드가 완료되면 발생을 중지합니다.
ondurationchange onloadstart 이후 및 onloadedmetadata 이전에 바로 발생합니다.

 

코드 샘플은 이 항목에 표시된 예제의 전체 코드이며 여기서 설명한 다운로드 및 버퍼링에 적용되는 이벤트를 보여 주는 섹션을 포함합니다.

참고  이 샘플은 사운드 설정  vol2.png   사운드 조정 설정 단추 그래픽 및 사운드 해제 mute2.png  사운드 조정 해제 단추 그래픽 이미지를 사용합니다.


<!DOCTYPE html >

<html >
  <head>
    <title>Video events 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"/> -->    
    </head>
    <body >        

    <div>
        <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>    
    <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; font-size:larger;")>
        <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="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>     
        <br />
        <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>           
        <br />
        <label>  Volume: </label>
            <button id="volDn"  title="Volume down button">-</button>
            <button id="volUp"  title="Volume up button">+</button>
        <br />
        <div id="status" >Length(seconds): <span id="vLen"></span> <br />
        Current time:  <span id="curTime" title="Current time"></span><br />   Remaining time: <span id="vRemaining" title="Remaining time"></span></div>
    </div>   
    <br/>  

    <div title="Error message area" id="errorMsg" style="color:Red;"></div>  
    <div title="Event status area" >
      <label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br />
      <label>onloadstart: </label><span class="stats"  id="ls"></span><br />
      <label>onprogress: </label><span class="stats"  id="pg"></span><br />
      <label>onloadeddata: </label><span class="stats" id="ld"></span><br />
      <label>onended: </label><span class="stats" id="ndd"></span><br />
      <label>onemptied: </label><span class="stats" id="mt"></span><br />
      <label>onstalled: </label><span class="stats" id="stall"></span><br />
      <label>onwaiting: </label><span class="stats" id="waiting"></span><br />
      <label>ondurationchange: </label><span class="stats" id="dc"></span><br />    
    </div>

    <script>
        var video = document.getElementById("Video1");
        var vLength;
        var pgFlag = ""; // used for progress tracking
        if (video.canPlayType) {   // tests that we have HTML5 video support

          //  video button helper functions
          //  play video
          function vidplay(evt) {
            if (video.src == "") {  // inital source load
              getVideo();
            }
            if (video.paused) {   // play the file, and display pause symbol
              video.play();
            } else {              // pause the file, and display play symbol  
              video.pause();
            }
          }
          
          //  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");
            }
          }

          // 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);

          // 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;
            } else {
              video.muted = true;
            }
          }, false);

          //  any video error will fail with message 
          video.addEventListener("error", function (err) {
            errMessage(err);
          }, true);
          // content has loaded, display buttons and set up events
          video.addEventListener("canplay", function () {
            document.getElementById("buttonbar").style.display = "block";
          }, false);

          //  display video duration when available
          video.addEventListener("loadedmetadata", function () {
            vLength = video.duration.toFixed(1);
            document.getElementById("vLen").textContent = vLength; // global variable
          }, false);

          //  display the current and remaining times
          video.addEventListener("timeupdate", function () {
            //  Current time  
            var vTime = video.currentTime;
            document.getElementById("curTime").textContent = vTime.toFixed(1);
            document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
          }, false);
          //  paused and playing events to control buttons
          video.addEventListener("pause", function () {
            document.getElementById("play").textContent = ">";
          }, false);

          video.addEventListener("playing", function () {
            document.getElementById("play").textContent = "||";
          }, false);

          video.addEventListener("volumechange", function () {
            if (video.muted) {
              // if muted, show mute image
              document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />";
            } else {
              // if not muted, show not muted image
              document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />";
            }
          }, false);
          //  Download and playback status events.
          video.addEventListener("loadstart", function () {
            document.getElementById("ls").textContent = "Started";
          }, false);
          video.addEventListener("loadeddata", function () {
            document.getElementById("ld").textContent = "Data was loaded";
          }, false);

          video.addEventListener("ended", function () {
            document.getElementById("ndd").textContent = "Playback ended";
          }, false);

          video.addEventListener("emptied", function () {
            document.getElementById("mt").textContent = "Video reset";
          }, false);

          video.addEventListener("stalled", function () {
            document.getElementById("stall").textContent = "Download was stalled";
          }, false);
          video.addEventListener("waiting", function () {
            document.getElementById("waiting").textContent = "Player waited for content";
          }, false);
          video.addEventListener("progress", function () {
            pgFlag += "+";
            if (pgFlag.length > 10) {
              pgFlag = "+";
            }
            document.getElementById("pg").textContent = pgFlag;

          }, false);
          video.addEventListener("durationchange", function () {
            document.getElementById("dc").textContent = "Duration has changed";
          }, false);
          video.addEventListener("canplaythrough", function () {
            document.getElementById("cpt").textContent = "Ready to play whole video";
          }, false);
        } else {
          errMessage("HTML5 Video is required for this example");
          // end of runtime
        }
        //  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);
        }
    </script>



  </body>
</html>


관련 항목

웹 페이지에 HTML5 동영상 컨트롤 추가
Internet Explorer 10 샘플 및 자습서
JavaScript를 사용하여 HTML5 동영상 플레이어 제어
HTML5 Audio and Video
페이지를 나갈 때 미디어 일시 중지 또는 미디어의 볼륨 변경

 

 

표시:
© 2014 Microsoft