Support video in svg renderer

build/player/lottie_canvas.js

@@ -5870,6 +5870,10 @@ BaseRenderer.prototype.createItem = function(layer){
             return this.createShape(layer);
         case 5:
             return this.createText(layer);
+        case 6:
+            return this.createAudio(layer);
+        case 9:
+            return this.createVideo(layer);
         case 13:
             return this.createCamera(layer);
     }
@@ -6029,6 +6033,15 @@ function SVGRenderer(animationItem, config){
 
 extendPrototype([BaseRenderer],SVGRenderer);
 
+SVGRenderer.prototype.createAudio = function (data) {
+    throw new Error('You\'re using a audio object. Try the html renderer.');
+};
+
+SVGRenderer.prototype.createVideo = function (data) {
+//     throw new Error('You\'re using a video object. Try the html renderer.');
+    return new IVideoElement(data,this.globalData,this);
+};
+
 SVGRenderer.prototype.createNull = function (data) {
     return new NullElement(data,this.globalData,this);
 };
@@ -7754,6 +7767,84 @@ ISolidElement.prototype.createContent = function(){
     rect.setAttribute('fill',this.data.sc);
     this.layerElement.appendChild(rect);
 };
+function IVideoElement(data,globalData,comp){
+    this.assetData = globalData.getAssetData(data.refId);
+    this.initElement(data,globalData,comp);
+    this.sourceRect = {top:0,left:0,width:this.assetData.w,height:this.assetData.h};
+}
+
+extendPrototype([BaseElement,TransformElement,SVGBaseElement,HierarchyElement,FrameElement,RenderableDOMElement], IVideoElement);
+
+IVideoElement.prototype.createContent = function(){
+
+    var assetPath = this.globalData.getAssetsPath(this.assetData);
+
+    this.innerElem = createNS('foreignObject');
+    this.innerElem.setAttribute('width',this.assetData.w+"px");
+    this.innerElem.setAttribute('height',this.assetData.h+"px");
+    this.innerElem.setAttribute('preserveAspectRatio',this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);
+
+    var videoElem = document.createElementNS('http://www.w3.org/1999/xhtml','video');
+    videoElem.setAttribute('muted',''); //iphone suuport - we need to mute audio to allow play/stop video from js
+    videoElem.setAttribute('preload','');
+    videoElem.setAttribute('loop','loop');
+    videoElem.setAttribute('playsinline',''); //for iphone support
+    videoElem.setAttribute('width',this.assetData.w);
+    videoElem.setAttribute('height',this.assetData.h);
+    videoElem.setAttribute('style','object-fit: fill');
+    this.innerElem.appendChild(videoElem);
+
+    var sourceElem = document.createElementNS('http://www.w3.org/1999/xhtml','source');
+    sourceElem.setAttribute('src',assetPath);
+    if (this.data.cl) {
+        sourceElem.setAttribute('type','video/'+this.data.cl);
+    }
+    videoElem.appendChild(sourceElem);
+
+    // this.maskedElement = this.innerElem.parentElement;
+    this.layerElement.appendChild(this.innerElem);
+};
+
+IVideoElement.prototype.hide = function(){
+    if (!this.hidden && (!this.isInRange || this.isTransparent)) {
+        var elem = this.baseElement || this.layerElement;
+
+        if (elem.getElementsByTagName('video').length != 0) {
+            elem.getElementsByTagName('video')[0].pause();
+            elem.getElementsByTagName('video')[0].currentTime = 0;
+        }
+
+        elem.style.display = 'none';
+        this.hidden = true;
+    }
+};
+
+IVideoElement.prototype.show = function() {
+    if (this.isInRange && !this.isTransparent){
+        if (!this.data.hd) {
+            var elem = this.baseElement || this.layerElement;
+
+            if (elem.parentElement.parentElement.getElementsByTagName('g').item(0) != undefined){
+                if(elem.getElementsByTagName('video').length !=0) {
+                    elem.getElementsByTagName('video').item(0).setAttribute('style',elem.parentElement.parentElement.getAttribute("style"));
+                }
+            }
+
+            if(elem.getElementsByTagName('video').length !=0 && elem.getElementsByTagName('video')[0].currentTime == 0) {
+                elem.getElementsByTagName('video')[0].play();
+            }
+
+            elem.style.display = 'block';
+        }
+        this.hidden = false;
+        this._isFirstFrame = true;
+    }
+};
+
+IVideoElement.prototype.sourceRectAtTime = function() {
+    return this.sourceRect;
+};
+
 function SVGShapeElement(data,globalData,comp){
     //List of drawable elements
     this.shapes = [];
@@ -9115,6 +9206,13 @@ var animationManager = (function(){
         }
     }
 
+    function mute(animation) {
+        var i;
+        for(i=0;i<len;i+=1){
+            registeredAnimations[i].animation.mute(animation);
+        }
+    }
+
     function destroy(animation) {
         var i;
         for(i=(len-1);i>=0;i-=1){
@@ -9179,6 +9277,7 @@ var animationManager = (function(){
     moduleOb.play = play;
     moduleOb.pause = pause;
     moduleOb.stop = stop;
+    moduleOb.mute = mute;
     moduleOb.togglePause = togglePause;
     moduleOb.searchAnimations = searchAnimations;
     moduleOb.resize = resize;
@@ -9462,6 +9561,18 @@ AnimationItem.prototype.gotoFrame = function () {
     if(this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted){
         this.currentFrame = this.timeCompleted;
     }
+
+    var i, len = this.renderer.layers.length, layer;
+
+    for (i = len - 1; i >= 0; i--) {
+        layer = this.renderer.layers[i];
+        if (this.layerIsStarted(layer)) {
+            // find the relative time of the video (in the current layer)
+            var goToTime = (this.currentFrame - layer.st) / (this.frameModifier * 1000);
+            this.playAudioVideo(this.renderer.layerElement.children[i], 'goToTime', goToTime);
+        }
+    }
+
     this.trigger('enterFrame');
     this.renderFrame();
 };
@@ -9477,13 +9588,68 @@ AnimationItem.prototype.renderFrame = function () {
     }
 };
 
+AnimationItem.prototype.playAudioVideo = function (element, action, goToTime) {
+    var videoCount = element.getElementsByTagName('video').length;
+    var audioCount = element.getElementsByTagName('audio').length;
+    var v, a;
+
+    switch (action) {
+        case 'play':
+            for (v = 0; v < videoCount; v++) {
+                element.getElementsByTagName('video')[v].play();
+            }
+            for (a = 0; a < audioCount; a++) {
+                element.getElementsByTagName('audio')[a].play();
+            }
+            break;
+        case 'pause':
+            for (v = 0; v < videoCount; v++) {
+                element.getElementsByTagName('video')[v].pause();
+            }
+            for (a = 0; a < audioCount; a++) {
+                element.getElementsByTagName('audio')[a].pause();
+            }
+            break;
+        case 'goToTime':
+            for (v = 0; v < videoCount; v++) {
+                element.getElementsByTagName('video')[v].currentTime = goToTime;
+            }
+            for (a = 0; a < audioCount; a++) {
+                element.getElementsByTagName('audio')[a].currentTime = goToTime;
+            }
+            break;
+    }
+}
+
+AnimationItem.prototype.layerIsStarted = function (layer) {
+    // ip = start time all video by FPS
+    // st = start specific time by FPS
+    // op = end time all video by FPS
+    if (layer.st <= this.currentRawFrame && this.currentRawFrame < layer.op) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
 AnimationItem.prototype.play = function (name) {
     if(name && this.name != name){
         return;
     }
     if(this.isPaused === true){
         this.isPaused = false;
         if(this._idle){
+            var i, len = this.renderer.layers.length, layer;
+
+            for (i = len - 1; i >= 0; i--) {
+                layer = this.renderer.layers[i];
+                if (this.layerIsStarted(layer)) {
+                    if (this.isPaused === false) {
+                        this.playAudioVideo(this.renderer.layerElement.children[i], 'play', null);
+                    }
+                }
+            }
+
             this._idle = false;
             this.trigger('_active');
         }
@@ -9496,6 +9662,16 @@ AnimationItem.prototype.pause = function (name) {
     }
     if(this.isPaused === false){
         this.isPaused = true;
+
+        var i, len = this.renderer.layers.length, layer;
+
+        for (i = len - 1; i >= 0; i--) {
+            layer = this.renderer.layers[i];
+            if (this.layerIsStarted(layer)) {
+                this.playAudioVideo(this.renderer.layerElement.children[i], 'pause', null);
+            }
+        }
+
         this._idle = true;
         this.trigger('_idle');
     }
@@ -9520,6 +9696,79 @@ AnimationItem.prototype.stop = function (name) {
     this.playCount = 0;
     this._completedLoop = false;
     this.setCurrentRawFrameValue(0);
+
+    var i, len = this.renderer.layers.length, layer;
+
+    for (i = len - 1; i >= 0; i--) {
+        layer = this.renderer.layers[i];
+        if(this.layerIsStarted(layer)) {
+            this.playAudioVideo(this.renderer.layerElement.children[i], 'goToTime', 0);
+        }
+    }
+};
+
+// mute function
+AnimationItem.prototype.mute = function (name) {
+    if(name && this.name != name){
+        return;
+    }
+
+    var i, len = this.renderer.layers.length, layer;
+
+    for (i = len - 1; i >= 0; i--) {
+        layer = this.renderer.layers[i];
+
+        if (this.layerIsStarted(layer)) {
+            if (this.isMute === false || this.isMute == null) {
+                this.adjustAudio(this.renderer.elements, 'mute', false, null);
+                this.isMute = true;
+                break;
+            }
+            // TODO: CHECK with two audio's playing together
+            else if (this.isMute === true) {
+                this.adjustAudio(this.renderer.elements, 'mute', true, null);
+                this.isMute = false;
+                break;
+            }
+        }
+    }
+};
+
+AnimationItem.prototype.adjustAudio = function (elements, action, mute, volume) {
+
+    if (elements instanceof Array) {
+        for (i = 0; i < elements.length; i++) {
+            if (elements[i].baseElement.getElementsByTagName('audio').length != 0) {
+                if (action == 'mute') {
+                    if (mute === false) {
+                        elements[i].baseElement.getElementsByTagName('audio')[0].muted = true;
+                        elements[i].baseElement.getElementsByTagName('audio')[0].volume = 0;
+                    }
+
+                    else if (mute === true) {
+                        elements[i].baseElement.getElementsByTagName('audio')[0].muted = false;
+                        elements[i].baseElement.getElementsByTagName('audio')[0].volume = 1;
+                    }
+                } else if (action == 'setVolume') {
+                    elements[i].baseElement.getElementsByTagName('audio')[0].volume = volume;
+                }
+
+            }
+        }
+    }
+}
+
+// set volume function 0-1 (decimal option)
+AnimationItem.prototype.setVolumeRange = function (value) {
+    var i, len = this.renderer.layers.length, layer;
+
+    for (i = len - 1; i >= 0; i--) {
+        layer = this.renderer.layers[i];
+
+        if(this.layerIsStarted(layer)) {
+            this.adjustAudio(this.renderer.elements, 'setVolume', true, value);
+        }
+    }
 };
 
 AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
@@ -12352,6 +12601,7 @@ function getFactory(name) {
 
 lottie.play = animationManager.play;
 lottie.pause = animationManager.pause;
+lottie.mute = animationManager.mute;
 lottie.setLocationHref = setLocationHref;
 lottie.togglePause = animationManager.togglePause;
 lottie.setSpeed = animationManager.setSpeed;
@@ -12372,7 +12622,7 @@ lottie.freeze = animationManager.freeze;
 lottie.unfreeze = animationManager.unfreeze;
 lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;
 lottie.__getFactory = getFactory;
-lottie.version = '5.7.0';
+lottie.version = '5.7.1a0';
 
 function checkReady() {
     if (document.readyState === "complete") {