--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/PlaceholderPlayer.css Tue Jan 29 15:38:41 2013 +0100
@@ -0,0 +1,5 @@
+.Ldt-PlaceholderPlayer {
+ font-size: 40px; text-align: center;
+ padding: 20px 0; font-weight: bolder;
+ background: #333333; color: #FFFFFF;
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/PlaceholderPlayer.js Tue Jan 29 15:38:41 2013 +0100
@@ -0,0 +1,63 @@
+/* This is a fake player, for when no video is available */
+
+IriSP.Widgets.PlaceholderPlayer = function(player, config) {
+ IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.PlaceholderPlayer.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.PlaceholderPlayer.prototype.defaults = {
+}
+
+IriSP.Widgets.PlaceholderPlayer.prototype.template = '<div class="Ldt-PlaceholderPlayer">(loading)</div>';
+
+IriSP.Widgets.PlaceholderPlayer.prototype.draw = function() {
+
+ this.renderTemplate();
+
+ var paused = true,
+ timeDelta = 0,
+ currentTime = new IriSP.Model.Time(0),
+ media = this.media,
+ sel = this.$.find(".Ldt-PlaceholderPlayer");
+
+ function updateTime() {
+ if (!paused) {
+ currentTime = new IriSP.Model.Time(new Date().valueOf() - timeDelta);
+ if (currentTime <= media.duration) {
+ media.trigger("timeupdate", currentTime);
+ setTimeout(updateTime, 100);
+ } else {
+ currentTime = media.duration;
+ media.pause();
+ }
+ }
+ sel.text(currentTime.toString(true));
+ }
+
+
+ // Binding functions to Popcorn
+ media.on("setcurrenttime", function(_milliseconds) {
+ timeDelta = new Date().valueOf() - _milliseconds;
+ currentTime = new IriSP.Model.Time(_milliseconds);
+ media.trigger("seeked");
+ media.trigger("timeupdate", currentTime);
+ sel.text(currentTime.toString(true));
+ });
+
+ media.on("setplay", function() {
+ paused = false;
+ timeDelta = new Date().valueOf() - currentTime
+ media.trigger("play");
+ updateTime();
+ });
+
+ media.on("setpause", function() {
+ paused = true;
+ media.trigger("pause");
+ updateTime();
+ });
+
+ media.trigger("loadedmetadata");
+
+}
\ No newline at end of file
--- a/test/index.htm Mon Jan 28 18:17:26 2013 +0100
+++ b/test/index.htm Tue Jan 29 15:38:41 2013 +0100
@@ -11,9 +11,10 @@
<body>
<h1>Metadataplayer test configurations</h1>
<ul class="pageindex">
+ <li><h2><a href="placeholderplayer.htm">with Placeholder Player instead of video</a></h2></li>
<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 with compatible browsers, JwPlayer with others)</a></h2></li>
+ <li><h2><a href="oggvideo.htm">with HTML5/OGG (compatible with Firefox and Chrome)</a></h2></li>
+ <li><h2><a href="mp4video.htm">with MP4 (HTML5 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>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/test/placeholderplayer.htm Tue Jan 29 15:38:41 2013 +0100
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Metadataplayer test with Placeholder Player</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'>
+ <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
+ </head>
+
+ <body>
+ <h1>Metadataplayer test with Placeholder Player</h1>
+ <div id="LdtPlayer"></div>
+ <div id="AnnotationsListContainer"></div>
+ <div id="SlideShareContainer"></div>
+ <script type="text/javascript">
+ IriSP.libFiles.defaultDir = "libs/";
+ IriSP.language = 'fr';
+ IriSP.widgetsDir = "metadataplayer";
+ var _metadata = {
+ url: 'json/ldt-jwplayer.json',
+ format: 'ldt'
+ };
+ var _config = {
+ width : 550,
+ container : 'LdtPlayer',
+ default_options: {
+ metadata: _metadata
+ },
+ css : 'metadataplayer/LdtPlayer-core.css',
+ widgets: [
+ {
+ type: "PlaceholderPlayer"
+ },
+ { type: "Slider" },
+ { type: "Controller" },
+ {
+ type: "Polemic",
+ max_elements: 20
+ },
+ { type: "Sparkline" },
+ { type: "MultiSegments" },
+ { type: "Tweet" },
+ {
+ type: "Tagcloud"
+ },
+ {
+ type: "AnnotationsList",
+ container: "AnnotationsListContainer",
+ default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+ },
+ { type: "Mediafragment"}
+ ]
+ };
+
+ var _myPlayer = new IriSP.Metadataplayer(_config);
+
+ </script>
+ </body>
+</html>