title: How to load video by using canvas.loadFromJSON in fabricJS
body: <p>I'm trying to set video as background on canvas, when I set it for the first time it works fine. but while reloading it by using loadFromJSON() it is showing blank background on canvas.</p>
  
  <p>I'm using angular 6 .</p>
  
  <p>here is the snippet</p>
  
  <p>(note: here I have used simple class. while in my code I'm using number of custom classes)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var removeFromArray = fabric.util.removeFromArray;
  var custom_attributes = ['customSourceType', 'id', 'scaleMode', 'original_src', 'exclusiveName', 'video_src', 'background_image'];
  
  fabric.Object.prototype.toObject = (function (toObject) {
      return function (propertiesToInclude) {
          propertiesToInclude = (propertiesToInclude || []).concat(
              ['video_src', 'background_image', 'src']
          );
          return toObject.apply(this, [propertiesToInclude]);
      };
  })(fabric.Object.prototype.toObject);
  
  
  fabric.Object.NUM_FRACTION_DIGITS = 2;
  fabric.Object.prototype.set({
      borderColor: '#00c3f9',
      cornerColor: '#00c3f9',
      cornerStrokeColor: '#ffffff',
      cornerStyle: 'circle',
      minScaleLimit: 0,
      lockScalingFlip: true,
      selectionDashArray: [5, 0],
      borderDashArray: [5, 5],
      cornerDashArray: [2, 0],
      borderScaleFactor: 1,
      cornerSize: 15,
      transparentCorners: false,
      centeredRotation: true
  });
  
  
  var canvas = new fabric.Canvas('c', {
      hoverCursor: 'pointer',
      selection: true,
      selectionBorderColor: '#00c3f9',
      selectionColor: 'rgba(0, 195, 249, 0.2)',
      preserveObjectStacking: true,
      originX: 'center',
      originY: 'center',
  });
  var url_mp4 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';
  
  function getVideoElement(url) {
      var videoE = document.createElement('video');
      videoE.width = 400;
      videoE.height = 250;
      videoE.muted = true;
      videoE.crossOrigin = "anonymous";
      var source = document.createElement('source');
      source.src = url;
      source.type = 'video/mp4';
      videoE.appendChild(source);
      return videoE;
  }
  
  var videoE = getVideoElement(url_mp4);
  var fab_video = new fabric.Image(videoE, {left: 0,   top: 0});
      fab_video.set('video_src', url_mp4);
      fab_video.set('background_image', url_mp4);
  
  fab_video.set('video_src', url_mp4);
  canvas.setBackgroundImage(fab_video);
  fab_video.getElement().volume = 0;
  fab_video.getElement().play();
  fabric.util.requestAnimFrame(function render() {
      canvas.renderAll();
      fabric.util.requestAnimFrame(render);
  });
  
  
  
  
  var data = canvas.toJSON(custom_attributes);
  
  $(document.body).on('click', '#loadfromjson' ,function(){
  console.clear();
  var json = canvas.toJSON(custom_attributes);
      canvas.loadFromJSON(json, canvasLoaded);
  });
  
  
  function canvasLoaded() {
     var jsonDATA = canvas.toJSON(custom_attributes);
     canvas.renderAll.bind(canvas);
     var canvasBG = jsonDATA['backgroundImage'];
     console.log(canvasBG);
        if(canvasBG.hasOwnProperty('video_src')) {
           var url_mp4 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';
          var videoE = this.getVideoElement(url_mp4, 480, 620);
          fab_video = new fabric.Image(videoE, {
              left: 0,
              top: 0,
              height: 480,
              width: 620,
              objectCaching: false,
              excludeFromExport: false
          });
          
          fab_video.toObject = (function (toObject) {
              return function () {
                  return fabric.util.object.extend(toObject.call(this), { 'video_src': url_mp4, 'background_image': url_mp4 });
              };
          })(fab_video.toObject);
          canvas.setBackgroundImage(fab_video, function () {
              canvas.renderAll.bind(canvas);
          }, {
                  height: 480,
                  width: 620,
                  crossOrigin: 'anonymous',
                  background_image: url_mp4,
                  isFromServer: true,
                  video_src: url_mp4
              });
          fab_video.getElement().volume = 0;
          fab_video.getElement().play();
          fabric.util.requestAnimFrame(function render() {
              canvas.renderAll();
              fabric.util.requestAnimFrame(render);
          });
        }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js?v1"&gt;&lt;/script&gt;
  &lt;button id="loadfromjson"&gt;Load from JSON&lt;/button&gt;
  &lt;canvas id="c" width="600" height="400"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>