Supports blob and url loading

Author: photonstorm

src/loader/filetypes/VideoFile.js

@@ -8,6 +8,7 @@ var Class = require('../../utils/Class');
 var CONST = require('../../const');
 var File = require('../File');
 var FileTypesManager = require('../FileTypesManager');
+var GetURL = require('../GetURL');
 var GetFastValue = require('../../utils/object/GetFastValue');
 var IsPlainObject = require('../../utils/object/IsPlainObject');
 
@@ -37,14 +38,17 @@ var VideoFile = new Class({
 
     initialize:
 
-    //  URL is an object created by VideoFile.findAudioURL
+    //  URL is an object created by VideoFile.getVideoURL
     function VideoFile (loader, key, urlConfig, loadEvent, asBlob, xhrSettings)
     {
+        if (loadEvent === undefined) { loadEvent = 'canplaythrough'; }
+        if (asBlob === undefined) { asBlob = false; }
+
         var fileConfig = {
             type: 'video',
             cache: loader.cacheManager.video,
             extension: urlConfig.type,
-            responseType: 'arraybuffer',
+            responseType: 'blob',
             key: key,
             url: urlConfig.url,
             xhrSettings: xhrSettings,
@@ -54,13 +58,9 @@ var VideoFile = new Class({
             }
         };
 
-        File.call(this, loader, fileConfig);
+        console.log(fileConfig);
 
-        //  New properties specific to this class
-        // this.locked = 'ontouchstart' in window;
-        // this.loaded = false;
-        // this.filesLoaded = 0;
-        // this.filesTotal = 0;
+        File.call(this, loader, fileConfig);
     },
 
     /**
@@ -72,77 +72,73 @@ var VideoFile = new Class({
      */
     onProcess: function ()
     {
+        console.log('Video.onProcess', this.config.asBlob);
+
         this.state = CONST.FILE_PROCESSING;
 
-        // var ctor = this.config.dataType;
+        if (!this.config.asBlob)
+        {
+            this.onProcessComplete();
 
-        // this.data = (ctor) ? new ctor(this.xhrLoader.response) : this.xhrLoader.response;
+            return;
+        }
 
-        this.data = this.xhrLoader.response;
+        var video = document.createElement('video');
+        video.controls = false;
+        video.canplay = true;
+        video.setAttribute('autoplay', 'autoplay');
+        video.setAttribute('playsinline', 'playsinline');
 
-        this.onProcessComplete();
-    }
+        this.data = video;
 
-    /**
-     * Called when the file finishes loading.
-     *
-     * @method Phaser.Loader.FileTypes.HTML5AudioFile#onLoad
-     * @since 3.0.0
-    onLoad: function ()
-    {
-        if (this.loaded)
-        {
-            return;
-        }
+        var _this = this;
 
-        this.loaded = true;
+        this.data.onloadeddata = function ()
+        {
+            console.log('data.onloadeddata');
+            
+            File.revokeObjectURL(_this.data);
 
-        this.loader.nextFile(this, true);
-    },
-     */
+            _this.onProcessComplete();
+        };
 
-    /**
-     * Called if the file errors while loading.
-     *
-     * @method Phaser.Loader.FileTypes.HTML5AudioFile#onError
-     * @since 3.0.0
-    onError: function ()
-    {
-        for (var i = 0; i < this.data.length; i++)
+        this.data.onerror = function ()
         {
-            var audio = this.data[i];
+            console.log('data.onerror');
 
-            audio.oncanplaythrough = null;
-            audio.onerror = null;
-        }
+            File.revokeObjectURL(_this.data);
 
-        this.loader.nextFile(this, false);
+            _this.onProcessError();
+        };
+
+        console.log('onProcess createURL');
+
+        File.createObjectURL(this.data, this.xhrLoader.response, '');
     },
-     */
 
     /**
-     * Called during the file load progress. Is sent a DOM ProgressEvent.
+     * Called when the file finishes loading, is sent a DOM ProgressEvent.
      *
-     * @method Phaser.Loader.FileTypes.HTML5AudioFile#onProgress
-     * @fires Phaser.Loader.Events#FILE_PROGRESS
+     * @method Phaser.Loader.File#onLoad
      * @since 3.0.0
-    onProgress: function (event)
+     *
+     * @param {XMLHttpRequest} xhr - The XMLHttpRequest that caused this onload event.
+     * @param {ProgressEvent} event - The DOM ProgressEvent that resulted from this load.
+    onLoadVideo: function (event)
     {
-        var audio = event.target;
+        console.log('onLoadVideo');
+        console.log(event);
+        console.log(this);
 
-        audio.oncanplaythrough = null;
-        audio.onerror = null;
+        var video = event.target;
 
-        this.filesLoaded++;
+        video.removeEventListener(this.config.loadEvent, this.onLoadVideo, true);
 
-        this.percentComplete = Math.min((this.filesLoaded / this.filesTotal), 1);
+        this.data = video;
 
-        this.loader.emit(Events.FILE_PROGRESS, this, this.percentComplete);
+        this.resetXHR();
 
-        if (this.filesLoaded === this.filesTotal)
-        {
-            this.onLoad();
-        }
+        this.loader.nextFile(this, true);
     },
      */
 
@@ -153,58 +149,59 @@ var VideoFile = new Class({
      *
      * @method Phaser.Loader.FileTypes.HTML5AudioFile#load
      * @since 3.0.0
+     */
     load: function ()
     {
-        this.data = [];
+        var loadEvent = this.config.loadEvent;
+        var asBlob = this.config.asBlob;
 
-        var instances = (this.config && this.config.instances) || 1;
+        if (asBlob)
+        {
+            console.log('Passing load over to File.load');
+            
+            File.prototype.load.call(this);
+        }
+        else
+        {
+            console.log('Loading as Video tag');
 
-        this.filesTotal = instances;
-        this.filesLoaded = 0;
-        this.percentComplete = 0;
+            this.percentComplete = 0;
 
-        for (var i = 0; i < instances; i++)
-        {
-            var audio = new Audio();
-            audio.dataset = {};
-            audio.dataset.name = this.key + ('0' + i).slice(-2);
-            audio.dataset.used = 'false';
+            var video = document.createElement('video');
+    
+            video.controls = false;
+    
+            video.setAttribute('autoplay', 'autoplay');
+            video.setAttribute('playsinline', 'playsinline');
 
-            if (this.locked)
+            var _this = this;
+    
+            this.onVideoLoadHandler = function (event)
             {
-                audio.dataset.locked = 'true';
-            }
-            else
-            {
-                audio.dataset.locked = 'false';
-
-                audio.preload = 'auto';
-                audio.oncanplaythrough = this.onProgress.bind(this);
-                audio.onerror = this.onError.bind(this);
-            }
+                console.log('onVideoLoadHandler');
+                console.log(event);
+                console.log(_this.config.loadEvent);
+        
+                var video = event.target;
+        
+                video.removeEventListener(_this.config.loadEvent, _this.onVideoLoadHandler, true);
+        
+                _this.data = video;
+        
+                _this.resetXHR();
+        
+                _this.loader.nextFile(_this, true);
+            };
 
-            this.data.push(audio);
-        }
+            video.addEventListener(loadEvent, this.onVideoLoadHandler, true);
 
-        for (i = 0; i < this.data.length; i++)
-        {
-            audio = this.data[i];
-            audio.src = GetURL(this, this.loader.baseURL);
+            video.src = GetURL(this, this.loader.baseURL);
 
-            if (!this.locked)
-            {
-                audio.load();
-            }
-        }
+            video.canplay = true;
 
-        if (this.locked)
-        {
-            //  This is super-dangerous but works. Race condition potential high.
-            //  Is there another way?
-            setTimeout(this.onLoad.bind(this));
+            video.load();
         }
     }
-     */
 
 });
 
@@ -223,6 +220,8 @@ VideoFile.create = function (loader, key, urls, loadEvent, asBlob, xhrSettings)
 
     var urlConfig = VideoFile.getVideoURL(game, urls);
 
+    console.log(urlConfig);
+
     if (urlConfig)
     {
         return new VideoFile(loader, key, urlConfig, loadEvent, asBlob, xhrSettings);