Added a dual mode HTML/Flash player
authorveltr
Tue, 02 Oct 2012 12:05:15 +0200
changeset 967 b4c6e64acb2d
parent 966 c1c762ad1697
child 968 03c88ba5de2c
Added a dual mode HTML/Flash player
src/widgets/AnnotationsList.js
src/widgets/H264Player.js
src/widgets/MashupPlayer.js
src/widgets/PopcornPlayer.js
test/index.htm
test/mashup/moon.htm
test/mp4video.htm
test/oggvideo.htm
test/vimeo.htm
test/youtube.htm
--- a/src/widgets/AnnotationsList.js	Wed Sep 26 18:55:36 2012 +0200
+++ b/src/widgets/AnnotationsList.js	Tue Oct 02 12:05:15 2012 +0200
@@ -17,7 +17,7 @@
     ajax_url : false,
     /* number of milliseconds before/after the current timecode when calling the segment API
      */
-    ajax_granularity : 300000, 
+    ajax_granularity : 600000, 
     default_thumbnail : "",
     /* URL when the annotation is not in the current project,
      * e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}
@@ -220,7 +220,7 @@
                 url : _url,
                 tags : _annotation.getTagTexts(),
                 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
-                audio : (_this.show_audio && _annotation.audio ? _annotation.audio.href : undefined),
+                audio : (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null" ? _annotation.audio.href : undefined),
                 l10n: _this.l10n
             };
             var _html = Mustache.to_html(_this.annotationTemplate, _data);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/H264Player.js	Tue Oct 02 12:05:15 2012 +0200
@@ -0,0 +1,33 @@
+IriSP.Widgets.H264Player = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.H264Player.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.H264Player.prototype.defaults = {
+    mime_type: "video/mp4",
+    normal_player: "PopcornPlayer",
+    fallback_player: "JwpPlayer"
+}
+
+IriSP.Widgets.H264Player.prototype.draw = function() {
+    
+    if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+    }
+    
+    var _props = [ "autostart", "video", "height", "width", "url_transform" ],
+        _opts = {},
+        _canPlayType = document.createElement('video').canPlayType(this.mime_type);
+    
+    _opts.type = (_canPlayType == "maybe" || _canPlayType == "probably") ? this.normal_player : this.fallback_player;
+    
+    for (var i = 0; i < _props.length; i++) {
+        if (typeof this[_props[i]] !== "undefined") {
+            _opts[_props[i]] = this[_props[i]];
+        }
+    }
+
+    this.insertSubwidget(this.$, _opts);
+    
+}
\ No newline at end of file
--- a/src/widgets/MashupPlayer.js	Wed Sep 26 18:55:36 2012 +0200
+++ b/src/widgets/MashupPlayer.js	Tue Oct 02 12:05:15 2012 +0200
@@ -10,13 +10,14 @@
 IriSP.Widgets.MashupPlayer.prototype.defaults = {
     aspect_ratio: 14/9,
     split_screen: false,
-    player_type: "PopcornPlayer"
+    player_type: "PopcornPlayer",
+    background: "#000000"
 }
 
 IriSP.Widgets.MashupPlayer.prototype.draw = function() {
     var _this = this,
         _mashup = this.media,
-        _pauseState = true,
+        _pauseState = (!this.autostart && !this.autoplay),
         _currentMedia = null,
         _currentAnnotation = null,
         _segmentBegin,
@@ -88,6 +89,10 @@
         });
     }
     
+    this.$.css({
+        background: this.background
+    });
+    
     var _grid = Math.ceil(Math.sqrt(_mashup.medias.length)),
         _width = (this.split_screen ? this.width / _grid : this.width),
         _height = (this.split_screen ? this.height / _grid : this.height)
@@ -210,6 +215,6 @@
         }
     }
     
-    changeCurrentAnnotation();
+    _mashup.on("loadedmetadata", changeCurrentAnnotation);
    
 }
\ No newline at end of file
--- a/src/widgets/PopcornPlayer.js	Wed Sep 26 18:55:36 2012 +0200
+++ b/src/widgets/PopcornPlayer.js	Tue Oct 02 12:05:15 2012 +0200
@@ -46,6 +46,9 @@
         }
         _params.controls = 0;
         _params.modestbranding = 1;
+        if (this.autostart || this.autoplay) {
+            _params.autoplay = 1;
+        }
         _url = _urlparts[0] + '?' + IriSP.jQuery.param(_params);
         
         var _popcorn = Popcorn.youtube(this.container, _url);
@@ -75,7 +78,11 @@
         }
         this.$.html(_videoEl);
         var _popcorn = Popcorn("#" + _tmpId);
+        if (this.autostart || this.autoplay) {
+            _popcorn.autoplay(true);
+        }
     }
+    
 
     // Binding functions to Popcorn
     
--- a/test/index.htm	Wed Sep 26 18:55:36 2012 +0200
+++ b/test/index.htm	Tue Oct 02 12:05:15 2012 +0200
@@ -13,7 +13,7 @@
         <ul class="pageindex">
             <li><h2><a href="jwplayer.htm">with JwPlayer (default on Ldt Platform, uses custom player functions)</a></h2></li>
             <li><h2><a href="oggvideo.htm">with HTML5/OGG (uses Popcorn.js, compatible with Firefox and Chrome)</a></h2></li>
-            <li><h2><a href="mp4video.htm">with HTML5/MP4 (uses Popcorn.js, compatible with IE, Safari and Chrome)</a></h2></li>
+            <li><h2><a href="mp4video.htm">with HTML5/MP4 (uses Popcorn.js with compatible browsers, JwPlayer with others)</a></h2></li>
             <li><h2><a href="youtube.htm">with Youtube (uses Popcorn.js and the Popcorn Youtube plugin/player)</a></h2></li>
             <li><h2><a href="vimeo.htm">with Vimeo (uses Popcorn.js and the Popcorn Vimeo plugin/player)</a></h2></li>
             <li><h2><a href="dailymotion.htm">with Dailymotion (uses custom player functions)</a></h2></li>
--- a/test/mashup/moon.htm	Wed Sep 26 18:55:36 2012 +0200
+++ b/test/mashup/moon.htm	Tue Oct 02 12:05:15 2012 +0200
@@ -4,6 +4,7 @@
         <title>Preuve de concept Mashup</title>
         <link rel="stylesheet" type="text/css" href="style.css" />
         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <script type="text/javascript" src="../metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
     </head>
     <body>
--- a/test/mp4video.htm	Wed Sep 26 18:55:36 2012 +0200
+++ b/test/mp4video.htm	Tue Oct 02 12:05:15 2012 +0200
@@ -3,6 +3,7 @@
 
     <head>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <title>Metadataplayer test with HTML5 / OGG Video</title>
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
@@ -10,7 +11,7 @@
     </head>
 
     <body>
-        <h1>Metadataplayer test with HTML5 / H.264 Video - Does not work with Firefox</h1>
+        <h1>Metadataplayer test with HTML5 / H.264 Video - Uses Popcorn with compatible browsers, JwPlayer with others</h1>
         <div id="LdtPlayer"></div>
         <div id="AnnotationsListContainer"></div>
         <script type="text/javascript">
@@ -29,7 +30,7 @@
     css : 'metadataplayer/LdtPlayer-core.css',
     widgets: [
         {
-            type: "PopcornPlayer",
+            type: "H264Player",
             video: "trailer.mp4"
         },
         { type: "Sparkline" },
--- a/test/oggvideo.htm	Wed Sep 26 18:55:36 2012 +0200
+++ b/test/oggvideo.htm	Tue Oct 02 12:05:15 2012 +0200
@@ -3,6 +3,7 @@
 
     <head>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <title>Metadataplayer test with HTML5 / OGG Video</title>
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
@@ -28,7 +29,10 @@
     },
     css : 'metadataplayer/LdtPlayer-core.css',
     widgets: [
-        { type: "AutoPlayer" },
+        {
+            type: "PopcornPlayer",
+            autostart: true
+        },
         { type: "Sparkline" },
         { type: "Slider" },
         { type: "Controller" },
--- a/test/vimeo.htm	Wed Sep 26 18:55:36 2012 +0200
+++ b/test/vimeo.htm	Tue Oct 02 12:05:15 2012 +0200
@@ -3,6 +3,7 @@
 
     <head>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <title>Metadataplayer test with Dailymotion</title>
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
@@ -28,7 +29,10 @@
     },
     css : 'metadataplayer/LdtPlayer-core.css',
     widgets: [
-        { type: "AutoPlayer" },
+        {
+            type: "PopcornPlayer",
+            autostart: true
+        },
         { type: "Sparkline" },
         { type: "Slider" },
         { type: "Controller" },
--- a/test/youtube.htm	Wed Sep 26 18:55:36 2012 +0200
+++ b/test/youtube.htm	Tue Oct 02 12:05:15 2012 +0200
@@ -3,6 +3,7 @@
 
     <head>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <title>Metadataplayer test with Youtube</title>
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
@@ -28,7 +29,10 @@
     },
     css : 'metadataplayer/LdtPlayer-core.css',
     widgets: [
-        { type: "AutoPlayer" },
+        {
+            type: "PopcornPlayer",
+            autostart: true
+        },
         { type: "Sparkline" },
         { type: "Slider" },
         { type: "Controller" },