<video id="video" controls loop width='300' autoplay webkit-playsinline="true" src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4'></video>

<p>
  <button type="button" id='btn-play'>开始</button>
  <button type="button" id='btn-pause'>暂停</button>
</p>
/*
 * video视频转成canvas(兼容至IE8+)
 * Author: Zijor   Created On: 2017-06-25
 * 
 *  使用方法:
 *      var videoCanvas = new VideoToCanvas(videoDom);
 *
 *  对象的属性:
 *      暂无。
 *
 *  对象的方法:
 *      play       播放视频
 *      pause      暂停视频
 *      playPause  播放或暂停视频
 */
var VideoToCanvas = (function(window, document) {
  function VideoToCanvas(videoElement) {
    if(!videoElement) {return;}

    var canvas = document.createElement('canvas');
    canvas.width = videoElement.offsetWidth;
    canvas.height = videoElement.offsetHeight;
    ctx = canvas.getContext('2d');

    var newVideo = videoElement.cloneNode(false);

    var timer = null;

    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

    function drawCanvas() {
      ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
      timer = requestAnimationFrame(drawCanvas);
    }

    function stopDrawing() {
      cancelAnimationFrame(timer);
    }

    newVideo.addEventListener('play', function() {
      drawCanvas();
    },false);
    newVideo.addEventListener('pause', stopDrawing, false);
    newVideo.addEventListener('ended', stopDrawing, false);

    videoElement.parentNode.replaceChild(canvas, video);

    this.play = function() {
      newVideo.play();
    };

    this.pause = function() {
      newVideo.pause();
    };

    this.playPause = function() {
      if(newVideo.paused) {
        this.play();
      } else {
        this.pause();
      }
    };
    
    this.drawFrame = drawCanvas;
  }

  return VideoToCanvas;

})(window, document);

var video = document.getElementById('video');
var canvasVideo = new VideoToCanvas(video);
document.getElementById('btn-play').addEventListener('click', function() {
  canvasVideo.play();
}, false);
document.getElementById('btn-pause').addEventListener('click', function() {
  canvasVideo.pause();
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.