1 IriSP.Widgets.HtmlMashupPlayer = function(player, config) {

     2     IriSP.Widgets.Widget.call(this, player, config);

     3 };

     4 

     5 IriSP.Widgets.HtmlMashupPlayer.prototype = new IriSP.Widgets.Widget();

     6 

     7 

     8 IriSP.Widgets.HtmlMashupPlayer.prototype.defaults = {

     9     aspect_ratio: 14/9,

    10     background: "#333333"

    11 }

    12 

    13 IriSP.Widgets.HtmlMashupPlayer.prototype.draw = function() {

    14     

    15     if (!this.height && this.aspect_ratio) {

    16         this.height = this.width / this.aspect_ratio;

    17         this.$.css("height", this.height);

    18     }

    19     

    20     if (this.background) {

    21         this.$.css("background", this.background);

    22     }

    23     

    24     var mashup = this.media,

    25         sel = this.$,

    26         width = this.width,

    27         height = this.height,

    28         url_transform = this.url_transform;

    29     

    30     mashup.currentMedia = null;

    31     mashup.currentAnnotation = null;

    32     mashup.seeking = false;

    33     var mashupSegmentBegin,

    34         mashupSegmentEnd,

    35         mashupTimecode = 0,

    36  //       seekdiv = $(".video-wait"),

    37         mashupTimedelta;

    38         

    39 /*    

    40     function showSeek() {

    41         if (currentMedia.seeking) {

    42             seekdiv.show();

    43         }

    44     }

    45 */

    46 

    47     function changeCurrentAnnotation() {

    48         if (mashupTimecode >= mashup.duration) {

    49             if (!mashup.paused) {

    50                 mashup.paused = true;

    51                 mashup.trigger("pause");

    52             }

    53             mashupTimecode = 0;

    54         }

    55         var _annotation = mashup.getAnnotationAtTime( mashupTimecode );

    56         if (typeof _annotation === "undefined") {

    57             if (mashup.currentMedia) {

    58                 mashup.currentMedia.pause();

    59                 if (!mashup.paused) {

    60                     mashup.paused = true;

    61                     mashup.trigger("pause");

    62                 }

    63             }

    64             return;

    65         }

    66         mashup.currentAnnotation = _annotation;

    67         mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds;

    68         mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds;

    69         mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;

    70         mashup.currentMedia = mashup.currentAnnotation.getMedia();

    71         mashup.getMedias().forEach(function(_media) {

    72             if (_media !== mashup.currentMedia) {

    73                 _media.hide();

    74                 _media.pause();

    75             } else {

    76                 _media.show();

    77             }

    78         });

    79         

    80         mashup.currentMedia.setCurrentTime( mashupTimecode + mashupTimedelta);

    81         mashup.currentMedia.seeking = true;

    82         

    83         if (!mashup.paused) {

    84             mashup.currentMedia.play();

    85             mashup.seeking = true;

    86 //            setTimeout(showSeek,200);

    87         }

    88         mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));

    89 

    90     }

    91     

    92     mashup.getMedias().forEach(addMedia);

    93     changeCurrentAnnotation();

    94     mashup.trigger("loadedmetadata");

    95     

    96     function addMedia(media) {

    97         if (media.has_player) {

    98             return;

    99         }

   100         media.has_player = true;

   101         var videourl = media.video;

   102         if (typeof url_transform === "function") {

   103             videourl = url_transform(media.video);

   104         }

   105         var videoid = "video_" + media.id,

   106             videoElement;

   107         

   108         media.show = function() {

   109             

   110             if (document.getElementById(videoid)) {

   111                 return;

   112             }

   113             

   114             media.loaded = false;

   115             media.paused = true;

   116             var videoSelector = $('<video>');

   117             

   118             videoSelector.attr({

   119                 id : videoid,

   120                 width : width,

   121                 height : height

   122             }).css({

   123                 width: width,

   124                 height: height

   125             });

   126             

   127             if (typeof videourl === "string") {

   128                 videoSelector.attr( "src", videourl );

   129             } else {

   130                 for (var i = 0; i < videourl.length; i++) {

   131                     var _srcNode = IriSP.jQuery('<source>');

   132                     _srcNode.attr({

   133                         src: videourl[i].src,

   134                         type: videourl[i].type

   135                     });

   136                     videoSelector.append(_srcNode);

   137                 }

   138             }

   139             

   140             sel.append(videoSelector);

   141             

   142             videoElement = videoSelector[0];

   143             

   144             // Binding DOM events to media

   145             

   146             function getVolume() {

   147                 media.muted = videoElement.muted;

   148                 media.volume = videoElement.volume;

   149             }

   150             

   151             videoSelector.on("loadedmetadata", function() {

   152                 getVolume();

   153                 media.loaded = true;

   154                 media.trigger("loadedmetadata");

   155                 media.trigger("volumechange");

   156             })

   157             

   158             videoSelector.on("timeupdate", function() {

   159                 media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));

   160             });

   161             

   162             videoSelector.on("volumechange", function() {

   163                 getVolume();

   164                 media.trigger("volumechange");

   165             })

   166             

   167             videoSelector.on("play", function() {

   168                 media.trigger("play");

   169             });

   170             

   171             videoSelector.on("pause", function() {

   172                 media.trigger("pause");

   173             });

   174             

   175             videoSelector.on("seeking", function() {

   176                 media.trigger("seeking");

   177             });

   178             

   179             videoSelector.on("seeked", function() {

   180                 media.trigger("seeked");

   181             });

   182         }

   183         

   184         media.hide = function() {

   185             videoElement = undefined;

   186             sel.find("#" + videoid).remove();

   187         }

   188         

   189         // Binding functions to Media Element Functions

   190         

   191         var deferredTime = undefined,

   192             deferredPlayPause = undefined;

   193         

   194         media.on("setcurrenttime", function(_milliseconds) {

   195             if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {

   196                 try {

   197                     videoElement.currentTime = (_milliseconds / 1000);

   198                     deferredTime = undefined;

   199                 } catch(err) {

   200                     deferredTime = _milliseconds;

   201                 }

   202             } else {

   203                 deferredTime = _milliseconds;

   204             }

   205         });

   206         

   207         media.on("setvolume", function(_vol) {

   208             if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {

   209                 media.volume = _vol;

   210                 videoElement.volume = _vol;

   211             }

   212         });

   213         

   214         media.on("setmuted", function(_muted) {

   215             if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {

   216                 media.muted = _muted;

   217                 videoElement.muted = _muted;

   218             }

   219         });

   220         

   221         media.on("setplay", function() {

   222             if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {

   223                 try {

   224                     videoElement.play();

   225                     deferredPlayPause = undefined;

   226                 } catch(err) {

   227                     deferredPlayPause = true;

   228                 }

   229             } else {

   230                 deferredPlayPause = true;

   231             }

   232         });

   233 

   234         media.on("setpause", function() {

   235             if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {

   236                 try {

   237                     videoElement.pause();

   238                     deferredPlayPause = undefined;

   239                 } catch(err) {

   240                     deferredPlayPause = false;

   241                 }

   242             } else {

   243                 deferredPlayPause = false;

   244             }

   245         });

   246         

   247         media.on("loadedmetadata", function() {

   248             if (typeof deferredTime !== "undefined") {

   249                 media.setCurrentTime(deferredTime);

   250             }

   251             if (typeof deferredPlayPause !== "undefined") {

   252                 if (deferredPlayPause) {

   253                     media.play();

   254                 } else {

   255                     media.pause();

   256                 }

   257             }

   258         });

   259         

   260         // Binding UI Events and Mashup Playing to Media

   261         

   262         media.on("play", function() {

   263             if (media === mashup.currentMedia) {

   264                 mashup.trigger("play");

   265             }

   266         });

   267         

   268         media.on("pause", function() {

   269             if (media === mashup.currentMedia) {

   270                 mashup.trigger("pause");

   271             }

   272         });

   273         

   274         media.on("timeupdate", function(_time) {

   275             if (!mashup.paused && media === mashup.currentMedia && !media.seeking) {

   276                 if ( _time < mashupSegmentEnd ) {

   277                     if ( _time >= mashupSegmentBegin ) {

   278                         mashupTimecode = _time - mashupTimedelta;

   279                     } else {

   280                         mashupTimecode = mashupSegmentBegin - mashupTimedelta;

   281                         media.setCurrentTime(mashupSegmentBegin);

   282                     }

   283                 } else {

   284                     mashupTimecode = mashupSegmentEnd - mashupTimedelta;

   285                     media.pause();

   286                     changeCurrentAnnotation();

   287                 }

   288                 mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));

   289             }

   290         });

   291         

   292         media.on("seeked", function() {

   293             media.seeking = false;

   294             if (media === mashup.currentMedia && mashup.seeking) {

   295                 mashup.seeking = false;

   296             }

   297 //            seekdiv.hide();

   298         });

   299         

   300         media.on("volumechange", function() {

   301             mashup.muted = media.muted;

   302             mashup.volume = media.volume;

   303             mashup.trigger("volumechange");

   304         });

   305         

   306     }

   307 

   308     // Mashup Events

   309     

   310     mashup.on("setcurrenttime", function(_milliseconds) {

   311         mashupTimecode = _milliseconds;

   312         changeCurrentAnnotation();

   313     });

   314     

   315     mashup.on("setvolume", function(_vol) {

   316         mashup.getMedias().forEach(function(_media) {

   317             _media.setVolume(_vol);

   318         });

   319         mashup.volume = _vol;

   320     });

   321     

   322     mashup.on("setmuted", function(_muted) {

   323         mashup.getMedias().forEach(function(_media) {

   324             _media.setMuted(_muted);

   325         });

   326         mashup.muted = _muted;

   327     });

   328     

   329     mashup.on("setplay", function() {

   330         mashup.paused = false;

   331         changeCurrentAnnotation();

   332     });

   333     

   334     mashup.on("setpause", function() {

   335         mashup.paused = true;

   336         if (mashup.currentMedia) {

   337             mashup.currentMedia.pause();

   338         }

   339     });

   340     

   341     mashup.on("loadedmetadata", function() {

   342         changeCurrentAnnotation();

   343     });

   344     

   345 }