--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/res/metadataplayer/HtmlMashupPlayer.js Sun Feb 15 00:43:16 2015 +0100
@@ -0,0 +1,345 @@
+IriSP.Widgets.HtmlMashupPlayer = function(player, config) {
+ IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.HtmlMashupPlayer.prototype = new IriSP.Widgets.Widget();
+
+
+IriSP.Widgets.HtmlMashupPlayer.prototype.defaults = {
+ aspect_ratio: 14/9,
+ background: "#333333"
+};
+
+IriSP.Widgets.HtmlMashupPlayer.prototype.draw = function() {
+
+ if (!this.height && this.aspect_ratio) {
+ this.height = this.width / this.aspect_ratio;
+ this.$.css("height", this.height);
+ }
+
+ if (this.background) {
+ this.$.css("background", this.background);
+ }
+
+ var mashup = this.media,
+ sel = this.$,
+ width = this.width,
+ height = this.height,
+ url_transform = this.url_transform;
+
+ mashup.currentMedia = null;
+ mashup.currentAnnotation = null;
+ mashup.seeking = false;
+ var mashupSegmentBegin,
+ mashupSegmentEnd,
+ mashupTimecode = 0,
+ // seekdiv = $(".video-wait"),
+ mashupTimedelta;
+
+/*
+ function showSeek() {
+ if (currentMedia.seeking) {
+ seekdiv.show();
+ }
+ }
+*/
+
+ function changeCurrentAnnotation() {
+ if (mashupTimecode >= mashup.duration) {
+ if (!mashup.paused) {
+ mashup.paused = true;
+ mashup.trigger("pause");
+ }
+ mashupTimecode = 0;
+ }
+ var _annotation = mashup.getAnnotationAtTime( mashupTimecode );
+ if (typeof _annotation === "undefined") {
+ if (mashup.currentMedia) {
+ mashup.currentMedia.pause();
+ if (!mashup.paused) {
+ mashup.paused = true;
+ mashup.trigger("pause");
+ }
+ }
+ return;
+ }
+ mashup.currentAnnotation = _annotation;
+ mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds;
+ mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds;
+ mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
+ mashup.currentMedia = mashup.currentAnnotation.getMedia();
+ mashup.getMedias().forEach(function(_media) {
+ if (_media !== mashup.currentMedia) {
+ _media.hide();
+ _media.pause();
+ } else {
+ _media.show();
+ }
+ });
+
+ mashup.currentMedia.setCurrentTime( mashupTimecode + mashupTimedelta);
+ mashup.currentMedia.seeking = true;
+
+ if (!mashup.paused) {
+ mashup.currentMedia.play();
+ mashup.seeking = true;
+// setTimeout(showSeek,200);
+ }
+ mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
+
+ }
+
+ mashup.getMedias().forEach(addMedia);
+ changeCurrentAnnotation();
+ mashup.trigger("loadedmetadata");
+
+ function addMedia(media) {
+ if (media.has_player) {
+ return;
+ }
+ media.has_player = true;
+ var videourl = media.video;
+ if (typeof url_transform === "function") {
+ videourl = url_transform(media.video);
+ }
+ var videoid = "video_" + media.id,
+ videoElement;
+
+ media.show = function() {
+
+ if (document.getElementById(videoid)) {
+ return;
+ }
+
+ media.loaded = false;
+ media.paused = true;
+ var videoSelector = $('<video>');
+
+ videoSelector.attr({
+ id : videoid,
+ width : width,
+ height : height
+ }).css({
+ width: width,
+ height: height
+ });
+
+ if (typeof videourl === "string") {
+ videoSelector.attr( "src", videourl );
+ } else {
+ for (var i = 0; i < videourl.length; i++) {
+ var _srcNode = IriSP.jQuery('<source>');
+ _srcNode.attr({
+ src: videourl[i].src,
+ type: videourl[i].type
+ });
+ videoSelector.append(_srcNode);
+ }
+ }
+
+ sel.append(videoSelector);
+
+ videoElement = videoSelector[0];
+
+ // Binding DOM events to media
+
+ function getVolume() {
+ media.muted = videoElement.muted;
+ media.volume = videoElement.volume;
+ }
+
+ videoSelector.on("loadedmetadata", function() {
+ getVolume();
+ media.loaded = true;
+ media.trigger("loadedmetadata");
+ media.trigger("volumechange");
+ });
+
+ videoSelector.on("timeupdate", function() {
+ media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
+ });
+
+ videoSelector.on("volumechange", function() {
+ getVolume();
+ media.trigger("volumechange");
+ });
+
+ videoSelector.on("play", function() {
+ media.trigger("play");
+ });
+
+ videoSelector.on("pause", function() {
+ media.trigger("pause");
+ });
+
+ videoSelector.on("seeking", function() {
+ media.trigger("seeking");
+ });
+
+ videoSelector.on("seeked", function() {
+ media.trigger("seeked");
+ });
+ };
+
+ media.hide = function() {
+ videoElement = undefined;
+ sel.find("#" + videoid).remove();
+ };
+
+ // Binding functions to Media Element Functions
+
+ var deferredTime = undefined,
+ deferredPlayPause = undefined;
+
+ media.on("setcurrenttime", function(_milliseconds) {
+ if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+ try {
+ videoElement.currentTime = (_milliseconds / 1000);
+ deferredTime = undefined;
+ } catch(err) {
+ deferredTime = _milliseconds;
+ }
+ } else {
+ deferredTime = _milliseconds;
+ }
+ });
+
+ media.on("setvolume", function(_vol) {
+ if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+ media.volume = _vol;
+ videoElement.volume = _vol;
+ }
+ });
+
+ media.on("setmuted", function(_muted) {
+ if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+ media.muted = _muted;
+ videoElement.muted = _muted;
+ }
+ });
+
+ media.on("setplay", function() {
+ if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+ try {
+ videoElement.play();
+ deferredPlayPause = undefined;
+ } catch(err) {
+ deferredPlayPause = true;
+ }
+ } else {
+ deferredPlayPause = true;
+ }
+ });
+
+ media.on("setpause", function() {
+ if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
+ try {
+ videoElement.pause();
+ deferredPlayPause = undefined;
+ } catch(err) {
+ deferredPlayPause = false;
+ }
+ } else {
+ deferredPlayPause = false;
+ }
+ });
+
+ media.on("loadedmetadata", function() {
+ if (typeof deferredTime !== "undefined") {
+ media.setCurrentTime(deferredTime);
+ }
+ if (typeof deferredPlayPause !== "undefined") {
+ if (deferredPlayPause) {
+ media.play();
+ } else {
+ media.pause();
+ }
+ }
+ });
+
+ // Binding UI Events and Mashup Playing to Media
+
+ media.on("play", function() {
+ if (media === mashup.currentMedia) {
+ mashup.trigger("play");
+ }
+ });
+
+ media.on("pause", function() {
+ if (media === mashup.currentMedia) {
+ mashup.trigger("pause");
+ }
+ });
+
+ media.on("timeupdate", function(_time) {
+ if (!mashup.paused && media === mashup.currentMedia && !media.seeking) {
+ if ( _time < mashupSegmentEnd ) {
+ if ( _time >= mashupSegmentBegin ) {
+ mashupTimecode = _time - mashupTimedelta;
+ } else {
+ mashupTimecode = mashupSegmentBegin - mashupTimedelta;
+ media.setCurrentTime(mashupSegmentBegin);
+ }
+ } else {
+ mashupTimecode = mashupSegmentEnd - mashupTimedelta;
+ media.pause();
+ changeCurrentAnnotation();
+ }
+ mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
+ }
+ });
+
+ media.on("seeked", function() {
+ media.seeking = false;
+ if (media === mashup.currentMedia && mashup.seeking) {
+ mashup.seeking = false;
+ }
+// seekdiv.hide();
+ });
+
+ media.on("volumechange", function() {
+ mashup.muted = media.muted;
+ mashup.volume = media.volume;
+ mashup.trigger("volumechange");
+ });
+
+ }
+
+ // Mashup Events
+
+ mashup.on("setcurrenttime", function(_milliseconds) {
+ mashupTimecode = _milliseconds;
+ changeCurrentAnnotation();
+ });
+
+ mashup.on("setvolume", function(_vol) {
+ mashup.getMedias().forEach(function(_media) {
+ _media.setVolume(_vol);
+ });
+ mashup.volume = _vol;
+ });
+
+ mashup.on("setmuted", function(_muted) {
+ mashup.getMedias().forEach(function(_media) {
+ _media.setMuted(_muted);
+ });
+ mashup.muted = _muted;
+ });
+
+ mashup.on("setplay", function() {
+ mashup.paused = false;
+ changeCurrentAnnotation();
+ });
+
+ mashup.on("setpause", function() {
+ mashup.paused = true;
+ if (mashup.currentMedia) {
+ mashup.currentMedia.pause();
+ }
+ });
+
+ mashup.on("loadedmetadata", function() {
+ changeCurrentAnnotation();
+ });
+
+};
\ No newline at end of file