--- a/integration/js/mashupcore.js Thu Dec 06 17:07:49 2012 +0100
+++ b/integration/js/mashupcore.js Thu Jan 17 17:20:23 2013 +0100
@@ -297,6 +297,8 @@
}
+ var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4');
+
function addMedia(media) {
if (media.has_player) {
return;
@@ -310,116 +312,155 @@
videoEl = $('<video>'),
width = $(".video").width(),
height = $(".video").height(),
-/*
mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-*/
- mp4_src = $('<source>');
-/*
- webm_src = $('<source>'),
-*/
- mp4_src.attr({
- src: videourl, //mp4_file,
- type: "video/mp4"
- });
-/*
- webm_src.attr({
- src: webm_file,
- type: "video/webm"
- });
-*/
- videoEl.attr({
- id : videoid,
- width : width,
- height : height
- }).css({
- position : "absolute",
- left: 0,
- top: 0,
- width : width,
- height : height
- });
- videoEl.append(mp4_src); //.append(webm_src);
- $(".video").append(videoEl);
+ videourl = (can_play_mp4 ? mp4_file : webm_file);
media.show = function() {
- videoEl.show();
- }
- media.hide = function() {
- videoEl.hide();
+
+ if (document.getElementById(videoid)) {
+ return;
+ }
+
+ media.loaded = false;
+ media.paused = true;
+ var videoSelector = $('<video>');
+
+ videoSelector.attr({
+ id : videoid,
+ src : videourl,
+ width : width,
+ height : height
+ }).css({
+ position : "absolute",
+ left: 0,
+ top: 0,
+ width : "100%",
+ height : "100%"
+ });
+
+ $(".video").append(videoSelector);
+
+ var videoElement = document.getElementById(videoid);
+
+ // 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");
+ });
}
- var popcorn = Popcorn("#" + videoid);
+ media.hide = function() {
+ $("#" + videoid).remove();
+ }
- // Binding functions to Popcorn
+ // Binding functions to Media Element Functions
+
+ var deferredTime = undefined,
+ deferredPlayPause = undefined;
media.on("setcurrenttime", function(_milliseconds) {
- if (media.loaded) {
- popcorn.currentTime(_milliseconds / 1000);
- media.seeking = true;
- setTimeout(showSeek,200);
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+ try {
+ mediaEl.currentTime = (_milliseconds / 1000);
+ deferredTime = undefined;
+ } catch(err) {
+ deferredTime = _milliseconds;
+ }
+ } else {
+ deferredTime = _milliseconds;
}
});
media.on("setvolume", function(_vol) {
- media.volume = _vol;
- if (media.loaded) {
- popcorn.volume(_vol);
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+ media.volume = _vol;
+ mediaEl.volume = _vol;
}
});
media.on("setmuted", function(_muted) {
- media.muted = _muted;
- if (media.loaded) {
- popcorn.muted(_muted);
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+ media.muted = _muted;
+ mediaEl.muted = _muted;
}
});
media.on("setplay", function() {
- if (media.loaded) {
- popcorn.play();
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+ try {
+ mediaEl.play();
+ deferredPlayPause = undefined;
+ } catch(err) {
+ deferredPlayPause = true;
+ }
+ } else {
+ deferredPlayPause = true;
}
});
-
+
media.on("setpause", function() {
- if (media.loaded) {
- popcorn.pause();
+ var mediaEl = document.getElementById(videoid);
+ if (mediaEl && mediaEl.readyState >= mediaEl.HAVE_METADATA) {
+ try {
+ mediaEl.pause();
+ deferredPlayPause = undefined;
+ } catch(err) {
+ deferredPlayPause = false;
+ }
+ } else {
+ deferredPlayPause = false;
}
});
- // Binding Popcorn events to media
-
- function getVolume() {
- media.muted = popcorn.muted();
- media.volume = popcorn.volume();
- }
-
- popcorn.on("loadedmetadata", function() {
- getVolume();
- media.loaded = true;
- media.trigger("loadedmetadata");
- media.trigger("volumechange");
- })
-
- popcorn.on("timeupdate", function() {
- media.trigger("timeupdate", new IriSP.Model.Time(1000*popcorn.currentTime()));
- });
-
- popcorn.on("volumechange", function() {
- getVolume();
- media.trigger("volumechange");
- })
-
- popcorn.on("play", function() {
- media.trigger("play");
- });
-
- popcorn.on("pause", function() {
- media.trigger("pause");
- });
-
- popcorn.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