added FootageElement support
diff --git a/player/index.html b/player/index.html
index b09e35f..061a793 100644
--- a/player/index.html
+++ b/player/index.html
@@ -108,6 +108,7 @@
     <script src="js/elements/ImageElement.js"></script>
     <script src="js/elements/SolidElement.js"></script>
     <script src="js/elements/AudioElement.js"></script>
+    <script src="js/elements/FootageElement.js"></script>
     <script src="js/elements/svgElements/SVGCompElement.js" data-builds="full,svg,svg_light,html,html_light"></script>
     <script src="js/elements/svgElements/SVGTextElement.js" data-builds="full,svg,svg_light,html,html_light"></script>
     <script src="js/elements/svgElements/SVGShapeElement.js"></script>
@@ -154,6 +155,7 @@
     <script src="js/utils/expressions/shapes/ShapePathInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
     <script src="js/utils/expressions/TextInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
     <script src="js/utils/expressions/LayerInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
+    <script src="js/utils/expressions/FootageInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
     <script src="js/utils/expressions/CompInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
     <script src="js/utils/expressions/TransformInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
     <script src="js/utils/expressions/ProjectInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
@@ -181,9 +183,9 @@
     var elem = document.getElementById('lottie');
     var animData = {
         container: elem,
-        renderer: 'svg',
+        renderer: 'canvas',
         loop: true,
-        autoplay: true,
+        autoplay: false,
         rendererSettings: {
             progressiveLoad:false,
             preserveAspectRatio: 'xMidYMid meet',
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 9f15981..6ba5c2d 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -299,7 +299,8 @@
 AnimationItem.prototype.checkLoaded = function () {
   if (!this.isLoaded
         && this.renderer.globalData.fontManager.isLoaded
-        && (this.imagePreloader.loaded() || this.renderer.rendererType !== 'canvas')
+        && (this.imagePreloader.loadedImages() || this.renderer.rendererType !== 'canvas')
+        && (this.imagePreloader.loadedFootages())
   ) {
     this.isLoaded = true;
     dataManager.completeData(this.animationData, this.renderer.globalData.fontManager);
diff --git a/player/js/elements/FootageElement.js b/player/js/elements/FootageElement.js
new file mode 100644
index 0000000..54c8036
--- /dev/null
+++ b/player/js/elements/FootageElement.js
@@ -0,0 +1,32 @@
+/* global extendPrototype, RenderableElement, BaseElement, FrameElement, FootageInterface */
+
+function FootageElement(data, globalData, comp) {
+  this.initFrame();
+  this.initRenderable();
+  this.assetData = globalData.getAssetData(data.refId);
+  this.footageData = globalData.imageLoader.getAsset(this.assetData);
+  this.initBaseData(data, globalData, comp);
+}
+
+FootageElement.prototype.prepareFrame = function () {
+};
+
+extendPrototype([RenderableElement, BaseElement, FrameElement], FootageElement);
+
+FootageElement.prototype.getBaseElement = function () {
+  return null;
+};
+
+FootageElement.prototype.renderFrame = function () {
+};
+
+FootageElement.prototype.destroy = function () {
+};
+
+FootageElement.prototype.initExpressions = function () {
+  this.layerInterface = FootageInterface(this);
+};
+
+FootageElement.prototype.getFootageData = function () {
+  return this.footageData;
+};
diff --git a/player/js/elements/canvasElements/CVImageElement.js b/player/js/elements/canvasElements/CVImageElement.js
index e810845..82c827c 100644
--- a/player/js/elements/canvasElements/CVImageElement.js
+++ b/player/js/elements/canvasElements/CVImageElement.js
@@ -3,7 +3,7 @@
 
 function CVImageElement(data, globalData, comp) {
   this.assetData = globalData.getAssetData(data.refId);
-  this.img = globalData.imageLoader.getImage(this.assetData);
+  this.img = globalData.imageLoader.getAsset(this.assetData);
   this.initElement(data, globalData, comp);
 }
 extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);
diff --git a/player/js/renderers/BaseRenderer.js b/player/js/renderers/BaseRenderer.js
index 3105bbb..14f2570 100644
--- a/player/js/renderers/BaseRenderer.js
+++ b/player/js/renderers/BaseRenderer.js
@@ -1,4 +1,4 @@
-/* global AudioElement, FontManager */
+/* global AudioElement, FootageElement, FontManager */
 
 function BaseRenderer() {}
 BaseRenderer.prototype.checkLayers = function (num) {
@@ -36,6 +36,8 @@
       return this.createAudio(layer);
     case 13:
       return this.createCamera(layer);
+    case 15:
+      return this.createFootage(layer);
     default:
       return this.createNull(layer);
   }
@@ -49,6 +51,10 @@
   return new AudioElement(data, this.globalData, this);
 };
 
+BaseRenderer.prototype.createFootage = function (data) {
+  return new FootageElement(data, this.globalData, this);
+};
+
 BaseRenderer.prototype.buildAllItems = function () {
   var i;
   var len = this.layers.length;
diff --git a/player/js/utils/expressions/FootageInterface.js b/player/js/utils/expressions/FootageInterface.js
new file mode 100644
index 0000000..a1e5ee7
--- /dev/null
+++ b/player/js/utils/expressions/FootageInterface.js
@@ -0,0 +1,61 @@
+/* global */
+/* exported FootageInterface */
+
+var FootageInterface = (function () {
+  var outlineInterfaceFactory = (function (elem) {
+    var currentPropertyName = '';
+    var currentProperty = elem.getFootageData();
+    function init() {
+      currentPropertyName = '';
+      currentProperty = elem.getFootageData();
+      return searchProperty;
+    }
+    function searchProperty(value) {
+      if (currentProperty[value]) {
+        currentPropertyName = value;
+        currentProperty = currentProperty[value];
+        if (typeof currentProperty === 'object') {
+          return searchProperty;
+        }
+        return currentProperty;
+      }
+      var propertyNameIndex = value.indexOf(currentPropertyName);
+      if (propertyNameIndex !== -1) {
+        var index = parseInt(value.substr(propertyNameIndex + currentPropertyName.length), 10);
+        currentProperty = currentProperty[index];
+        if (typeof currentProperty === 'object') {
+          return searchProperty;
+        }
+        return currentProperty;
+      }
+      return '';
+    }
+    return init;
+  });
+
+  var dataInterfaceFactory = function (elem) {
+    function interfaceFunction(value) {
+      if (value === 'Outline') {
+        return interfaceFunction.outlineInterface();
+      }
+      return null;
+    }
+
+    interfaceFunction._name = 'Outline';
+    interfaceFunction.outlineInterface = outlineInterfaceFactory(elem);
+    return interfaceFunction;
+  };
+
+  return function (elem) {
+    function _interfaceFunction(value) {
+      if (value === 'Data') {
+        return _interfaceFunction.dataInterface;
+      }
+      return null;
+    }
+
+    _interfaceFunction._name = 'Data';
+    _interfaceFunction.dataInterface = dataInterfaceFactory(elem);
+    return _interfaceFunction;
+  };
+}());
diff --git a/player/js/utils/imagePreloader.js b/player/js/utils/imagePreloader.js
index b0d3266..a8979f6 100644
--- a/player/js/utils/imagePreloader.js
+++ b/player/js/utils/imagePreloader.js
@@ -1,4 +1,4 @@
-/* global createTag, createNS, isSafari */
+/* global createTag, createNS, isSafari, assetLoader */
 /* exported ImagePreloader */
 
 var ImagePreloader = (function () {
@@ -14,7 +14,15 @@
 
   function imageLoaded() {
     this.loadedAssets += 1;
-    if (this.loadedAssets === this.totalImages) {
+    if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {
+      if (this.imagesLoadedCb) {
+        this.imagesLoadedCb(null);
+      }
+    }
+  }
+  function footageLoaded() {
+    this.loadedFootagesCount += 1;
+    if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {
       if (this.imagesLoadedCb) {
         this.imagesLoadedCb(null);
       }
@@ -93,14 +101,34 @@
     return ob;
   }
 
+  function createFootageData(data) {
+    var ob = {
+      assetData: data,
+    };
+    var path = getAssetsPath(data, this.assetsPath, this.path);
+    assetLoader.load(path, function (footageData) {
+      ob.img = footageData;
+      this._footageLoaded();
+    }.bind(this), function () {
+      ob.img = {};
+      this._footageLoaded();
+    }.bind(this));
+    return ob;
+  }
+
   function loadAssets(assets, cb) {
     this.imagesLoadedCb = cb;
     var i;
     var len = assets.length;
     for (i = 0; i < len; i += 1) {
       if (!assets[i].layers) {
-        this.totalImages += 1;
-        this.images.push(this._createImageData(assets[i]));
+        if (!assets[i].t) {
+          this.totalImages += 1;
+          this.images.push(this._createImageData(assets[i]));
+        } else if (assets[i].t === 3) {
+          this.totalFootages += 1;
+          this.images.push(this.createFootageData(assets[i]));
+        }
       }
     }
   }
@@ -113,7 +141,7 @@
     this.assetsPath = path || '';
   }
 
-  function getImage(assetData) {
+  function getAsset(assetData) {
     var i = 0;
     var len = this.images.length;
     while (i < len) {
@@ -130,10 +158,14 @@
     this.images.length = 0;
   }
 
-  function loaded() {
+  function loadedImages() {
     return this.totalImages === this.loadedAssets;
   }
 
+  function loadedFootages() {
+    return this.totalFootages === this.loadedFootagesCount;
+  }
+
   function setCacheType(type, elementHelper) {
     if (type === 'svg') {
       this._elementHelper = elementHelper;
@@ -145,11 +177,15 @@
 
   function ImagePreloaderFactory() {
     this._imageLoaded = imageLoaded.bind(this);
+    this._footageLoaded = footageLoaded.bind(this);
     this.testImageLoaded = testImageLoaded.bind(this);
+    this.createFootageData = createFootageData.bind(this);
     this.assetsPath = '';
     this.path = '';
     this.totalImages = 0;
+    this.totalFootages = 0;
     this.loadedAssets = 0;
+    this.loadedFootagesCount = 0;
     this.imagesLoadedCb = null;
     this.images = [];
   }
@@ -158,12 +194,14 @@
     loadAssets: loadAssets,
     setAssetsPath: setAssetsPath,
     setPath: setPath,
-    loaded: loaded,
+    loadedImages: loadedImages,
+    loadedFootages: loadedFootages,
     destroy: destroy,
-    getImage: getImage,
+    getAsset: getAsset,
     createImgData: createImgData,
     createImageData: createImageData,
     imageLoaded: imageLoaded,
+    footageLoaded: footageLoaded,
     setCacheType: setCacheType,
   };
 
diff --git a/tasks/build.js b/tasks/build.js
index d301b35..e8bcc2b 100644
--- a/tasks/build.js
+++ b/tasks/build.js
@@ -344,6 +344,10 @@
 		builds: defaultBuilds
 	},
 	{
+		src: 'js/elements/FootageElement.js',
+		builds: ['full','svg','canvas','html','canvas_worker'],
+	},
+	{
 		src: 'js/elements/svgElements/SVGCompElement.js',
 		builds: ['full','svg','svg_light','html','html_light']
 	},
@@ -524,6 +528,10 @@
 		builds: ['full','svg','canvas','html','canvas_worker']
 	},
 	{
+		src: 'js/utils/expressions/FootageInterface.js',
+		builds: ['full','svg','canvas','html','canvas_worker']
+	},
+	{
 		src: 'js/utils/expressions/CompInterface.js',
 		builds: ['full','svg','canvas','html','canvas_worker']
 	},