ThreeJSVideoTexture.js

APP.VideoPlayer = function() {
  var BorderWidth = 10;

  var self = this;

  self.onRender = function() {
    // Update video frame
    if (self.video.readyState === self.video.HAVE_ENOUGH_DATA) {
      var w = self.canvas.width;
      var h = self.canvas.height;

      // Draw the background color which will form the image border
      self.canvasContext.fillStyle = 'rgb(220, 220, 220)';
      self.canvasContext.fillRect(0, 0, w, h);

      // Draw the video frame as image
      self.canvasContext.drawImage(self.video, BorderWidth, BorderWidth,
        w - (BorderWidth * 2), h - (BorderWidth * 2));

      self.mainTexture.needsUpdate = true;
    }
  };

  self.update = function(data) {
    self.data = data;

    if (data.videoPath) {
      // Adjust canvas size to fit the video
      self.canvas.width = data.videoWidth + (2 * BorderWidth);
      self.canvas.height = data.videoHeight + (2 * BorderWidth);

      // Create the video element for decoding the video
      self.video = document.createElement('video');
      self.video.setAttribute('webkit-playsinline', '');
      self.video.setAttribute('playsinline', '');
      self.video.width = data.videoWidth;
      self.video.height = data.videoHeight;
      self.video.setAttribute('autoplay', '');
      self.video.setAttribute('loop', '');
      self.video.crossOrigin = 'anonymous';

      if (self.video.canPlayType("video/mp4").match(/maybe|probably/i)) {
        console.log('Should be able to play mp4');
      }

      self.video.oncanplay = function() {
        console.log('Video ready to play - playing!');
        self.video.play();
      };

      self.video.onerror = function() {
        var err = "unknown error";

        switch (self.video.error.code) {
          case 1:
            err = 'video loading aborted';
            break;
          case 2:
            err = 'network loading error';
            break;
          case 3:
            err = 'video decoding failed / corrupted data or unsupported codec';
            break;
          case 4:
            err = 'video not supported';
            break;
        };

        console.log('Video error: ' + err);
      };

      self.video.onloadeddata = function() {
        console.log("Loaded the video's data!");
        // console.log('Video duration: ', self.video.duration);

        self.canvas.width = self.data.videoWidth + (2 * BorderWidth);
        self.canvas.height = self.data.videoHeight + (2 * BorderWidth);

        // Remove any existing render listener
        if (self.onRenderListener) {
          events.removeEventListener('render', self.onRenderListener);
          delete self.onRenderListener;
        }

        self.onRenderListener = self.onRender.bind(self);
        events.addEventListener('render', self.onRenderListener);
      };

      // Start loading the video
      self.video.src = data.videoPath;
  };

  self.init = function() {
    // Create an offscreen canvas for rendering stuff
    self.canvas = document.createElement('canvas');
    self.canvasContext = self.canvas.getContext('2d');

    self.mainTexture = new THREE.Texture(self.canvas);
    self.mainTexture.minFilter = THREE.LinearFilter; // Allows non-power-of-2 images
    self.mainTexture.magFilter = THREE.LinearFilter; // Allows non-power-of-2 images

    // <snip> removed unrelated parts
  };

  self.init();
};