added initial mobile support by default, closes #14 & #16

Author: Matthew Shotton

dist/videocontext.commonjs2.js

@@ -1,6 +1,6 @@
 {
   "name": "videocontext",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "A WebGL & HTML5 graph based video composition library",
   "contributors": [
     {

dist/videocontext.commonjs2.js.map

@@ -6,15 +6,15 @@ export default class VideoNode extends SourceNode {
     * Initialise an instance of a VideoNode.
     * This should not be called directly, but created through a call to videoContext.createVideoNode();
     */
-    constructor(src, gl, renderGraph, currentTime, globalPlaybackRate=1.0, sourceOffset=0, preloadTime = 4, usingVideoElementCache=false, attributes = {}){
+    constructor(src, gl, renderGraph, currentTime, globalPlaybackRate=1.0, sourceOffset=0, preloadTime = 4, videoElementCache=undefined, attributes = {}){
         super(src, gl, renderGraph, currentTime);
         this._preloadTime = preloadTime;
         this._sourceOffset = sourceOffset;
         this._globalPlaybackRate = globalPlaybackRate;
-        this._usingVideoElementCache = usingVideoElementCache;
-        if (this._usingVideoElementCache){
+        this._videoElementCache = videoElementCache;
+        if (this._videoElementCache){
             this._isResponsibleForElementLifeCycle = true;
-            this._element.currentTime = this._sourceOffset;
+            //this._element.currentTime = this._sourceOffset;
         }
         this._playbackRate = 1.0;
         this._playbackRateUpdated = true;
@@ -81,11 +81,15 @@ export default class VideoNode extends SourceNode {
             return;
         }
         if (this._isResponsibleForElementLifeCycle){
-            this._element = document.createElement("video");
-            this._element.setAttribute("crossorigin", "anonymous");
-            this._element.setAttribute("webkit-playsinline", "");
+            if (this._videoElementCache){
+                this._element = this._videoElementCache.get();
+            }else{
+                this._element = document.createElement("video");
+                this._element.setAttribute("crossorigin", "anonymous");
+                this._element.setAttribute("webkit-playsinline", "");
+                this._playbackRateUpdated = true;
+            }
             this._element.src = this._elementURL;
-            this._playbackRateUpdated = true;
 
             for (let key in this._attributes) {
                 this._element[key] = this._attributes[key];
@@ -98,8 +102,11 @@ export default class VideoNode extends SourceNode {
         super._destroy();
         if (this._isResponsibleForElementLifeCycle && this._element !== undefined){
             this._element.src = "";
+            for (let key in this._attributes){
+                this._element.removeAttribute(key);
+            }
             this._element = undefined;
-            if(!this._usingVideoElementCache) delete this._element;
+            if(!this._videoElementCache) delete this._element;
         }
         this._ready = false;
     }

dist/videocontext.js

@@ -10,6 +10,7 @@ import DestinationNode from "./DestinationNode/destinationnode.js";
 import EffectNode from "./ProcessingNodes/effectnode.js";
 import TransitionNode from "./ProcessingNodes/transitionnode.js";
 import RenderGraph from "./rendergraph.js";
+import VideoElementCache from "./videoelementcache.js";
 import { createSigmaGraphDataFromRenderGraph, visualiseVideoContextTimeline, visualiseVideoContextGraph, createControlFormForNode, UpdateablesManager, exportToJSON } from "./utils.js";
 import DEFINITIONS from "./Definitions/definitions.js";
 
@@ -29,7 +30,7 @@ export default class VideoContext{
     * ctx.play();
     *
     */
-    constructor(canvas, initErrorCallback, options={"preserveDrawingBuffer":true, "manualUpdate":false, "endOnLastSourceEnd":true, useVideoElementCache:false, videoElementCacheSize:5, webglContextAttributes: {preserveDrawingBuffer: true, alpha: false }}){
+    constructor(canvas, initErrorCallback, options={"preserveDrawingBuffer":true, "manualUpdate":false, "endOnLastSourceEnd":true, useVideoElementCache:true, videoElementCacheSize:6, webglContextAttributes: {preserveDrawingBuffer: true, alpha: false }}){
         this._canvas = canvas;
         let manualUpdate = false;
         this.endOnLastSourceEnd = true;
@@ -53,19 +54,11 @@ export default class VideoContext{
         }
 
         // Initialise the video element cache
+        if(!options.useVideoElementCache) options.useVideoElementCache = true;
         this._useVideoElementCache = options.useVideoElementCache;
         if (this._useVideoElementCache){
-            this._videoElementCache = [];
-            if (options.videoElementCacheSize === undefined) options.videoElementCacheSize = 5;
-            console.log("USING VIDEO CACHE");
-            console.log(options.videoElementCacheSize);
-            for (var i = 0; i < options.videoElementCacheSize; i++) {
-                let videoElement = document.createElement("video");
-                videoElement.setAttribute("crossorigin", "anonymous");
-                videoElement.setAttribute("webkit-playsinline", "");
-                videoElement.src = "";
-                this._videoElementCache.push(videoElement);
-            }
+            if (!options.videoElementCacheSize) options.videoElementCacheSize = 5;
+            this._videoElementCache = new VideoElementCache(options.videoElementCacheSize);
         }
 
 
@@ -351,22 +344,9 @@ export default class VideoContext{
     */
     play(){
         console.debug("VideoContext - playing");
-        
-        //Mark the elements in the video element cache as being able to be controlled programattically.
-        if (this._videoElementCache){
-            for (var i = 0; i < this._videoElementCache.length; i++) {
-                let videoElement = this._videoElementCache[i];
-                videoElement.play().then(()=>{
-                    try {
-                        videoElement.pause();
-                    } catch(e) {
-                        //catch the inevitable DOM exception.
-                    }
-                });
-            }    
-        }
-        
-
+        //Initialise the video elemnt cache
+        if (this._videoElementCache)this._videoElementCache.init();
+        // set the state.
         this._state = VideoContext.STATE.PLAYING;
         return true;
     }
@@ -391,34 +371,6 @@ export default class VideoContext{
     }
 
 
-    _getVideoElementCacheRemaining(){
-        let cacheCount = 0;
-        if (this._useVideoElementCache){
-            for (var i = 0; i < this._videoElementCache.length; i++) {
-                let videoElement = this._videoElementCache[i];
-                // For some reason an uninitialised videoElement has its sr attribute set to the windows href. Hence the below check.
-                if (videoElement.src === "" || videoElement.src === undefined || videoElement.src === window.location.href)cacheCount += 1;
-            }
-        }
-        return cacheCount;
-    }
-
-    _getCachedVideoElement(){
-        if (this._useVideoElementCache){
-            for (var i = 0; i < this._videoElementCache.length; i++) {
-                let videoElement = this._videoElementCache[i];
-                // For some reason an uninitialised videoElement has its sr attribute set to the windows href. Hence the below check.
-                if (videoElement.src === "" || videoElement.src === undefined || videoElement.src === window.location.href) return videoElement;
-            }    
-        } else {
-            console.error("Video element cache not enabled, pass {useVideoElementCache:true} into the VideoContext constructor.");
-            return;
-        }
-        console.error("No available video element in the cache");
-        return;
-    }
-
-
     /**
     * Create a new node representing a video source
     *
@@ -436,14 +388,7 @@ export default class VideoContext{
     * var videoNode = ctx.video(videoElement);
     */
     video(src, sourceOffset=0, preloadTime=4, videoElementAttributes={}){
-        let videoNode;
-        if (this._useVideoElementCache && typeof src === "string"){
-            let videoElement = this._getCachedVideoElement();
-            videoElement.src = src;
-            videoNode = new VideoNode(videoElement, this._gl, this._renderGraph, this._currentTime, this._playbackRate, sourceOffset, preloadTime, this._useVideoElementCache, videoElementAttributes);
-        } else{
-            videoNode = new VideoNode(src, this._gl, this._renderGraph, this._currentTime, this._playbackRate, sourceOffset, preloadTime, this._useVideoElementCache, videoElementAttributes);
-        }
+        let videoNode = new VideoNode(src, this._gl, this._renderGraph, this._currentTime, this._playbackRate, sourceOffset, preloadTime, this._videoElementCache, videoElementAttributes);
         this._sourceNodes.push(videoNode);
         return videoNode;
     }

dist/videocontext.js.map

@@ -0,0 +1,64 @@
+class VideoElementCache {
+
+    constructor(cache_size = 3) {
+        this._elements = [];
+        this._elementsInitialised = false;
+        for (let i = 0; i < cache_size; i++) {
+            let element = this._createElement();            
+            this._elements.push(element);
+        }
+    }
+
+
+    _createElement(){
+        let videoElement = document.createElement("video");
+        videoElement.setAttribute("crossorigin", "anonymous");
+        videoElement.setAttribute("webkit-playsinline", "");
+        videoElement.src = "";
+        return videoElement;
+    }
+
+    init(){
+        if (!this._elementsInitialised){
+            for(let element of this._elements){
+                element.play().then(()=>{
+                    element.pause();
+                }, (e)=>{
+                    if (e.name !== "NotSupportedError")throw(e);
+                });
+            }    
+        }
+        this._elementsInitialised = true;
+    }
+
+    get() {
+        console.log("GETTING FORM CACHE");
+        //Try and get an already intialised element.
+        for (let element of this._elements) {
+            // For some reason an uninitialised videoElement has its sr attribute set to the windows href. Hence the below check.
+            if (element.src === "" || element.src === undefined || element.src === window.location.href) return element;
+        }
+        //Fallback to creating a new element if non exists.
+        console.debug("No available video element in the cache, creating a new one. This may break mobile, make your initial cache larger.");
+        let element = this._createElement();
+        this._elements.push(element);
+        this._elementsInitialised = false;
+        return element;
+    }
+
+    get length(){
+        return this._elements.length;
+    }
+
+    get unused(){
+        let count = 0;
+        for (let element of this._elements) {
+            // For some reason an uninitialised videoElement has its sr attribute set to the windows href. Hence the below check.
+            if (element.src === "" || element.src === undefined || element.src === window.location.href) count += 1;
+        }
+        return count;
+    }
+
+}
+
+export default VideoElementCache;