--- a/player/js/player.js Mon May 27 18:54:46 2013 +0200
+++ b/player/js/player.js Tue May 28 12:26:49 2013 +0200
@@ -16,7 +16,16 @@
{
width: 1000,
height: 560,
- autostart: true
+ autostart: true,
+ url_transform: function(src) {
+ return [{
+ type: "video/mp4",
+ src: src.replace(/\.[\d\w]+$/,'.mp4')
+ }, {
+ type: "video/webm",
+ src: src.replace(/\.[\d\w]+$/,'.webm')
+ }];
+ }
}
);
@@ -124,13 +133,13 @@
});
$(".prev-chapter").click(function() {
- if (i) {
+ if (currentChapterI) {
myMedia.setCurrentTime(chapters[currentChapterI - 1].begin);
}
return false;
});
$(".next-chapter").click(function() {
- if (i < chapters.length - 1) {
+ if (currentChapterI < chapters.length - 1) {
myMedia.setCurrentTime(chapters[currentChapterI + 1].begin);
}
return false;
@@ -243,13 +252,13 @@
switch (annotationinfo.type) {
case "slideshow":
-
+
var currentslide = 0,
slideInterval,
playing = false,
loaded = false,
slides = annotationinfo.annotation.content.images;
-
+
var resizeImage = function() {
var imgel = annotationDiv.find(".slideshow-image");
imgel.css("margin-top","");
@@ -262,7 +271,7 @@
imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
}
}
-
+
var showCurrentImage = function() {
var slide = slides[currentslide];
annotationDiv.find(".slideshow-image").attr({
@@ -278,23 +287,23 @@
);
resizeImage();
}
-
+
var nextImage = function() {
currentslide = (currentslide + 1) % slides.length;
showCurrentImage();
}
-
+
var togglePlay = function() {
playing = !playing;
clearInterval(slideInterval);
if (playing) {
- slideInterval = setInterval(nextImage,annotationinfo.annotation["slide-duration"]);
+ slideInterval = setInterval(nextImage,Math.max(1000,annotationinfo.annotation.content.slideduration || 0));
annotationDiv.find(".slideshow-play-pause").addClass("pause");
} else {
annotationDiv.find(".slideshow-play-pause").removeClass("pause");
}
}
-
+
var checkloaded = function() {
if (loaded) {
return;
@@ -304,49 +313,57 @@
}, true);
if (loaded) {
showCurrentImage();
- if (annotationinfo.annotation.autostart) {
+ if (annotationinfo.annotation.autostart && slides.length > 1) {
togglePlay();
}
}
}
-
+
slides.forEach(function(slide) {
slide.image = new Image();
slide.image.onload = checkloaded;
slide.image.src = slide.url;
});
-
+
checkloaded();
-
- annotationDiv.find(".slideshow-next").click(nextImage);
- annotationDiv.find(".slideshow-previous").click(function() {
- currentslide = (currentslide ? currentslide : slides.length) - 1;
- showCurrentImage();
- });
- annotationDiv.find(".slideshow-play-pause").click(togglePlay);
+
+ if (slides.length > 1) {
+ annotationDiv.find(".slideshow-next").click(nextImage);
+ annotationDiv.find(".slideshow-previous").click(function() {
+ currentslide = (currentslide ? currentslide : slides.length) - 1;
+ showCurrentImage();
+ });
+ annotationDiv.find(".slideshow-play-pause").click(togglePlay);
+ } else {
+ annotationDiv.find(".slideshow-next, .slideshow-previous, .slideshow-play-pause").hide();
+ }
break;
+ case "audio":
case "video":
+ var src = annotationinfo.annotation.content.url;
+
var youtubeTemplate = _.template(
'<iframe width="<%- width %>" height="<%- height %>" src="http://www.youtube.com/embed/<%- ytid %>?rel=0&autoplay=<%- autoplay %>" frameborder="0"></iframe>'
);
- var htmlVideoTemplate = _.template(
- '<video width="<%- width %>" controls="true" autoplay="<%- autoplay %>"><source src="<%- mp4vid %>" type="video/mp4" /><source src="<%- webmvid %>" type="video/webm" /></video>'
+ var htmlTemplate = _.template(
+ '<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
);
- var videoW = 650, videoH = 400;
+ var mediaW = (annotationinfo.type === "audio" ? "100%" : "650"),
+ mediaH = (annotationinfo.type === "audio" ? "60" : "420");
- annotationDiv.find(".video-description").html(
+ annotationDiv.find(".media-description").html(
annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
return '<p>' + _.escape(l) + '</p>';
}).join("")
);
- if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(annotationinfo.annotation.content.url)) {
- var urlparts = annotationinfo.annotation.content.url.split(/[?&]/g),
+ if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(src)) {
+ var urlparts = src.split(/[?&]/g),
ytid = "",
vtest = /^v=/;
urlparts.slice(1).forEach(function(p) {
@@ -357,38 +374,54 @@
if (!ytid) {
ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0];
}
- annotationDiv.find(".video-frame").html(youtubeTemplate({
+ annotationDiv.find(".media-frame").html(youtubeTemplate({
ytid: ytid,
- width: videoW,
- height: videoH,
+ width: mediaW,
+ height: mediaH,
autoplay: +annotationinfo.annotation.content.autostart
}));
return;
}
- annotationDiv.find(".video-frame").html(htmlVideoTemplate({
- mp4vid: annotationinfo.annotation.content.url.replace(/\.webm$/,'.mp4'),
- webmvid: annotationinfo.annotation.content.url.replace(/\.mp4$/,'.webm'),
- width: videoW,
- height: videoH,
- autoplay: ""+annotationinfo.annotation.content.autostart
- }));
+ if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) {
+ $.ajax({
+ url: "http://vimeo.com/api/oembed.json",
+ dataType: "jsonp",
+ data: {
+ width: mediaW,
+ height: mediaH,
+ url: src,
+ autoplay: +annotationinfo.annotation.content.autostart,
+ color: "be4477",
+ portrait: false,
+ title: false,
+ byline: false
+ },
+ success: function(data) {
+ annotationDiv.find(".media-frame").html(data.html);
+ }
+ });
+ return;
+ }
- break;
-
- case "audio":
-
- var htmlAudioTemplate = _.template(
- '<video width="100%" height="30" controls="true" autoplay="<%- autoplay %>" src="<%- src %>" />'
- );
-
- annotationDiv.find(".audio-description").html(
- annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
- return '<p>' + _.escape(l) + '</p>';
- }).join("")
- );
+ if (/^(https?:\/\/)?(www\.)?dailymotion/.test(src)) {
+ $.ajax({
+ url: "http://www.dailymotion.com/services/oembed",
+ dataType: "jsonp",
+ data: {
+ format: "json",
+ maxwidth: mediaW,
+ maxheight: 487,
+ url: src
+ },
+ success: function(data) {
+ annotationDiv.find(".media-frame").html(data.html);
+ }
+ });
+ return;
+ }
- if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(annotationinfo.annotation.content.url)) {
+ if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) {
$.ajax({
url: "http://soundcloud.com/oembed",
dataType: "jsonp",
@@ -397,20 +430,33 @@
show_comments: false,
auto_play: annotationinfo.annotation.content.autostart,
show_artwork: false,
- url: annotationinfo.annotation.content.url,
+ url: src,
color: "63be6c"
},
success: function(data) {
- annotationDiv.find(".audio-frame").html(data.html);
+ annotationDiv.find(".media-frame").html(data.html);
}
- }
- );
+ });
return;
}
-
- annotationDiv.find(".audio-frame").html(htmlAudioTemplate({
- src: annotationinfo.annotation.content.url,
- autoplay: ""+annotationinfo.annotation.content.autostart
+
+ var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1],
+ mimetype = annotationinfo.type + "/" + extension,
+ fallbacks = { "video/webm": "mp4", "video/mp4": "webm" },
+ canPlay = document.createElement("video").canPlayType(mimetype);
+
+ if (!canPlay) {
+ src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]);
+ }
+
+ console.log(mimetype, canPlay, src);
+
+ annotationDiv.find(".media-frame").html(htmlTemplate({
+ type: annotationinfo.type,
+ src: src,
+ width: mediaW,
+ height: mediaH,
+ autoplay: "" + annotationinfo.annotation.content.autostart
}));
break;
@@ -446,15 +492,23 @@
break;
}
}
+
+ $(".video-container").click(function() {
+ if (currentAnnotation) {
+ closeAnnotation(true);
+ }
+ return false;
+ });
function closeAnnotation(e) {
currentAnnotation = null;
$(".chip, .pictolist li").removeClass("current");
$(".chapters-bar").removeClass("annotation-onscreen");
- $(".main-video .annotation").remove();
+ $(".main-video .annotation").hide().remove();
if (!!e) {
myMedia.play();
}
+ return false;
}
});