player/js/player.js
changeset 9 2e1053dff5f2
parent 8 e8faf97d2a40
child 14 f8a0d5d14372
equal deleted inserted replaced
8:e8faf97d2a40 9:2e1053dff5f2
   223             });
   223             });
   224         annotation.on("enter", function() {
   224         annotation.on("enter", function() {
   225             annotationinfo.picto.show().animate({
   225             annotationinfo.picto.show().animate({
   226                 height: "38px",
   226                 height: "38px",
   227                 opacity: 1
   227                 opacity: 1
   228             });
   228             }, 800);
   229         });
   229         });
   230         annotation.on("leave", function() {
   230         annotation.on("leave", function() {
   231             annotationinfo.picto.animate({
   231             annotationinfo.picto.animate({
   232                 height: 0,
   232                 height: 0,
   233                 opacity: 0
   233                 opacity: 0
   234             }, function() {
   234             }, 800, function() {
   235                 annotationinfo.picto.hide();
   235                 annotationinfo.picto.hide();
   236             });
   236             });
   237         });
   237         });
   238         annotation.on("found-tags", function() {
   238         annotation.on("found-tags", function() {
   239             annotationinfo.both.addClass("found");
   239             annotationinfo.both.addClass("found");
   264         $(".chapters-bar").addClass("annotation-onscreen");
   264         $(".chapters-bar").addClass("annotation-onscreen");
   265         
   265         
   266         var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
   266         var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
   267         
   267         
   268         annotationDiv.appendTo($(".main-video"));
   268         annotationDiv.appendTo($(".main-video"));
   269         annotationDiv.animate({top: "20px"});
       
   270         annotationDiv.find(".close-annotation").click(closeAnnotation);
   269         annotationDiv.find(".close-annotation").click(closeAnnotation);
   271         annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
   270         annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
       
   271         
       
   272                 
       
   273         var positionDiv = function(anim) {
       
   274             var css = {
       
   275                 top: Math.floor(($(".main-video").height() - annotationDiv.height())/2)+"px"
       
   276             };
       
   277             if (anim) {
       
   278                 annotationDiv.animate(css, 800);
       
   279             } else {
       
   280                 annotationDiv.css(css);
       
   281             }
       
   282         }
   272         
   283         
   273         switch (annotationinfo.type) {
   284         switch (annotationinfo.type) {
   274             
   285             
   275             case "slideshow":
   286             case "slideshow":
   276                 
   287                 
   404                         ytid: ytid,
   415                         ytid: ytid,
   405                         width: mediaW,
   416                         width: mediaW,
   406                         height: mediaH,
   417                         height: mediaH,
   407                         autoplay: +annotationinfo.annotation.content.autostart
   418                         autoplay: +annotationinfo.annotation.content.autostart
   408                     }));
   419                     }));
   409                     return;
   420                     break;
   410                 }
   421                 }
   411                 
   422                 
   412                 if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) {
   423                 if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) {
   413                     $.ajax({
   424                     $.ajax({
   414                         url: "http://vimeo.com/api/oembed.json",
   425                         url: "http://vimeo.com/api/oembed.json",
   423                             title: false,
   434                             title: false,
   424                             byline: false
   435                             byline: false
   425                         },
   436                         },
   426                         success: function(data) {
   437                         success: function(data) {
   427                             annotationDiv.find(".media-frame").html(data.html);
   438                             annotationDiv.find(".media-frame").html(data.html);
       
   439                             positionDiv(true);
   428                         }
   440                         }
   429                     });
   441                     });
   430                     return;
   442                     return;
   431                 }
   443                 }
   432                 
   444                 
   440                             maxheight: 487,
   452                             maxheight: 487,
   441                             url: src
   453                             url: src
   442                         },
   454                         },
   443                         success: function(data) {
   455                         success: function(data) {
   444                             annotationDiv.find(".media-frame").html(data.html);
   456                             annotationDiv.find(".media-frame").html(data.html);
       
   457                             positionDiv(true);
   445                         }
   458                         }
   446                     });
   459                     });
   447                     return;
   460                     return;
   448                 }
   461                 }
   449                 
   462                 
   459                             url: src,
   472                             url: src,
   460                             color: "B8155F"
   473                             color: "B8155F"
   461                         },
   474                         },
   462                         success: function(data) {
   475                         success: function(data) {
   463                             annotationDiv.find(".media-frame").html(data.html);
   476                             annotationDiv.find(".media-frame").html(data.html);
       
   477                             positionDiv(true);
   464                         }
   478                         }
   465                     });
   479                     });
   466                     return;
   480                     return;
   467                 }
   481                 }
   468                 
   482                 
   473                 
   487                 
   474                 if (!canPlay) {
   488                 if (!canPlay) {
   475                     src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]);
   489                     src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]);
   476                 }
   490                 }
   477                 
   491                 
   478                 console.log(mimetype, canPlay, src);
   492                 var media = $(htmlTemplate({
   479                 
       
   480                 annotationDiv.find(".media-frame").html(htmlTemplate({
       
   481                     type: annotationinfo.type,
   493                     type: annotationinfo.type,
   482                     src: src,
   494                     src: src,
   483                     width: mediaW,
   495                     width: mediaW,
   484                     height: mediaH,
   496                     height: mediaH,
   485                     autoplay: "" + annotationinfo.annotation.content.autostart
   497                     autoplay: "" + annotationinfo.annotation.content.autostart
   486                 }));
   498                 }));
       
   499                 
       
   500                 media.on("loadedmetadata", function() {
       
   501                     positionDiv(true);
       
   502                 });
       
   503                 
       
   504                 annotationDiv.find(".media-frame").html(media);
       
   505                 return;
   487                 
   506                 
   488             break;
   507             break;
   489             
   508             
   490             case "text":
   509             case "text":
   491                 
   510                 
   515                     annotationinfo.annotation.content.links.map(linkTemplate).join("")
   534                     annotationinfo.annotation.content.links.map(linkTemplate).join("")
   516                 );
   535                 );
   517                 
   536                 
   518             break;
   537             break;
   519         }
   538         }
       
   539         
       
   540         positionDiv(true);
       
   541         
   520     }
   542     }
   521     
   543     
   522     $(".video-container").click(function() {
   544     $(".video-container").click(function() {
   523         if (currentAnnotation) {
   545         if (currentAnnotation) {
   524             closeAnnotation(true);
   546             closeAnnotation(true);
   528    
   550    
   529     function closeAnnotation(e) {
   551     function closeAnnotation(e) {
   530         currentAnnotation = null;
   552         currentAnnotation = null;
   531         $(".chip, .pictolist li").removeClass("current");
   553         $(".chip, .pictolist li").removeClass("current");
   532         $(".chapters-bar").removeClass("annotation-onscreen");
   554         $(".chapters-bar").removeClass("annotation-onscreen");
       
   555         $(".annotation audio, .annotation video").each(function() {
       
   556             try {
       
   557                 this.pause();
       
   558             } catch(e) { }
       
   559         });
   533         $(".main-video .annotation").hide().remove();
   560         $(".main-video .annotation").hide().remove();
   534         if (!!e) {
   561         if (!!e) {
   535             myMedia.play();
   562             myMedia.play();
   536         }
   563         }
   537         return false;
   564         return false;