loading …
"); setRatio(conf.ratio); // no fullscreen in IFRAME try { if (!conf.fullscreen) fullscreen.remove(); } catch (e) { fullscreen.remove(); } api.bind("ready", function() { var duration = api.video.duration; timelineApi.disable(api.disabled || !duration); conf.adaptiveRatio && setRatio(api.video.height / api.video.width); // initial time & volume durationEl.add(remaining).html(format(duration)); // do we need additional space for showing hour ((duration >= 3600) && root.addClass('is-long')) || root.removeClass('is-long'); volumeApi.slide(api.volumeLevel); }).bind("unload", function() { if (!origRatio) ratio.css("paddingTop", ""); // buffer }).bind("buffer", function() { var video = api.video, max = video.buffer / video.duration; if (!video.seekable && support.seekable) timelineApi.max(max); if (max < 1) buffer.css("width", (max * 100) + "%"); else buffer.css({ width: '100%' }); }).bind("speed", function(e, api, val) { speed.text(val + "x").addClass("fp-hilite"); setTimeout(function() { speed.removeClass("fp-hilite") }, 1000); }).bind("buffered", function() { buffer.css({ width: '100%' }); timelineApi.max(1); // progress }).bind("progress", function() { var time = api.video.time, duration = api.video.duration; if (!timelineApi.dragging) { timelineApi.slide(time / duration, api.seeking ? 0 : 250); } elapsed.html(format(time)); remaining.html("-" + format(duration - time)); }).bind("finish resume seek", function(e) { root.toggleClass("is-finished", e.type == "finish"); }).bind("stop", function() { elapsed.html(format(0)); timelineApi.slide(0, 100); }).bind("finish", function() { elapsed.html(format(api.video.duration)); timelineApi.slide(1, 100); root.removeClass("is-seeking"); // misc }).bind("beforeseek", function() { progress.stop(); }).bind("volume", function() { volumeApi.slide(api.volumeLevel); }).bind("disable", function() { var flag = api.disabled; timelineApi.disable(flag); volumeApi.disable(flag); root.toggleClass("is-disabled", api.disabled); }).bind("mute", function(e, api, flag) { root.toggleClass("is-muted", flag); }).bind("error", function(e, api, error) { root.removeClass("is-loading").addClass("is-error"); if (error) { error.message = conf.errors[error.code]; api.error = true; var el = $(".fp-message", root); $("h2", el).text((api.engine || 'html5') + ": " + error.message); $("p", el).text(error.url || api.video.url || api.video.src || conf.errorUrls[error.code]); root.unbind("mouseenter click").removeClass("is-mouseover"); } // hover }).bind("mouseenter mouseleave", function(e) { if (noToggle) return; var is_over = e.type == "mouseenter", lastMove; // is-mouseover/out hover(is_over); if (is_over) { root.bind("pause.x mousemove.x volume.x", function() { hover(true); lastMove = new Date; }); hovertimer = setInterval(function() { if (new Date - lastMove > 5000) { hover(false) lastMove = new Date; } }, 100); } else { root.unbind(".x"); clearInterval(hovertimer); } // allow dragging over the player edge }).bind("mouseleave", function() { if (timelineApi.dragging || volumeApi.dragging) { root.addClass("is-mouseover").removeClass("is-mouseout"); } // click }).bind("click.player", function(e) { if ($(e.target).is(".fp-ui, .fp-engine") || e.flash) { e.preventDefault(); return api.toggle(); } }); // poster -> background image if (conf.poster) root.css("backgroundImage", "url(" + conf.poster + ")"); var bc = root.css("backgroundColor"), has_bg = root.css("backgroundImage") != "none" || bc && bc != "rgba(0, 0, 0, 0)" && bc != "transparent"; // is-poster class if (has_bg && !conf.splash && !conf.autoplay) { api.bind("ready stop", function() { root.addClass("is-poster").one("progress", function() { root.removeClass("is-poster"); }); }); } // default background color if not present if (!has_bg && api.forcedSplash) { root.css("backgroundColor", "#555"); } $(".fp-toggle, .fp-play", root).click(api.toggle); /* controlbar elements */ $.each(['mute', 'fullscreen', 'unload'], function(i, key) { find(key).click(function() { api[key](); }); }); timeline.bind("slide", function(e, val) { api.seeking = true; api.seek(val * api.video.duration); }); volumeSlider.bind("slide", function(e, val) { api.volume(val); }); // times find("time").click(function(e) { $(this).toggleClass("is-inverted"); }); hover(noToggle); }); var focused, focusedRoot, IS_HELP = "is-help"; // keyboard. single global listener $(document).bind("keydown.fp", function(e) { var el = focused, metaKeyPressed = e.ctrlKey || e.metaKey || e.altKey, key = e.which, conf = el && el.conf; if (!el || !conf.keyboard || el.disabled) return; // help dialog (shift key not truly required) if ($.inArray(key, [63, 187, 191, 219]) != -1) { focusedRoot.toggleClass(IS_HELP); return false; } // close help / unload if (key == 27 && focusedRoot.hasClass(IS_HELP)) { focusedRoot.toggleClass(IS_HELP); return false; } if (!metaKeyPressed && el.ready) { e.preventDefault(); // slow motion / fast forward if (e.shiftKey) { if (key == 39) el.speed(true); else if (key == 37) el.speed(false); return; } // 1, 2, 3, 4 .. if (key < 58 && key > 47) return el.seekTo(key - 48); switch (key) { case 38: case 75: el.volume(el.volumeLevel + 0.15); break; // volume up case 40: case 74: el.volume(el.volumeLevel - 0.15); break; // volume down case 39: case 76: el.seeking = true; el.seek(true); break; // forward case 37: case 72: el.seeking = true; el.seek(false); break; // backward case 190: el.seekTo(); break; // to last seek position case 32: el.toggle(); break; // spacebar case 70: conf.fullscreen && el.fullscreen(); break; // toggle fullscreen case 77: el.mute(); break; // mute case 27: el[el.isFullscreen ? "fullscreen" : "unload"](); break; // esc } } }); flowplayer(function(api, root) { // no keyboard configured if (!api.conf.keyboard) return; // hover root.bind("mouseenter mouseleave", function(e) { focused = !api.disabled && e.type == 'mouseenter' ? api : 0; if (focused) focusedRoot = root; }); // TODO: add to player-layout.html root.append('\\
\
\
');
if (api.conf.tooltip) {
$(".fp-ui", root).attr("title", "Hit ? for help").on("mouseout.tip", function() {
$(this).removeAttr("title").off("mouseout.tip");
});
}
$(".fp-close", root).click(function() {
root.toggleClass(IS_HELP);
});
});
var VENDOR = $.browser.mozilla ? "moz": "webkit",
FS_ENTER = "fullscreen",
FS_EXIT = "fullscreen-exit",
FULL_PLAYER,
FS_SUPPORT = flowplayer.support.fullscreen,
FS_NATIVE_SUPPORT = typeof document.exitFullscreen == 'function';
// esc button
$(document).bind(FS_NATIVE_SUPPORT ? "fullscreenchange" : VENDOR + "fullscreenchange", function(e) {
var el = $(document.webkitCurrentFullScreenElement || document.mozFullScreenElement || document.fullscreenElement || e.target);
if (el.length && !FULL_PLAYER) {
FULL_PLAYER = el.trigger(FS_ENTER, [el]);
} else {
FULL_PLAYER.trigger(FS_EXIT, [FULL_PLAYER]);
FULL_PLAYER = null;
}
});
flowplayer(function(player, root) {
if (!player.conf.fullscreen) return;
var win = $(window),
fsSeek = {pos: 0, play: false},
scrollTop;
player.isFullscreen = false;
player.fullscreen = function(flag) {
if (player.disabled) return;
if (flag === undefined) flag = !player.isFullscreen;
if (flag) scrollTop = win.scrollTop();
if (FS_SUPPORT) {
if (flag) {
if (FS_NATIVE_SUPPORT) {
root[0].requestFullscreen();
} else {
root[0][VENDOR + 'RequestFullScreen'](Element.ALLOW_KEYBOARD_INPUT);
if ($.browser.safari && !document.webkitCurrentFullScreenElement && !document.mozFullScreenElement) { // Element.ALLOW_KEYBOARD_INPUT not allowed
root[0][VENDOR + 'RequestFullScreen']();
}
}
} else {
if (FS_NATIVE_SUPPORT) {
document.exitFullscreen();
} else {
document[VENDOR + 'CancelFullScreen']();
}
}
} else {
if (player.engine === "flash" && player.conf.rtmp)
fsSeek = {pos: player.video.time, play: player.playing};
player.trigger(flag ? FS_ENTER : FS_EXIT, [player])
}
return player;
};
var lastClick;
root.bind("mousedown.fs", function() {
if (+new Date - lastClick < 150 && player.ready) player.fullscreen();
lastClick = +new Date;
});
player.bind(FS_ENTER, function(e) {
root.addClass("is-fullscreen");
player.isFullscreen = true;
}).bind(FS_EXIT, function(e) {
root.removeClass("is-fullscreen");
player.isFullscreen = false;
win.scrollTop(scrollTop);
}).bind("ready", function () {
if (fsSeek.pos && !isNaN(fsSeek.pos)) {
setTimeout(function () {
player.play(); // avoid hang in buffering state
player.seek(fsSeek.pos);
if (!fsSeek.play) {
setTimeout(function () {
player.pause();
}, 100);
}
fsSeek = {pos: 0, play: false};
}, 250);
}
});
});
flowplayer(function(player, root) {
var conf = $.extend({ active: 'is-active', advance: true, query: ".fp-playlist a" }, player.conf),
klass = conf.active;
// getters
function els() {
return $(conf.query, root);
}
function active() {
return $(conf.query + "." + klass, root);
}
player.play = function(i) {
if (i === undefined) return player.resume();
if (typeof i === 'number' && !player.conf.playlist[i]) return player;
else if (typeof i != 'number') player.load.apply(null, arguments);
player.unbind('resume.fromfirst'); // Don't start from beginning if clip explicitely chosen
player.video.index = i;
player.load(typeof player.conf.playlist[i] === 'string' ?
player.conf.playlist[i].toString() :
player.conf.playlist[i].map(function(item) { return $.extend({}, item); })
);
return player;
};
player.next = function(e) {
e && e.preventDefault();
var current = player.video.index;
if (current != -1) {
current = current === player.conf.playlist.length - 1 ? 0 : current + 1;
player.play(current);
}
return player;
};
player.prev = function(e) {
e && e.preventDefault();
var current = player.video.index;
if (current != -1) {
current = current === 0 ? player.conf.playlist.length - 1 : current - 1;
player.play(current);
}
return player;
};
$('.fp-next', root).click(player.next);
$('.fp-prev', root).click(player.prev);
if (conf.advance) {
root.unbind("finish.pl").bind("finish.pl", function(e, player) {
// next clip is found or loop
var next = player.video.index + 1;
if (next < player.conf.playlist.length || conf.loop) {
next = next === player.conf.playlist.length ? 0 : next;
root.removeClass('is-finished');
setTimeout(function() { // Let other finish callbacks fire first
player.play(next);
});
// stop to last clip, play button starts from 1:st clip
} else {
root.addClass("is-playing"); // show play button
player.one("resume.fromfirst", function() {
player.play(0);
return false;
});
}
});
}
var playlistInitialized = false;
if (player.conf.playlist.length) { // playlist configured by javascript, generate playlist
playlistInitialized = true;
var plEl = root.find('.fp-playlist');
if (!plEl.length) {
plEl = $('');
$('video', root).after(plEl);
}
plEl.empty();
$.each(player.conf.playlist, function(i, item) {
var href;
if (typeof item === 'string') {
href = item;
} else {
for (var key in item[0]) {
if (item[0].hasOwnProperty(key)) {
href = item[0][key];
break;
}
}
}
plEl.append($('').attr({
href: href,
'data-index': i
}));
});
}
if (els().length) {
if (!playlistInitialized) {
player.conf.playlist = [];
els().each(function() {
var src = $(this).attr('href');
$(this).attr('data-index', player.conf.playlist.length);
player.conf.playlist.push(src);
});
}
/* click -> play */
root.on("click", conf.query, function(e) {
e.preventDefault();
var el = $(e.target).closest(conf.query);
var toPlay = Number(el.attr('data-index'));
if (toPlay != -1) {
player.play(toPlay);
}
});
// playlist wide cuepoint support
var has_cuepoints = els().filter("[data-cuepoints]").length;
// highlight
player.bind("load", function(e, api, video) {
var prev = active().removeClass(klass),
prevIndex = prev.attr('data-index'),
index = video.index = player.video.index || 0,
el = $('a[data-index="' + index + '"]', root).addClass(klass),
is_last = index == player.conf.playlist.length - 1;
// index
root.removeClass("video" + prevIndex).addClass("video" + index).toggleClass("last-video", is_last);
// video properties
video.index = api.video.index = index;
video.is_last = api.video.is_last = is_last;
// cuepoints
if (has_cuepoints) player.cuepoints = el.data("cuepoints");
// without namespace callback called only once. unknown rason.
}).bind("unload.pl", function() {
active().toggleClass(klass);
});
}
if (player.conf.playlist.length) {
// disable single clip looping
player.conf.loop = false;
}
});
var CUE_RE = / ?cue\d+ ?/;
flowplayer(function(player, root) {
var lastTime = 0;
player.cuepoints = player.conf.cuepoints || [];
function setClass(index) {
root[0].className = root[0].className.replace(CUE_RE, " ");
if (index >= 0) root.addClass("cue" + index);
}
player.bind("progress", function(e, api, time) {
// avoid throwing multiple times
if (lastTime && time - lastTime < 0.015) return lastTime = time;
lastTime = time;
var cues = player.cuepoints || [];
for (var i = 0, cue; i < cues.length; i++) {
cue = cues[i];
if (!isNaN(cue)) cue = { time: cue };
if (cue.time < 0) cue.time = player.video.duration + cue.time;
cue.index = i;
// progress_interval / 2 = 0.125
if (Math.abs(cue.time - time) < 0.125 * player.currentSpeed) {
setClass(i);
root.trigger("cuepoint", [player, cue]);
}
}
// no CSS class name
}).bind("unload seek", setClass);
if (player.conf.generate_cuepoints) {
player.bind("load", function() {
// clean up cuepoint elements of previous playlist items
$(".fp-cuepoint", root).remove();
}).bind("ready", function() {
var cues = player.cuepoints || [],
duration = player.video.duration,
timeline = $(".fp-timeline", root).css("overflow", "visible");
$.each(cues, function(i, cue) {
var time = cue.time || cue;
if (time < 0) time = duration + cue;
var el = $("").addClass("fp-cuepoint fp-cuepoint" + i)
.css("left", (time / duration * 100) + "%");
el.appendTo(timeline).mousedown(function() {
player.seek(time);
// preventDefault() doesn't work
return false;
});
});
});
}
});
flowplayer(function(player, root, engine) {
var track = $("track", root),
conf = player.conf;
if (flowplayer.support.subtitles) {
player.subtitles = track.length && track[0].track;
// use native when supported
if (conf.nativesubtitles && conf.engine == 'html5') return;
}
// avoid duplicate loads
track.remove();
var TIMECODE_RE = /^(([0-9]{2}:)?[0-9]{2}:[0-9]{2}[,.]{1}[0-9]{3}) --\> (([0-9]{2}:)?[0-9]{2}:[0-9]{2}[,.]{1}[0-9]{3})(.*)/;
function seconds(timecode) {
var els = timecode.split(':');
if (els.length == 2) els.unshift(0);
return els[0] * 60 * 60 + els[1] * 60 + parseFloat(els[2].replace(',','.'));
}
player.subtitles = [];
var url = track.attr("src");
if (!url) return;
$.get(url, function(txt) {
for (var i = 0, lines = txt.split("\n"), len = lines.length, entry = {}, title, timecode, text, cue; i < len; i++) {
timecode = TIMECODE_RE.exec(lines[i]);
if (timecode) {
// title
title = lines[i - 1];
// text
text = "\
\
spaceplay / pause
\escstop
\ffullscreen
\shift + ←→slower / faster (latest Chrome and Safari)
\\
\
↑↓volume
\mmute
\\
\
←→seek
\. seek to previous\
12…6 seek to 10%, 20%, …60%
\" + lines[++i] + "
"; while ($.trim(lines[++i]) && i < lines.length) text += "
" + lines[i] + "
"; // entry entry = { title: title, startTime: seconds(timecode[1]), endTime: seconds(timecode[2] || timecode[3]), text: text }; cue = { time: entry.startTime, subtitle: entry }; player.subtitles.push(entry); player.cuepoints.push(cue); player.cuepoints.push({ time: entry.endTime, subtitleEnd: title }); // initial cuepoint if (entry.startTime === 0) { player.trigger("cuepoint", cue); } } } }).fail(function() { player.trigger("error", {code: 8, url: url }); return false; }); var wrap = $("", root).appendTo(root), currentPoint; player.bind("cuepoint", function(e, api, cue) { if (cue.subtitle) { currentPoint = cue.index; wrap.html(cue.subtitle.text).addClass("fp-active"); } else if (cue.subtitleEnd) { wrap.removeClass("fp-active"); } }).bind("seek", function(e, api, time) { $.each(player.cuepoints || [], function(i, cue) { var entry = cue.subtitle; if (entry && currentPoint != cue.index) { if (time >= cue.time && time <= entry.endTime) player.trigger("cuepoint", cue); else wrap.removeClass("fp-active"); } }); }); }); flowplayer(function(player, root) { var id = player.conf.analytics, time = 0, last = 0; if (id) { // load Analytics script if needed if (typeof _gat == 'undefined') $.getScript("//google-analytics.com/ga.js"); function track(e) { if (time && typeof _gat != 'undefined') { var tracker = _gat._getTracker(id), video = player.video; tracker._setAllowLinker(true); // http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html tracker._trackEvent( "Video / Seconds played", player.engine + "/" + video.type, root.attr("title") || video.src.split("/").slice(-1)[0].replace(TYPE_RE, ''), Math.round(time / 1000) ); time = 0; } } player.bind("load unload", track).bind("progress", function() { if (!player.seeking) { time += last ? (+new Date - last) : 0; last = +new Date; } }).bind("pause", function() { last = 0; }); $(window).unload(track); } });var isIeMobile = /IEMobile/.test(UA); if (flowplayer.support.touch || isIeMobile) { flowplayer(function(player, root) { var isAndroid = /Android/.test(UA) && !/Firefox/.test(UA) && !/Opera/.test(UA), isSilk = /Silk/.test(UA); // custom load for android if (isAndroid) { player.conf.videoTypePreference = "mp4"; // Android has problems with webm aspect ratio var originalLoad = player.load; player.load = function(video, callback) { var ret = originalLoad.apply(player, arguments); player.trigger('ready', player, player.video); return ret; }; } // hide volume if (!flowplayer.support.volume) { root.addClass("no-volume no-mute"); } root.addClass("is-touch"); root.find('.fp-timeline').data('api').disableAnimation(); // fake mouseover effect with click var hasMoved = false; root.bind('touchmove', function() { hasMoved = true; }).bind("touchend click", function(e) { if (hasMoved) { //not intentional, most likely scrolling hasMoved = false; return; } if (player.playing && !root.hasClass("is-mouseover")) { root.addClass("is-mouseover").removeClass("is-mouseout"); return false; } if (player.paused && root.hasClass("is-mouseout")) { player.toggle(); } if (player.paused && isIeMobile) { // IE on WP7 need an additional api.play() call $('video', root)[0].play(); } }); // native fullscreen if (player.conf.native_fullscreen && ($.browser.webkit || $.browser.safari)) { player.fullscreen = function() { var video = $('video', root); video[0].webkitEnterFullScreen(); video.one('webkitendfullscreen', function() { video.prop('controls', true).prop('controls', false); }); }; } // Android browser gives video.duration == 1 until second 'timeupdate' event (isAndroid || isSilk) && player.bind("ready", function() { var video = $('video', root); video.one('canplay', function() { video[0].play(); }); video[0].play(); player.bind("progress.dur", function() { var duration = video[0].duration; if (duration !== 1) { player.video.duration = duration; $(".fp-duration", root).html(format(duration)); player.unbind("progress.dur"); } }); }); }); } flowplayer(function(player, root) { // no embedding if (player.conf.embed === false) return; var conf = player.conf, ui = $(".fp-ui", root), trigger = $("", { "class": "fp-embed", title: 'Copy to your site'}).appendTo(ui), target = $("", { 'class': 'fp-embed-code'}) .append("").appendTo(ui), area = $("textarea", target); player.embedCode = function() { var video = player.video, width = video.width || root.width(), height = video.height || root.height(), el = $("", { 'class': 'flowplayer', css: { width: width, height: height }}), tag = $("").appendTo(el); // configuration $.each(['origin', 'analytics', 'logo', 'key', 'rtmp'], function(i, key) { if (conf[key]) el.attr("data-" + key, conf[key]); }); // sources $.each(video.sources, function(i, src) { tag.append($("