(Canvas) canvas로 동영상 재생시키기

<div>
    <video id="video" src="https://www.bigbuckbunny.org/" width="0" height="0" controls="" playsinline="" loop=""></video>
    <canvas id="myCanvas" width="document.body.getBoundingClientRect().width;" height="document.body.getBoundingClientRect().height;"></canvas>
</div>
 
<script>
  var v = document.getElementById("video");
  var c = document.getElementById("myCanvas");
 
  v.play();
 
  if (c.getContext) {
    c.width = document.body.scrollWidth;
    c.height = $(window).height();
 
    var ctx = c.getContext("2d");
    var i;
 
    v.addEventListener(
      "play",
      function() {
        a = window.setInterval(function() {}, false);
        i = window.setInterval(function() {
          ctx.drawImage(v, 0, 0, c.width, c.height);
        }, 30);
      },
      false
    );
    v.addEventListener(
      "pause",
      function() {
        window.clearInterval(i);
      },
      false
    );
    v.addEventListener(
      "ended",
      function() {
        clearInterval(i);
      },
      false
    );
  } else {
    alert("Canvas 미지원");
  }
 
  setTimeout(function() {
    $(".beurator").css("display", "block");
  }, 300);
 
  $(window).resize(function() {
    if (c.getContext) {
      c.width = document.body.scrollWidth;
      c.height = $(window).height();
      var ctx = c.getContext("2d");
      var i;
      v.addEventListener(
        "play",
        function() {
          a = window.setInterval(function() {}, false);
          i = window.setInterval(function() {
            ctx.drawImage(v, 0, 0, c.width, c.height);
          }, 20);
        },
        false
      );
      v.addEventListener(
        "pause",
        function() {
          window.clearInterval(i);
        },
        false
      );
      v.addEventListener(
        "ended",
        function() {
          clearInterval(i);
        },
        false
      );
    } else {
      alert("Canvas 미지원");
    }
  });
</script>
 

 

playsinline을 쓰면 아이폰, 안드로이드에서 자동재생을 할 수 있다.

브라우저 화면을 꽉 메우는 반응형 동영상이 재생된다.