video.js

Go to the documentation of this file.

 
define( [
                'remoto!stdlib:js/panes/pane.js',
                'remoto!stdlib:js/include/objectRegistry.js',
                'remoto!stdlib:js/include/utils.js',
        ],
        function(pane,objectRegistry,utils)
        {
                'use strict';
 
                var attrs = ["src","controls","loop","muted","poster","play","volume","restart","chapter","feedback"];
                var boolTags = ["controls","loop","muted"];
                var chapterEpsilon = .5;
 
                videoPane.prototype = new pane;
                function videoPane(layout)
                {
                        pane.call(this,layout);
 
                        //this._type = 'video';
 
                        this._video = null;
                        this._videoE = null;
 
                        this._src = null;
                        this._controls = null;
                        this._loop = null;
                        this._muted = null;
                        this._poster = null;
                        this._volume = 1;
                        this._chapter = null;
                        this._chapterTrack = null;
 
                        this._play = false;
                        this._activityPulse = null;                             //a setInterval timer used to notify a containing paneTransitioner that it should not fall asleep
                        this._firstLoad = false;
                        this._feedback = true;
                        this._playbutton = null;
                }
 
                videoPane.prototype.createHTML = function()
                {
                        if (this._html) return this._html;
 
                        pane.prototype.createHTML.call(this);
 
                        this._video = $("<video>").appendTo(this._content);
                        this._video.attr("id", "video_"+utils.uuid() );
                        this._videoE = this._video[0];
                        this._video.css({
                                width:"100%",
                                height:"100%",
                                "background-color":"black",
                        });
                        //http://www.w3schools.com/tags/ref_eventattributes.asp
                        this._video.bind({
                //              'load':         function() { console.log("video load");         },
                                'canplay':      this.videoLoaded.bind(this),
                //              'loadeddata':   function() { console.log("loadedddata");        },
                //              'ended':        function() { console.log("ended");              },
                                'error':        function() { console.log("video error");        },
                //              'error':        this.videoLoadError.bind(this),
                                'play':         this.playChange.bind(this),
                //              'playing':      function() { console.log("playing");            },
                                'pause':        this.playChange.bind(this),
                //              'seeked':       function() { console.log("seeked");             },
                //              'stalled':      this.videoLoaded.bind(this),
                //              'stalled':      this.videoLoadError.bind(this),
                                'ended':        this.videoEnded.bind(this),
                                'volumechange': this.volumeChange.bind(this),
                        });
 
                //      this._content.trigger("paneLoadStart");         //must wait until after _html has been attached!
 
                        return this._html;
                }
 
                videoPane.prototype.detach = function()
                {
                        var detachPlaystate = !this._videoE.paused;
                        //console.log("DETACH: "+detachPlaystate);
 
                        var inserted = (function(e) {                                           //create a named bound function so we can unbind it exactly, and keep any other listeners listening
                                if (jQuery.contains(document.documentElement, this._videoE))    //http://jsperf.com/jquery-element-in-dom/2
                                        this.play = detachPlaystate;
                                $('body').unbind('DOMNodeInserted',inserted);
                        }).bind(this);
 
                        $('body').bind('DOMNodeInserted',inserted);
                }
 
                videoPane.prototype.attached = function()
                {
                        //console.log("ATTACH!");
                }
 
                videoPane.prototype.applySubscription = function(data,metadata)
                {
                        //console.log("videoPane Apply Subscription!");
                        //console.log(arguments);
 
                        if (this._subscribed)
                                return;
 
                        this._subscribed = true;
 
                        //this._nodeMenu = metadata.nodeMenu;
 
                        if (data.base)
                        {       this._objectLoader = new objectRegistry.objectLoader(metadata.nodeMenu);
                                return this._objectLoader.fetchDefinition( data.base, data, this.applyDiff.bind(this) );
                        }
                        else
                                return this.applyDiff(data);
                }
 
                videoPane.prototype.applyDiff = function(diff,user)
                {
                        //console.log("videoPane applyDiff");
                        //console.log(arguments);
 
                        if ("attributes" in diff)
                                diff = diff.attributes;
 
                        for (var a in diff)
                        {
                                if ( attrs.indexOf(a) > -1)
                                {
                                        switch(a)
                                        {       case "play":    this.play = diff.play.value;                    break;
                                                case "volume":  this.volume = diff.volume.value;                break;
                                                case "muted":   this.muted = diff.muted.value;                  break;
                                                case "loop":    this.loop = diff.loop.value;                    break;
                                                case "restart": this.currentTime = 0;                           break;
                                                case "feedback":this._feedback = !!diff.feedback.value;         break;
 
                                                case "chapter": if ('options' in diff.chapter)
                                                                        this.buildChapters(diff.chapter.options.options,diff.chapter.value);
                                                                this.chapter = diff.chapter.value;
                                                                                                                break;
 
                                                case "src":     this._src = diff.src.value;
                                                                this._video.empty();
                                                                for (var mime in this._src)
                                                                        $("<source>").attr({type:mime,src:this._src[mime]}).appendTo(this._video);
                                                                this._content.trigger("paneLoadStart");
                                                                break;
 
                                                default:        this["_"+a] = diff[a].value;
                                                                if (boolTags.indexOf(a) > -1)   //is bool!
                                                                {       if (diff[a].value)      this._video.attr(a,true);
                                                                        else                    this._video.removeAttr(a);
                                                                }
                                                                else
                                                                        this._video.attr(a,diff[a].value);
                                                                break;
                                        }
                                }
                                //else
                                //      console.warn("bad video attribute: "+a);
                        }
                }
 
                videoPane.prototype.applySettings = function(settings)
                {
                        //console.log("videoPane settings!");
                        //console.log(arguments);
                }
 
                videoPane.prototype.videoLoaded = function()
                {
                        //console.log("Loaded!");
                        //console.log(arguments);
 
                        this.play = this._play;
 
                        if (!this._firstLoad)
                        {       this._content.trigger("paneLoadComplete");
                                this._firstLoad = true;
                        }
 
                        this._content.find(".videoError").remove();
 
                        return false;
                }
 
                videoPane.prototype.videoEnded = function()
                {
                        //http://stackoverflow.com/questions/21540959/html5-video-embed-return-to-poster-at-end-of-play
 
                        //console.dir(this._videoE);
                        //console.log("ended");
 
                        //reset the video to the poster frame, if it exists.
                        this._videoE.src = this._videoE.currentSrc;
 
                        this.chapter = -1;
 
                        if (!this._loop && this._feedback)
                        {
                                var u = { attributes: { play: { value: false } } };
                                objectRegistry.applyDiff( this._path, u, null, this );
                                this.postUpdate( u );
                        }
                }
 
                videoPane.prototype.videoLoadError = function()
                {
                        console.error("Video load error!");
                        console.log(arguments);
 
                        // this._content.append( "<span class='videoError' style='color:red; padding:10px; display:block; position:absolute; z-index: 1000000; top:0px; left:0px;'>Unable to load video url: "+this._src[Object.keys(this._src)[0]]+"</span>" );
 
                        if (!this._firstLoad)
                        {       this._content.trigger("paneLoadComplete");
                                this._firstLoad = true;
                        }
 
                        return false;
                }
 
                videoPane.prototype.playChange = function(e)
                {
                        if (this._play !== (!this._videoE.paused))
                        if (this._feedback)
                        {
                                var p = this.play = !this._videoE.paused;
                                var u = { attributes: { play: { value: p } } };
                                objectRegistry.applyDiff( this._path, u, null, this );
                                this.postUpdate( u );
                        }
                }
 
                videoPane.prototype.volumeChange = function(e)
                {
                        if (this._volume !== this._videoE.volume)
                        {
                                var v = this.volume = this._videoE.volume;
 
                                var u = { attributes: { volume: { value: v } } };
 
                                objectRegistry.applyDiff( this._path, u, null, this );
 
                                this.postUpdate( u );
                        }
 
                        if (this._muted !== this._videoE.muted)
                        {
                                var m = this.muted = this._videoE.muted;
 
                                var u = { attributes: { muted: { value: m } } };
 
                                objectRegistry.applyDiff( this._path, u, null, this );
 
                                this.postUpdate( u );
                        }
                }
 
 
 
 
                videoPane.prototype.__defineSetter__("play", function(p)
                {
                        this._play = p;
                        //console.log(p);
 
                        if (this._play)
                        {       
                                let startPlayPromise = this._videoE.play();
 
                                if (startPlayPromise !== undefined) {
                                        startPlayPromise.then(() => {
                                        // Start whatever you need to do only after playback
                                        // has begun.
                                        }).catch(error => {
                                                if (error.name === "NotAllowedError" && this._playbutton == null) {
                                                        if (!this._firstLoad)
                                                        {       this._content.trigger("paneLoadComplete");
                                                                this._firstLoad = true;
                                                        }
 
                                                        this._playbutton = $("<button>").addClass("playButton").appendTo(this._content);
                                                        this._playbutton.css({
                                                                position: "absolute",
                                                                left: "45vw",
                                                                top:"45vh",
                                                                width:"10vw",
                                                                height:"10vw",
                                                                border:"none",
                                                                "background-repeat": "no-repeat",
                                                                "background-color":"transparent",
                                                                "background-size":"contain",
                                                                "background-image": "url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjAgNjAiIHg9IjBweCIgeT0iMHB4Ij48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxyZWN0IHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PC9yZWN0PjwvY2xpcFBhdGg+PC9kZWZzPjxnIGRhdGEtbmFtZT0iY3VzdG9tIOKAkyAyMCIgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBkYXRhLW5hbWU9IlRyYWPDqSA5IiBkPSJNMTcuNzM1LDAsMzUuNDcsMzAuNzg1SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NS43ODUgMTIpIHJvdGF0ZSg5MCkiPjwvcGF0aD48L2c+PC9zdmc+)"
                                                        });
                                                        var that = this;
                                                        this._playbutton.click(function(){
                                                                that._videoE.play();
                                                                this.remove();
                                                                that._playbutton = null;
                                                        });
                                                }
                                        });
                                }
 
                                if (!this._activityPulse)
                                {       this._activityPulse = setInterval( (function() { this._content.trigger("paneActivity"); }).bind(this), 3000 );          //trigger "paneActivity" every 3 seconds so the transitioner doesn't fall asleep
                                        //console.log("started paneActivity");
                                        this._content.trigger("paneActivity");
                                }
                        }
                        else
                        {       this._videoE.pause();
                                if (this._activityPulse)
                                {       clearInterval( this._activityPulse );
                                        this._activityPulse = null;
                                        //console.log("stopped paneActivity");
                                }
                        }
 
                        //console.dir(this._videoE);
                });
 
                videoPane.prototype.__defineSetter__("volume", function(v)
                {
                        v = Math.min( Math.max( v, 0 ), 1 );
 
                        this._volume = v;
                        this._videoE.volume = v;
                });
 
                videoPane.prototype.__defineSetter__("muted", function(m)
                {
                        this._muted = m;
 
                        this._videoE.muted = m;
 
                        if (m)
                                this._video.attr("muted",true);
                        else
                                this._video.removeAttr("muted");
                });
 
                videoPane.prototype.__defineSetter__("loop", function(l)
                {
                        this._loop = l;
                        this._videoE.loop = l;
 
                        if (l)
                                this._video.attr("loop",true);
                        else
                                this._video.removeAttr("loop");
 
                });
 
                videoPane.prototype.__defineSetter__("currentTime", function(t)
                {
                        //console.log("set current time: "+t);
 
                        this._videoE.currentTime = t;
                });
 
                videoPane.prototype.__defineSetter__("chapter", function(c)
                {
                        if (c)
                        {
                                if (this._chapter != c || Math.abs(this._videoE.currentTime - c) > chapterEpsilon)
                                if ( c < this._videoE.duration)
                                //if (this._chapter != c)
                                {
                                        this._chapter = c;
 
                                        //console.trace("set chapter: "+c);
 
                                        //if (this._videoE.paused)
                                        if (Math.abs(this._videoE.currentTime - c) > chapterEpsilon)
                                                this.currentTime = c;
 
                                        var u = { attributes: { chapter: { value: c } } };
 
                                        objectRegistry.applyDiff( this._path, u, null, this );
 
                                        this.postUpdate( u );
                                }
                        }
                });
 
                videoPane.prototype.buildChapters = function(chapters,chapter)
                {
                        //http://www.html5rocks.com/en/tutorials/track/basics/
                        //http://www.samdutton.com/track/audioSprites/
                        //add tracks with javascript, and set them.
 
                        //because video tracks are not evenly supported, we wrap this in a try block
                        try
                        {
                                if (!this._chapterTrack)
                                {       this._chapterTrack = this._videoE.addTextTrack("chapters");
                                        //this._video.append(this._chapterTrack);
                                        //console.dir(this._chapterTrack);
                                        var THIS = this;
                                        $(this._chapterTrack).bind("cuechange", function(e) {
 
                                                //console.log("cue changed!");
 
                                                if (THIS._chapterTrack.activeCues.length)
                                                {       var cue = THIS._chapterTrack.activeCues[0];
                                                        THIS.chapter = cue.startTime;
                                                }
                                                else
                                                        THIS.chapter = null;
                                        });
                                }
                                else
                                {
                                        while (this._chapterTrack.cues.length)
                                                this._chapterTrack.removeCue( this._chapterTrack.cues[0] );
                                }
 
                                for (var i=0;i<chapters.length;i++)
                                {
                                        if (chapters[i].value)                                                  //the first chapter should be null, which will allow for gaps between chapters.
                                        {
                                                //console.log("add: "+chapters[i].text);
                                                var s = chapters[i].value;
                                                var e = i < chapters.length - 1 ? chapters[i+1].value - .001 : 10000000;
                                                var cue = new VTTCue( s, e, chapters[i].text );
                                                this._chapterTrack.addCue( cue );
                                        }
                                }
 
                                this._chapter = chapter;
 
                                //console.dir(this._chapterTrack);
                        }
                        catch (e)
                        {
                                console.error("Unable to create chapters... sorry.");
                                console.log(e);
                        }
                };
 
                videoPane.prototype.destroy = function()
                {
                        if (this._activityPulse)
                        {       clearInterval( this._activityPulse );
                                this._activityPulse = null;
                                //console.log("stopped paneActivity");
                        }
 
                        this._videoE = null;
                        this._video = null;
                        this._playbutton = null;
 
                        pane.prototype.destroy.call(this);
                };
 
                return videoPane;
        }
);