--- a/integration/js/contentplayer.js Wed Jan 16 21:26:15 2013 +0100
+++ b/integration/js/contentplayer.js Thu Jan 17 13:11:39 2013 +0100
@@ -9,7 +9,8 @@
currentSegment,
currentMedia,
globalTags = {},
- seqCount;
+ seqCount,
+ iPad = /iPad/.test(navigator.userAgent);
var ratio = 2.37;
@@ -224,6 +225,7 @@
currentMedia = project.currentMedia;
addMedia(currentMedia);
+ currentMedia.show();
$("#duration").text(currentMedia.duration.toString());
$("h1").text(currentMedia.title); //TODO: Remove when on platform
@@ -308,134 +310,172 @@
resizeTagsDrag(!!tagToShow);
}
+ var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4');
+
function addMedia(media) {
- if (media.has_player) {
+ if (media.is_added) {
return;
}
- media.has_player = true;
- media.loaded = false;
- media.paused = true;
- var videourl = video_url_transform(media.video),
- videoid = "video_" + media.id,
- videoEl = $('<video>'),
- mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
- webm_file = videourl.replace(/\.mp4$/i,'.webm'),
- mediaEl = videoEl[0],
- can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),
- can_play_webm = !!mediaEl.canPlayType('video/webm');
+ media.is_added = true;
+
+ var videoid = "video_" + media.id,
+ mp4_file = media.video.replace(/\.webm$/i,'.mp4'),
+ webm_file = media.video.replace(/\.mp4$/i,'.webm');
- videoEl.attr({
- id : videoid
- }).css({
- position : "absolute",
- left: 0,
- top: 0,
- width : "100%",
- height : "100%"
- });
-
- if (can_play_mp4 && can_play_webm) {
- var mp4_src = $('<source>'),
- webm_src = $('<source>');
- mp4_src.attr({
- src: mp4_file,
- type: "video/mp4"
+ media.addToDom = function() {
+
+ var video_file = video_url_transform(can_play_mp4 ? mp4_file : webm_file);
+
+ if (document.getElementById(videoid)) {
+ return;
+ }
+
+ media.loaded = false;
+ media.paused = true;
+ var videoSelector = $('<video>');
+
+ videoSelector.attr({
+ src : video_file,
+ id : videoid
+ }).css({
+ position : "absolute",
+ left: 0,
+ top: 0,
+ width : "100%",
+ height : "100%",
+ display: "none"
});
- webm_src.attr({
- src: webm_file,
- type: "video/webm"
+
+ $("#video_sequence").append(videoSelector);
+
+ // Binding DOM events to media
+
+ function getVolume() {
+ var videoElement = document.getElementById(videoid);
+ 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() {
+ var videoElement = document.getElementById(videoid);
+ media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
});
- videoEl.append(mp4_src).append(webm_src);
- } else {
- videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file);
+ 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");
+ });
}
-
- $("#video_sequence").append(videoEl);
-
+ media.removeFromDom = function() {
+ $("#" + videoid).remove();
+ }
media.show = function() {
- videoEl.show();
+ if (!$("#" + videoid).length) {
+ media.addToDom();
+ }
+ $("#" + videoid).show();
}
media.hide = function() {
- videoEl.hide();
+ $("#" + videoid).hide();
}
// Binding functions to Media Element Functions
+ var deferredTime = undefined,
+ deferredPlayPause = undefined;
+
media.on("setcurrenttime", function(_milliseconds) {
- try {
- mediaEl.currentTime = (_milliseconds / 1000);
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+ try {
+ mediaEl.currentTime = (_milliseconds / 1000);
+ deferredTime = undefined;
+ } catch(err) {
+ deferredTime = _milliseconds;
+ }
+ } else {
+ deferredTime = _milliseconds;
}
- catch (err) {}
});
media.on("setvolume", function(_vol) {
- try {
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
media.volume = _vol;
mediaEl.volume = _vol;
}
- catch (err) {}
});
media.on("setmuted", function(_muted) {
- try {
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
media.muted = _muted;
mediaEl.muted = _muted;
}
- catch (err) {}
});
media.on("setplay", function() {
- try {
- mediaEl.play();
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+ try {
+ mediaEl.play();
+ deferredPlayPause = undefined;
+ } catch(err) {
+ deferredPlayPause = true;
+ }
+ } else {
+ deferredPlayPause = true;
}
- catch (err) {}
});
-
+
media.on("setpause", function() {
- try {
- mediaEl.pause();
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && (mediaEl.readyState >= mediaEl.HAVE_METADATA || iPad)) {
+ try {
+ mediaEl.pause();
+ deferredPlayPause = undefined;
+ } catch(err) {
+ deferredPlayPause = false;
+ }
+ } else {
+ deferredPlayPause = false;
}
- catch (err) {}
});
- // Binding DOM events to media
-
- function getVolume() {
- media.muted = mediaEl.muted;
- media.volume = mediaEl.volume;
- }
-
- videoEl.on("loadedmetadata", function() {
- getVolume();
- media.loaded = true;
- media.trigger("loadedmetadata");
- media.trigger("volumechange");
- })
-
- videoEl.on("timeupdate", function() {
- media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
- });
-
- videoEl.on("volumechange", function() {
- getVolume();
- media.trigger("volumechange");
- })
-
- videoEl.on("play", function() {
- media.trigger("play");
- });
-
- videoEl.on("pause", function() {
- media.trigger("pause");
- });
-
- videoEl.on("seeking", function() {
- media.trigger("seeking");
- });
-
- videoEl.on("seeked", function() {
- media.trigger("seeked");
+ 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
@@ -452,7 +492,7 @@
$("#current").text(_time.toString());
timeSlider.slider("value", slidersRange * _time / media.duration);
});
-
+
}
$(".sdhdgroup").addClass(resolution);
@@ -461,7 +501,13 @@
var newres = $(this).attr("title");
if (resolution !== newres) {
window.localStorage.setItem("resolution", newres);
- document.location.reload();
+ $(".sdhdgroup").removeClass(resolution).addClass(newres);
+ resolution = newres;
+ var t = currentMedia.getCurrentTime();
+ currentMedia.removeFromDom();
+ currentMedia.show();
+ currentMedia.setCurrentTime(t);
+ currentMedia.play();
}
return false;
});