function FluidbookVideo(fluidbook) {
- var $this = this;
-
- this.players = {};
-
- $(fluidbook).on('changePage', function (e, page) {
- $this.removeAllVideos();
- });
-
- $(window).on('fluidbookresize', function (e) {
- $this.resizeControls();
- });
-
- this.fluidbook = fluidbook;
- this.flash = FlashDetect.installed && FlashDetect.major >= 9;
- this.video = (Modernizr.video && (Modernizr.video.h264 || Modernizr.video.webm || Modernizr.video.ogg)) != false;
-
- this.videoFormats = [];
-
- var probably = [];
- var maybe = [];
- var not = [];
- // if (Modernizr.ftouch && this.flash) {
- // maybe.push('flv');
- // }
-
- if (this.video) {
- var formats = this.fluidbook.datas.videoFormats;
- for (var i = 0; i < formats.length; i++) {
- var f = formats[i];
- if (f == 'mp4') {
- f = 'h264';
- }
- if (f == 'ogv') {
- f = 'ogg';
- }
- var support = Modernizr.video[f];
- if (f == 'ogg') {
- f = 'ogv';
- }
- if (f == 'h264') {
- f = 'mp4';
- }
- if (support == 'probably') {
- probably.push(f);
- } else if (support == 'maybe') {
- maybe.push(f);
- } else {
- not.push(f);
- }
- }
- }
- // if (!Modernizr.ftouch && this.flash) {
- // maybe.push('flv');
- // }
-
-
- this.videoFormats = $.merge(probably, maybe, not);
- this.preferedFormat = this.videoFormats[0];
+ var $this = this;
+
+ this.players = {};
+
+ $(fluidbook).on('changePage', function (e, page) {
+ $this.removeAllVideos();
+ });
+
+ $(window).on('fluidbookresize', function (e) {
+ $this.resizeControls();
+ });
+
+ this.fluidbook = fluidbook;
+ this.video = (Modernizr.video && (Modernizr.video.h264 || Modernizr.video.webm || Modernizr.video.ogg)) != false;
+
+ this.videoFormats = [];
+
+ var probably = [];
+ var maybe = [];
+ var not = [];
+
+ if (this.video) {
+ var formats = this.fluidbook.datas.videoFormats;
+ for (var i = 0; i < formats.length; i++) {
+ var f = formats[i];
+ if (f == 'mp4') {
+ f = 'h264';
+ }
+ if (f == 'ogv') {
+ f = 'ogg';
+ }
+ var support = Modernizr.video[f];
+ if (f == 'ogg') {
+ f = 'ogv';
+ }
+ if (f == 'h264') {
+ f = 'mp4';
+ }
+ if (support == 'probably') {
+ probably.push(f);
+ } else if (support == 'maybe') {
+ maybe.push(f);
+ } else {
+ not.push(f);
+ }
+ }
+ }
+ // if (!Modernizr.ftouch && this.flash) {
+ // maybe.push('flv');
+ // }
+
+
+ this.videoFormats = $.merge(probably, maybe, not);
+ this.preferedFormat = this.videoFormats[0];
}
FluidbookVideo.prototype = {
- initVideo: function (e) {
+ initVideo: function (e) {
- var $this = this;
+ var $this = this;
- if ($(e).html() != '') {
- return;
- }
+ if ($(e).html() != '') {
+ return;
+ }
- // if ($('#videoPopup').length == 0) {
-
// $('body').append('<div id="videoPopupOverlay"></div><div id="videoPopup"><a href="#" class="zoomPopupClose"><svg viewBox="0 0 20 20"><use xlink:href="#close"></use></svg></a></div>');
+ // if ($('#videoPopup').length == 0) {
+
// $('body').append('<div id="videoPopupOverlay"></div><div id="videoPopup"><a href="#" class="zoomPopupClose"><svg viewBox="0 0 20 20"><use xlink:href="#close"></use></svg></a></div>');
//
- // $(document).on('click touchend', '.videoPopupLink', function(e) {
- // e.preventDefault();
- // $this.openVideo(this);
- // return false;
- // });
- // }
-
- var id = $(e).data('id'),
- width = parseFloat($(e).data('width')),
- height = parseFloat($(e).data('height')),
- name = $(e).data('name'),
- controls = $(e).data('controls'),
- loop = $(e).data('loop'),
- sound = $(e).data('sound'),
- autoplay = $(e).data('autoplay'),
- setup = $(e).data('setup'),
- path,
- poster,
- html,
- player;
-
- //fb('Initialising video ID: ' + id);
-
- // Player might be active but not visible so we need to dispose of it before re-initialising the element
- if (videojs.players[id]) {
- //fb(id + ' player already active. Disposing...');
- videojs(id).dispose();
- }
-
-
- if (fluidbook.datas.mobileVideosPath == '') {
- path = "data/links/" + name;
- } else {
- path = fluidbook.datas.mobileVideosPath + name;
- if (!fluidbook.datas.standalone && path.substr(0, 3) == '../') {
- path = '../' + path;
- }
- }
-
- if (name !== '') {
- poster = path + '.jpg';
- }
-
- html = '<video class="video-js vjs-fluidbook-skin"';
-
- if (poster) {
- html += 'poster="' + poster + '" ';
- }
-
- html += 'id="'+ id + '" ';
-
- if (!isNaN(width)) {
- html += 'data-width="' + width + '" ';
- html += 'width="' + width + '" ';
- }
- if (!isNaN(height)) {
- html += 'data-height="' + height + '" ';
- html += 'height="' + height + '" ';
- }
-
- if (controls == '1') {
- html += 'controls ';
- }
-
- if (loop == '1') {
- //html += 'onended="this.play()" ';
- html += 'loop ';
- }
- if (autoplay == '1') {
- html += 'autoplay ';
- }
- if (sound == '0') {
- html += 'muted ';
- }
-
- // if (setup) {
- // html += "data-setup='" + setup + "' ";
- // fb('SETUP...');
- // fb(setup);
- // }
- //html += 'src="' + path + '.' + this.preferedFormat + '"';
- html += '>';
-
- // List all possible formats (only applicable for locally hosted videos)
- if (name !== '') {
- this.videoFormats.forEach(function (format) {
- html += '<source src="' + path + '.' + format + '">';
- });
- }
-
- html += '</video>';
-
- $(e).html(html);
-
- player = videojs(id, setup);
- player.ready(function() {
- //fb(id + ' player is ready');
-
- $this.resizeControls(); // Make sure player controls are the right size
-
- if (fluidbook.video.players[id]) {
- //fb('found saved settings for player ID ' + id);
- var settings = fluidbook.video.players[id];
- //console.log(settings);
-
- // In the case of autoplay videos, we don't want the autoplay to fire
- // more than once (ie. never after we have these settings reccorded)
- // It interferes with play/pausing
- player.autoplay(false);
-
- // Restore settings
- player.volume(settings.volume);
- player.muted(settings.muted);
- player.currentTime(settings.currentTime);
-
- // Start player to go to current position - necessary even if it will be paused immediately
- setTimeout(function() { player.play(); }, 50);
-
- player.one('play', function() {
- //fb('Player has started playing... ID: ' + id);
- // Handle pause in here if needed.. Better than using the timeout...
-
- if (settings.paused) {
- //fb(id + ' should be paused');
- setTimeout(function() { player.pause(); }, 100);
- }
-
- });
-
-
- player.play(); // Start player to go to current position - necessary even if it will be paused immediately
- if (settings.paused) {
- player.pause();
- }
-
- // var playPromise = player.play();
- // if (settings.paused) {
- // if (playPromise && (typeof Promise !== 'undefined') && (playPromise instanceof Promise)) {
- // playPromise.then((result) => {
- // setTimeout(player.pause, 100);
- // });
- // } else {
- // player.pause();
- // }
- // }
- }
-
- });
-
- player.on('pause', function() {
- fb(id + ' player paused');
-
- // Show play button (ref: http://stackoverflow.com/a/25296575)
- this.bigPlayButton.show();
-
- // Now the issue is that we need to hide it again if we start playing
- // So every time we do this, we can create a one-time listener for play events.
- player.one('play', function() {
- this.bigPlayButton.hide();
- });
- });
-
- // player.on('fullscreenchange', function() {
- // fb('Entering or exiting fullscreen... resetting control sizes #' + player.id());
- // Note: this doesn't work because the fluidbookresize gets called multiple times after this fires and that overrides this change
- // $('#' + player.id()).attr('style', ''); // Reset inline styles
- // });
-
- },
- openVideo: function(link) {
- if (link === undefined) return false;
-
- link = $(link);
-
- var popup = $('#videoPopup'),
- html,
- width = parseFloat(link.data('width')),
- height = parseFloat(link.data('height')),
- name = link.data('name'),
- controls = link.data('controls'),
- loop = link.data('loop'),
- sound = link.data('sound'),
- autoplay = link.data('autoplay'),
- path,
- poster;
-
- //console.info(width, height, name, loop);
-
- if (fluidbook.datas.mobileVideosPath == '') {
- path = "data/links/" + name;
- } else {
- path = fluidbook.datas.mobileVideosPath + name;
- if (!fluidbook.datas.standalone && path.substr(0, 3) == '../') {
- path = '../' + path;
- }
- }
- poster = path + '.jpg';
-
- // Build <video> element
- html = '<video class="video-js" poster="' + poster + '" ';
-
- if (!isNaN(width)) {
- html += 'data-width="' + width + '" ';
- html += 'width="' + width + '" ';
- }
- if (!isNaN(height)) {
- html += 'data-height="' + height + '" ';
- html += 'height="' + height + '" ';
- }
- html += 'controls="controls" ';
- //html += 'onclick="this.play();" ';
- if (controls == '0') {
- html += 'onplay="this.removeAttribute(\'controls\')" ';
- }
- if (loop == '1') {
- html += 'onended="this.play()" ';
- }
- if (autoplay == '1') {
- html += 'autoplay="autoplay" ';
- }
- if (sound == '0') {
- html += 'muted="muted" ';
- }
- html += 'src="' + path + '.' + this.preferedFormat + '"></video>';
-
- //console.log('Resulting HTML:', html);
-
- popup.html(html);
- videojs($('#videoPopup video'));
- $('body').addClass('videoPopup');
- popup.show();
-
- //console.log(link);
- },
- initCache: function () {
- var $this = this;
- $('body').append('<iframe id="videoframe" marginheight="0" marginwidth="0" scrolling="no" width="1" height="1" src="data/links/video.' + this.preferedFormat + '.html" frameborder="0"></iframe>');
- $("#videoframe").load(function () {
- var w = this.contentWindow;
- var cache = w.applicationCache;
- cache.addEventListener('downloading', $this.logCacheEvent, false);
- cache.addEventListener('checking', $this.logCacheEvent, false);
- cache.addEventListener('cached', $this.logCacheEvent, false);
- cache.addEventListener('downloading', $this.logCacheEvent, false);
- cache.addEventListener('noupdate', $this.logCacheEvent, false);
- cache.addEventListener('updateready', $this.logCacheEvent, false);
- cache.addEventListener('error', $this.logCacheEvent, false);
- $(this).hide();
- });
- },
- logCacheEvent: function (e) {
-
- },
- pauseAllVideos: function () {
- $('video').each(function () {
- this.pause();
- });
- },
- removeAllVideos: function () {
- this.getActivePlayers().forEach(function(player) {
-
- var id = player.id();
-
- // Save the current player info if it has started
- if (player.hasStarted()) {
- fluidbook.video.players[id] = {
- currentTime: player.currentTime(),
- volume: player.volume(),
- muted: player.muted(),
- paused: player.paused()
- };
- }
-
- //fb('Disposing video ID ' + id);
- player.dispose();
- });
- },
-
- getActivePlayers: function() {
- var players = [];
-
- if (typeof(videojs) !== "undefined" && Object.keys(videojs.players).length > 0) {
- for(var id in videojs.players) {
- // When videoJS disposes a player, the ID isn't removed
- // from the list of players but the value will be null
- // Only get active players
- if (videojs.players[id]) {
- players.push(videojs(id));
- }
- }
- }
-
- return players;
- },
-
- resizeControls: function() {
- // Scale VJS controls size with Fluidbook scale
- $('.video-js').each(function() {
- var id = $(this).attr('id');
-
- // When the player is in fullscreen mode, we don't want to have the controls scaled
- if (videojs(id) && videojs(id).isFullscreen()) {
- $(this).attr('style', ''); // Clear scaling for fullscreen player
- } else {
- $(this).css('fontSize', 12 / fluidbook.resize.bookScale);
- }
- });
- },
-
- killVideosIn: function (e) {
- $(e).find('video').each(function () {
- this.pause();
- this.src = "";
- });
- },
+ // $(document).on('click touchend', '.videoPopupLink', function(e) {
+ // e.preventDefault();
+ // $this.openVideo(this);
+ // return false;
+ // });
+ // }
+
+ var id = $(e).data('id'),
+ width = parseFloat($(e).data('width')),
+ height = parseFloat($(e).data('height')),
+ name = $(e).data('name'),
+ controls = $(e).data('controls'),
+ loop = $(e).data('loop'),
+ sound = $(e).data('sound'),
+ autoplay = $(e).data('autoplay'),
+ setup = $(e).data('setup'),
+ path,
+ poster,
+ html,
+ player;
+
+ //fb('Initialising video ID: ' + id);
+
+ // Player might be active but not visible so we need to dispose of it before re-initialising the element
+ if (videojs.players[id]) {
+ //fb(id + ' player already active. Disposing...');
+ videojs(id).dispose();
+ }
+
+
+ if (fluidbook.datas.mobileVideosPath == '') {
+ path = "data/links/" + name;
+ } else {
+ path = fluidbook.datas.mobileVideosPath + name;
+ if (!fluidbook.datas.standalone && path.substr(0, 3) == '../') {
+ path = '../' + path;
+ }
+ }
+
+ if (name !== '') {
+ poster = path + '.jpg';
+ }
+
+ html = '<video class="video-js vjs-fluidbook-skin"';
+
+ if (poster) {
+ html += 'poster="' + poster + '" ';
+ }
+
+ html += 'id="' + id + '" ';
+
+ if (!isNaN(width)) {
+ html += 'data-width="' + width + '" ';
+ html += 'width="' + width + '" ';
+ }
+ if (!isNaN(height)) {
+ html += 'data-height="' + height + '" ';
+ html += 'height="' + height + '" ';
+ }
+
+ if (controls == '1') {
+ html += 'controls ';
+ }
+
+ if (loop == '1') {
+ //html += 'onended="this.play()" ';
+ html += 'loop ';
+ }
+ if (autoplay == '1') {
+ html += 'autoplay ';
+ }
+ if (sound == '0') {
+ html += 'muted ';
+ }
+
+ // if (setup) {
+ // html += "data-setup='" + setup + "' ";
+ // fb('SETUP...');
+ // fb(setup);
+ // }
+ //html += 'src="' + path + '.' + this.preferedFormat + '"';
+ html += '>';
+
+ // List all possible formats (only applicable for locally hosted videos)
+ if (name !== '') {
+ this.videoFormats.forEach(function (format) {
+ html += '<source src="' + path + '.' + format + '">';
+ });
+ }
+
+ html += '</video>';
+
+ $(e).html(html);
+
+ player = videojs(id, setup);
+ player.ready(function () {
+ //fb(id + ' player is ready');
+
+ $this.resizeControls(); // Make sure player controls are the right size
+
+ if (fluidbook.video.players[id]) {
+ //fb('found saved settings for player ID ' + id);
+ var settings = fluidbook.video.players[id];
+ //console.log(settings);
+
+ // In the case of autoplay videos, we don't want the autoplay to fire
+ // more than once (ie. never after we have these settings reccorded)
+ // It interferes with play/pausing
+ player.autoplay(false);
+
+ // Restore settings
+ player.volume(settings.volume);
+ player.muted(settings.muted);
+ player.currentTime(settings.currentTime);
+
+ // Start player to go to current position - necessary even if it will be paused immediately
+ setTimeout(function () {
+ player.play();
+ }, 50);
+
+ player.one('play', function () {
+ //fb('Player has started playing... ID: ' + id);
+ // Handle pause in here if needed.. Better than using the timeout...
+
+ if (settings.paused) {
+ //fb(id + ' should be paused');
+ setTimeout(function () {
+ player.pause();
+ }, 100);
+ }
+
+ });
+
+
+ player.play(); // Start player to go to current position - necessary even if it will be paused immediately
+ if (settings.paused) {
+ player.pause();
+ }
+
+ // var playPromise = player.play();
+ // if (settings.paused) {
+ // if (playPromise && (typeof Promise !== 'undefined') && (playPromise instanceof Promise)) {
+ // playPromise.then((result) => {
+ // setTimeout(player.pause, 100);
+ // });
+ // } else {
+ // player.pause();
+ // }
+ // }
+ }
+
+ });
+
+ player.on('pause', function () {
+ fb(id + ' player paused');
+
+ // Show play button (ref: http://stackoverflow.com/a/25296575)
+ this.bigPlayButton.show();
+
+ // Now the issue is that we need to hide it again if we start playing
+ // So every time we do this, we can create a one-time listener for play events.
+ player.one('play', function () {
+ this.bigPlayButton.hide();
+ });
+ });
+
+ // player.on('fullscreenchange', function() {
+ // fb('Entering or exiting fullscreen... resetting control sizes #' + player.id());
+ // Note: this doesn't work because the fluidbookresize gets called multiple times after this fires and that overrides this change
+ // $('#' + player.id()).attr('style', ''); // Reset inline styles
+ // });
+
+ },
+ openVideo: function (link) {
+ if (link === undefined) return false;
+
+ link = $(link);
+
+ var popup = $('#videoPopup'),
+ html,
+ width = parseFloat(link.data('width')),
+ height = parseFloat(link.data('height')),
+ name = link.data('name'),
+ controls = link.data('controls'),
+ loop = link.data('loop'),
+ sound = link.data('sound'),
+ autoplay = link.data('autoplay'),
+ path,
+ poster;
+
+ //console.info(width, height, name, loop);
+
+ if (fluidbook.datas.mobileVideosPath == '') {
+ path = "data/links/" + name;
+ } else {
+ path = fluidbook.datas.mobileVideosPath + name;
+ if (!fluidbook.datas.standalone && path.substr(0, 3) == '../') {
+ path = '../' + path;
+ }
+ }
+ poster = path + '.jpg';
+
+ // Build <video> element
+ html = '<video class="video-js" poster="' + poster + '" ';
+
+ if (!isNaN(width)) {
+ html += 'data-width="' + width + '" ';
+ html += 'width="' + width + '" ';
+ }
+ if (!isNaN(height)) {
+ html += 'data-height="' + height + '" ';
+ html += 'height="' + height + '" ';
+ }
+ html += 'controls="controls" ';
+ //html += 'onclick="this.play();" ';
+ if (controls == '0') {
+ html += 'onplay="this.removeAttribute(\'controls\')" ';
+ }
+ if (loop == '1') {
+ html += 'onended="this.play()" ';
+ }
+ if (autoplay == '1') {
+ html += 'autoplay="autoplay" ';
+ }
+ if (sound == '0') {
+ html += 'muted="muted" ';
+ }
+ html += 'src="' + path + '.' + this.preferedFormat + '"></video>';
+
+ //console.log('Resulting HTML:', html);
+
+ popup.html(html);
+ videojs($('#videoPopup video'));
+ $('body').addClass('videoPopup');
+ popup.show();
+
+ //console.log(link);
+ },
+ initCache: function () {
+ var $this = this;
+ $('body').append('<iframe id="videoframe" marginheight="0" marginwidth="0" scrolling="no" width="1" height="1" src="data/links/video.' + this.preferedFormat + '.html" frameborder="0"></iframe>');
+ $("#videoframe").load(function () {
+ var w = this.contentWindow;
+ var cache = w.applicationCache;
+ cache.addEventListener('downloading', $this.logCacheEvent, false);
+ cache.addEventListener('checking', $this.logCacheEvent, false);
+ cache.addEventListener('cached', $this.logCacheEvent, false);
+ cache.addEventListener('downloading', $this.logCacheEvent, false);
+ cache.addEventListener('noupdate', $this.logCacheEvent, false);
+ cache.addEventListener('updateready', $this.logCacheEvent, false);
+ cache.addEventListener('error', $this.logCacheEvent, false);
+ $(this).hide();
+ });
+ },
+ logCacheEvent: function (e) {
+
+ },
+ pauseAllVideos: function () {
+ $('video').each(function () {
+ this.pause();
+ });
+ },
+ removeAllVideos: function () {
+ this.getActivePlayers().forEach(function (player) {
+
+ var id = player.id();
+
+ // Save the current player info if it has started
+ if (player.hasStarted()) {
+ fluidbook.video.players[id] = {
+ currentTime: player.currentTime(),
+ volume: player.volume(),
+ muted: player.muted(),
+ paused: player.paused()
+ };
+ }
+
+ //fb('Disposing video ID ' + id);
+ player.dispose();
+ });
+ },
+
+ getActivePlayers: function () {
+ var players = [];
+
+ if (typeof(videojs) !== "undefined" && Object.keys(videojs.players).length > 0) {
+ for (var id in videojs.players) {
+ // When videoJS disposes a player, the ID isn't removed
+ // from the list of players but the value will be null
+ // Only get active players
+ if (videojs.players[id]) {
+ players.push(videojs(id));
+ }
+ }
+ }
+
+ return players;
+ },
+
+ resizeControls: function () {
+ // Scale VJS controls size with Fluidbook scale
+ $('.video-js').each(function () {
+ var id = $(this).attr('id');
+
+ // When the player is in fullscreen mode, we don't want to have the controls scaled
+ if (videojs(id) && videojs(id).isFullscreen()) {
+ $(this).attr('style', ''); // Clear scaling for fullscreen player
+ } else {
+ $(this).css('fontSize', 12 / fluidbook.resize.bookScale);
+ }
+ });
+ },
+
+ killVideosIn: function (e) {
+ $(e).find('video').each(function () {
+ this.pause();
+ this.src = "";
+ });
+ },
};
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff