mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
chapter menu update based on time, split videoJS extensions into own file
This commit is contained in:
Techywarrior
parent
deaf1fce2c
commit
ee5007c55d
3 changed files with 723 additions and 692 deletions
|
|
@ -331,404 +331,22 @@ function parseISO8601Date(s, toLocal) {
|
||||||
})(jQuery, window);
|
})(jQuery, window);
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
JS for the quality selector in video.js player
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Define the base class for the quality selector button.
|
|
||||||
Most of this code is copied from the _V_.TextTrackButton
|
|
||||||
class.
|
|
||||||
|
|
||||||
https://github.com/zencoder/video-js/blob/master/src/tracks.js#L560)
|
|
||||||
*/
|
|
||||||
_V_.ResolutionSelector = _V_.Button.extend({
|
|
||||||
|
|
||||||
kind: "quality",
|
|
||||||
className: "vjs-quality-button",
|
|
||||||
|
|
||||||
init: function (player, options) {
|
|
||||||
|
|
||||||
this._super(player, options);
|
|
||||||
|
|
||||||
// Save the starting resolution as a property of the player object
|
|
||||||
player.options.currentResolution = this.buttonText;
|
|
||||||
|
|
||||||
this.menu = this.createMenu();
|
|
||||||
|
|
||||||
if (this.items.length === 0) {
|
|
||||||
this.hide();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
createMenu: function () {
|
|
||||||
|
|
||||||
var menu = new _V_.Menu(this.player);
|
|
||||||
|
|
||||||
// Add a title list item to the top
|
|
||||||
menu.el.appendChild(_V_.createElement("li", {
|
|
||||||
className: "vjs-menu-title",
|
|
||||||
innerHTML: _V_.uc(this.kind)
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.items = this.createItems();
|
|
||||||
|
|
||||||
// Add menu items to the menu
|
|
||||||
this.each(this.items, function (item) {
|
|
||||||
menu.addItem(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add list to element
|
|
||||||
this.addComponent(menu);
|
|
||||||
|
|
||||||
return menu;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Override the default _V_.Button createElement so the button text isn't hidden
|
|
||||||
createElement: function (type, attrs) {
|
|
||||||
|
|
||||||
// Add standard Aria and Tabindex info
|
|
||||||
attrs = _V_.merge({
|
|
||||||
className: this.buildCSSClass(),
|
|
||||||
innerHTML: '<div><span class="vjs-quality-text">' + this.buttonText + '</span></div>',
|
|
||||||
role: "button",
|
|
||||||
tabIndex: 0
|
|
||||||
}, attrs);
|
|
||||||
|
|
||||||
return this._super(type, attrs);
|
|
||||||
},
|
|
||||||
|
|
||||||
// Create a menu item for each text track
|
|
||||||
createItems: function () {
|
|
||||||
|
|
||||||
var items = [];
|
|
||||||
|
|
||||||
this.each(this.availableRes, function (res) {
|
|
||||||
|
|
||||||
items.push(new _V_.ResolutionMenuItem(this.player, {
|
|
||||||
|
|
||||||
label: res[0].res,
|
|
||||||
src: res
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
return items;
|
|
||||||
},
|
|
||||||
|
|
||||||
buildCSSClass: function () {
|
|
||||||
|
|
||||||
return this.className + " vjs-menu-button " + this._super();
|
|
||||||
},
|
|
||||||
|
|
||||||
// Focus - Add keyboard functionality to element
|
|
||||||
onFocus: function () {
|
|
||||||
|
|
||||||
// Show the menu, and keep showing when the menu items are in focus
|
|
||||||
this.menu.lockShowing();
|
|
||||||
this.menu.el.style.display = "block";
|
|
||||||
|
|
||||||
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
|
||||||
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
|
||||||
|
|
||||||
this.menu.unlockShowing();
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
// Can't turn off list display that we turned on with focus, because list would go away.
|
|
||||||
onBlur: function () { },
|
|
||||||
|
|
||||||
onClick: function () {
|
|
||||||
|
|
||||||
/*
|
|
||||||
When you click the button it adds focus, which will show the menu indefinitely.
|
|
||||||
So we'll remove focus when the mouse leaves the button.
|
|
||||||
Focus is needed for tab navigation.
|
|
||||||
*/
|
|
||||||
this.one('mouseout', this.proxy(function () {
|
|
||||||
|
|
||||||
this.menu.unlockShowing();
|
|
||||||
this.el.blur();
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
Define the base class for the quality menu items
|
|
||||||
*/
|
|
||||||
_V_.ResolutionMenuItem = _V_.MenuItem.extend({
|
|
||||||
|
|
||||||
init: function (player, options) {
|
|
||||||
|
|
||||||
// Modify options for parent MenuItem class's init.
|
|
||||||
options.selected = (options.label === player.options.currentResolution);
|
|
||||||
this._super(player, options);
|
|
||||||
|
|
||||||
this.player.addEvent('changeRes', _V_.proxy(this, this.update));
|
|
||||||
},
|
|
||||||
|
|
||||||
onClick: function () {
|
|
||||||
|
|
||||||
// Check that we are changing to a new quality (not the one we are already on)
|
|
||||||
if (this.options.label === this.player.options.currentResolution)
|
|
||||||
return;
|
|
||||||
|
|
||||||
var resolutions = new Array();
|
|
||||||
resolutions['high'] = new Array(1500000, 128000, 1920, 1080);
|
|
||||||
resolutions['medium'] = new Array(750000, 128000, 1280, 720);
|
|
||||||
resolutions['low'] = new Array(200000, 128000, 720, 480);
|
|
||||||
|
|
||||||
var current_time = this.player.currentTime();
|
|
||||||
|
|
||||||
// Set the button text to the newly chosen quality
|
|
||||||
jQuery(this.player.controlBar.el).find('.vjs-quality-text').html(this.options.label);
|
|
||||||
|
|
||||||
// Change the source and make sure we don't start the video over
|
|
||||||
var currentSrc = this.player.tag.src;
|
|
||||||
var src = parse_src_url(currentSrc);
|
|
||||||
var newSrc = "/mediabrowser/" + src.Type + "/" + src.item_id + "/stream." + src.stream + "?audioChannels=" + src.audioChannels + "&audioBitrate=" + resolutions[this.options.src[0].res][1] +
|
|
||||||
"&videoBitrate=" + resolutions[this.options.src[0].res][0] + "&maxWidth=" + resolutions[this.options.src[0].res][2] + "&maxHeight=" + resolutions[this.options.src[0].res][3] +
|
|
||||||
"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec;
|
|
||||||
|
|
||||||
if (this.player.duration() == "Infinity") {
|
|
||||||
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
|
||||||
var startTimeTicks = currentSrc.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
|
||||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
|
||||||
|
|
||||||
newSrc += "&StartTimeTicks=" + Math.floor(parseInt(start_time) + (10000000 * current_time));
|
|
||||||
} else {
|
|
||||||
newSrc += "&StartTimeTicks=" + Math.floor(10000000 * current_time);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
|
||||||
this.play();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
|
||||||
this.currentTime(current_time);
|
|
||||||
this.play();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Save the newly selected resolution in our player options property
|
|
||||||
this.player.options.currentResolution = this.options.label;
|
|
||||||
|
|
||||||
// Update the classes to reflect the currently selected resolution
|
|
||||||
this.player.triggerEvent('changeRes');
|
|
||||||
},
|
|
||||||
|
|
||||||
update: function () {
|
|
||||||
|
|
||||||
if (this.options.label === this.player.options.currentResolution) {
|
|
||||||
this.selected(true);
|
|
||||||
} else {
|
|
||||||
this.selected(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
JS for the chapter selector in video.js player
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Define the base class for the chapter selector button.
|
|
||||||
*/
|
|
||||||
_V_.ChapterSelector = _V_.Button.extend({
|
|
||||||
|
|
||||||
kind: "chapter",
|
|
||||||
className: "vjs-chapter-button",
|
|
||||||
|
|
||||||
init: function (player, options) {
|
|
||||||
|
|
||||||
this._super(player, options);
|
|
||||||
|
|
||||||
this.menu = this.createMenu();
|
|
||||||
|
|
||||||
if (this.items.length === 0) {
|
|
||||||
this.hide();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
createMenu: function () {
|
|
||||||
|
|
||||||
var menu = new _V_.Menu(this.player);
|
|
||||||
|
|
||||||
// Add a title list item to the top
|
|
||||||
menu.el.appendChild(_V_.createElement("li", {
|
|
||||||
className: "vjs-menu-title",
|
|
||||||
innerHTML: _V_.uc(this.kind)
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.items = this.createItems();
|
|
||||||
|
|
||||||
// Add menu items to the menu
|
|
||||||
this.each(this.items, function (item) {
|
|
||||||
menu.addItem(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add list to element
|
|
||||||
this.addComponent(menu);
|
|
||||||
|
|
||||||
return menu;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Override the default _V_.Button createElement so the button text isn't hidden
|
|
||||||
createElement: function (type, attrs) {
|
|
||||||
|
|
||||||
// Add standard Aria and Tabindex info
|
|
||||||
attrs = _V_.merge({
|
|
||||||
className: this.buildCSSClass(),
|
|
||||||
innerHTML: '<div><span class="vjs-chapter-text">' + this.buttonText + '</span></div>',
|
|
||||||
role: "button",
|
|
||||||
tabIndex: 0
|
|
||||||
}, attrs);
|
|
||||||
|
|
||||||
return this._super(type, attrs);
|
|
||||||
},
|
|
||||||
|
|
||||||
// Create a menu item for each chapter
|
|
||||||
createItems: function () {
|
|
||||||
|
|
||||||
var items = [];
|
|
||||||
|
|
||||||
this.each(this.Chapters, function (chapter) {
|
|
||||||
|
|
||||||
items.push(new _V_.ChapterMenuItem(this.player, {
|
|
||||||
label: chapter[0].Name,
|
|
||||||
src: chapter
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
return items;
|
|
||||||
},
|
|
||||||
|
|
||||||
buildCSSClass: function () {
|
|
||||||
|
|
||||||
return this.className + " vjs-menu-button " + this._super();
|
|
||||||
},
|
|
||||||
|
|
||||||
// Focus - Add keyboard functionality to element
|
|
||||||
onFocus: function () {
|
|
||||||
|
|
||||||
// Show the menu, and keep showing when the menu items are in focus
|
|
||||||
this.menu.lockShowing();
|
|
||||||
this.menu.el.style.display = "block";
|
|
||||||
|
|
||||||
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
|
||||||
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
|
||||||
|
|
||||||
this.menu.unlockShowing();
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
// Can't turn off list display that we turned on with focus, because list would go away.
|
|
||||||
onBlur: function () { },
|
|
||||||
|
|
||||||
onClick: function () {
|
|
||||||
|
|
||||||
/*
|
|
||||||
When you click the button it adds focus, which will show the menu indefinitely.
|
|
||||||
So we'll remove focus when the mouse leaves the button.
|
|
||||||
Focus is needed for tab navigation.
|
|
||||||
*/
|
|
||||||
this.one('mouseout', this.proxy(function () {
|
|
||||||
|
|
||||||
this.menu.unlockShowing();
|
|
||||||
this.el.blur();
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
Define the base class for the chapter menu items
|
|
||||||
*/
|
|
||||||
_V_.ChapterMenuItem = _V_.MenuItem.extend({
|
|
||||||
|
|
||||||
init: function (player, options) {
|
|
||||||
|
|
||||||
// Modify options for parent MenuItem class's init.
|
|
||||||
//options.selected = ( options.label === player.options.currentResolution );
|
|
||||||
this._super(player, options);
|
|
||||||
|
|
||||||
this.player.addEvent('changeChapter', _V_.proxy(this, this.update));
|
|
||||||
},
|
|
||||||
|
|
||||||
onClick: function () {
|
|
||||||
|
|
||||||
// Set the button text to the newly chosen chapter
|
|
||||||
//jQuery( this.player.controlBar.el ).find( '.vjs-chapter-text' ).html( this.options.label );
|
|
||||||
|
|
||||||
if (this.player.duration() == "Infinity") {
|
|
||||||
var currentSrc = this.player.tag.src;
|
|
||||||
|
|
||||||
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
|
||||||
var newSrc = currentSrc.replace(new RegExp("StartTimeTicks=[0-9]+", "g"), "StartTimeTicks=" + this.options.src[0].StartPositionTicks);
|
|
||||||
} else {
|
|
||||||
var newSrc = currentSrc += "&StartTimeTicks=" + this.options.src[0].StartPositionTicks;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
|
||||||
this.play();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
//figure out the time from ticks
|
|
||||||
var current_time = parseFloat(this.options.src[0].StartPositionTicks) / 10000000;
|
|
||||||
|
|
||||||
this.player.currentTime(current_time);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
update: function () {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
JS for the stop button in video.js player
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Define the base class for the stop button.
|
|
||||||
*/
|
|
||||||
|
|
||||||
_V_.StopButton = _V_.Button.extend({
|
|
||||||
|
|
||||||
kind: "stop",
|
|
||||||
className: "vjs-stop-button",
|
|
||||||
|
|
||||||
init: function (player, options) {
|
|
||||||
|
|
||||||
this._super(player, options);
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
buildCSSClass: function () {
|
|
||||||
|
|
||||||
return this.className + " vjs-menu-button " + this._super();
|
|
||||||
},
|
|
||||||
|
|
||||||
onClick: function () {
|
|
||||||
MediaPlayer.stop();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
//convert Ticks to human hr:min:sec format
|
//convert Ticks to human hr:min:sec format
|
||||||
function ticks_to_human(str) {
|
function ticks_to_human(str) {
|
||||||
|
|
||||||
var in_seconds = (str / 10000000);
|
var in_seconds = (str / 10000000);
|
||||||
var hours = Math.floor(in_seconds / 3600);
|
var hours = Math.floor(in_seconds / 3600);
|
||||||
var minutes = Math.floor((in_seconds - (hours * 3600)) / 60);
|
var minutes = Math.floor((in_seconds - (hours * 3600)) / 60);
|
||||||
var seconds = '0' + Math.round(in_seconds - (hours * 3600) - (minutes * 60));
|
var seconds = '0' + Math.round(in_seconds - (hours * 3600) - (minutes * 60));
|
||||||
|
|
||||||
var time = '';
|
var time = '';
|
||||||
|
|
||||||
if (hours > 0) time += hours + ":";
|
if (hours > 0) time += hours + ":";
|
||||||
if (minutes < 10 && hours == 0) time += minutes;
|
if (minutes < 10 && hours == 0) time += minutes;
|
||||||
else time += ('0' + minutes).substr(-2);
|
else time += ('0' + minutes).substr(-2);
|
||||||
time += ":" + seconds.substr(-2);
|
time += ":" + seconds.substr(-2);
|
||||||
|
|
||||||
return time;
|
return time;
|
||||||
};
|
};
|
||||||
|
|
||||||
//parse video player src URL
|
//parse video player src URL
|
||||||
|
|
|
||||||
|
|
@ -1,390 +1,320 @@
|
||||||
var MediaPlayer = {
|
var MediaPlayer = {
|
||||||
|
|
||||||
testableAudioElement: document.createElement('audio'),
|
testableAudioElement: document.createElement('audio'),
|
||||||
testableVideoElement: document.createElement('video'),
|
testableVideoElement: document.createElement('video'),
|
||||||
|
|
||||||
canPlay: function (item) {
|
canPlay: function (item) {
|
||||||
|
|
||||||
if (item.MediaType === "Video") {
|
if (item.MediaType === "Video") {
|
||||||
|
|
||||||
var media = MediaPlayer.testableVideoElement;
|
var media = MediaPlayer.testableVideoElement;
|
||||||
|
|
||||||
if (media.canPlayType) {
|
if (media.canPlayType) {
|
||||||
|
|
||||||
return media.canPlayType('video/mp4').replace(/no/, '') || media.canPlayType('video/mp2t').replace(/no/, '') || media.canPlayType('video/webm').replace(/no/, '') || media.canPlayType('application/x-mpegURL').replace(/no/, '') || media.canPlayType('video/ogv').replace(/no/, '');
|
return media.canPlayType('video/mp4').replace(/no/, '') || media.canPlayType('video/mp2t').replace(/no/, '') || media.canPlayType('video/webm').replace(/no/, '') || media.canPlayType('application/x-mpegURL').replace(/no/, '') || media.canPlayType('video/ogv').replace(/no/, '');
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.MediaType === "Audio") {
|
if (item.MediaType === "Audio") {
|
||||||
|
|
||||||
var media = MediaPlayer.testableAudioElement;
|
var media = MediaPlayer.testableAudioElement;
|
||||||
|
|
||||||
if (media.canPlayType) {
|
if (media.canPlayType) {
|
||||||
|
|
||||||
return media.canPlayType('audio/mpeg').replace(/no/, '') || media.canPlayType('audio/webm').replace(/no/, '') || media.canPlayType('audio/aac').replace(/no/, '') || media.canPlayType('audio/ogg').replace(/no/, '');
|
return media.canPlayType('audio/mpeg').replace(/no/, '') || media.canPlayType('audio/webm').replace(/no/, '') || media.canPlayType('audio/aac').replace(/no/, '') || media.canPlayType('audio/ogg').replace(/no/, '');
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
||||||
play: function (items, startPosition) {
|
play: function (items, startPosition) {
|
||||||
|
|
||||||
if (MediaPlayer.isPlaying()) {
|
if (MediaPlayer.isPlaying()) {
|
||||||
MediaPlayer.stop();
|
MediaPlayer.stop();
|
||||||
}
|
}
|
||||||
|
|
||||||
var item = items[0];
|
var item = items[0];
|
||||||
|
|
||||||
var mediaElement;
|
var mediaElement;
|
||||||
|
|
||||||
if (item.MediaType === "Video") {
|
if (item.MediaType === "Video") {
|
||||||
|
|
||||||
mediaElement = MediaPlayer.playVideo(items, startPosition);
|
mediaElement = MediaPlayer.playVideo(items, startPosition);
|
||||||
}
|
}
|
||||||
|
|
||||||
else if (item.MediaType === "Audio") {
|
else if (item.MediaType === "Audio") {
|
||||||
|
|
||||||
mediaElement = MediaPlayer.playAudio(items);
|
mediaElement = MediaPlayer.playAudio(items);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!mediaElement) {
|
if (!mediaElement) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
MediaPlayer.mediaElement = mediaElement;
|
MediaPlayer.mediaElement = mediaElement;
|
||||||
|
|
||||||
var nowPlayingBar = $('#nowPlayingBar').show();
|
var nowPlayingBar = $('#nowPlayingBar').show();
|
||||||
|
|
||||||
if (items.length > 1) {
|
if (items.length > 1) {
|
||||||
$('#previousTrackButton', nowPlayingBar)[0].disabled = false;
|
$('#previousTrackButton', nowPlayingBar)[0].disabled = false;
|
||||||
$('#nextTrackButton', nowPlayingBar)[0].disabled = false;
|
$('#nextTrackButton', nowPlayingBar)[0].disabled = false;
|
||||||
} else {
|
} else {
|
||||||
$('#previousTrackButton', nowPlayingBar)[0].disabled = true;
|
$('#previousTrackButton', nowPlayingBar)[0].disabled = true;
|
||||||
$('#nextTrackButton', nowPlayingBar)[0].disabled = true;
|
$('#nextTrackButton', nowPlayingBar)[0].disabled = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
//display image and title
|
//display image and title
|
||||||
var imageTags = item.ImageTags || {};
|
var imageTags = item.ImageTags || {};
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
var url = "";
|
var url = "";
|
||||||
|
|
||||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||||
|
|
||||||
url = ApiClient.getImageUrl(item.Id, {
|
url = ApiClient.getImageUrl(item.Id, {
|
||||||
type: "Backdrop",
|
type: "Backdrop",
|
||||||
height: 36,
|
height: 36,
|
||||||
tag: item.BackdropImageTags[0]
|
tag: item.BackdropImageTags[0]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (imageTags.Thumb) {
|
else if (imageTags.Thumb) {
|
||||||
|
|
||||||
url = ApiClient.getImageUrl(item.Id, {
|
url = ApiClient.getImageUrl(item.Id, {
|
||||||
type: "Thumb",
|
type: "Thumb",
|
||||||
height: 36,
|
height: 36,
|
||||||
tag: item.ImageTags.Thumb
|
tag: item.ImageTags.Thumb
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (imageTags.Primary) {
|
else if (imageTags.Primary) {
|
||||||
|
|
||||||
url = ApiClient.getImageUrl(item.Id, {
|
url = ApiClient.getImageUrl(item.Id, {
|
||||||
type: "Primary",
|
type: "Primary",
|
||||||
height: 36,
|
height: 36,
|
||||||
tag: item.ImageTags.Primary
|
tag: item.ImageTags.Primary
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
url = "css/images/items/detail/video.png";
|
url = "css/images/items/detail/video.png";
|
||||||
}
|
}
|
||||||
|
|
||||||
var name = item.Name;
|
var name = item.Name;
|
||||||
var series_name = '';
|
var series_name = '';
|
||||||
|
|
||||||
if (item.IndexNumber != null) {
|
if (item.IndexNumber != null) {
|
||||||
name = item.IndexNumber + " - " + name;
|
name = item.IndexNumber + " - " + name;
|
||||||
}
|
}
|
||||||
if (item.ParentIndexNumber != null) {
|
if (item.ParentIndexNumber != null) {
|
||||||
name = item.ParentIndexNumber + "." + name;
|
name = item.ParentIndexNumber + "." + name;
|
||||||
}
|
}
|
||||||
if (item.SeriesName || item.Album || item.ProductionYear) {
|
if (item.SeriesName || item.Album || item.ProductionYear) {
|
||||||
series_name = item.SeriesName || item.Album || item.ProductionYear;
|
series_name = item.SeriesName || item.Album || item.ProductionYear;
|
||||||
}
|
}
|
||||||
|
|
||||||
html += "<div><img class='nowPlayingBarImage ' alt='' title='' src='" + url + "' style='height:36px;display:inline-block;' /></div>";
|
html += "<div><img class='nowPlayingBarImage ' alt='' title='' src='" + url + "' style='height:36px;display:inline-block;' /></div>";
|
||||||
if (item.Type == "Movie")
|
if (item.Type == "Movie")
|
||||||
html += '<div>' + name + '<br/>' + series_name + '</div>';
|
html += '<div>' + name + '<br/>' + series_name + '</div>';
|
||||||
else
|
else
|
||||||
html += '<div>' + series_name + '<br/>' + name + '</div>';
|
html += '<div>' + series_name + '<br/>' + name + '</div>';
|
||||||
|
|
||||||
$('#mediaInfo', nowPlayingBar).html(html);
|
$('#mediaInfo', nowPlayingBar).html(html);
|
||||||
},
|
},
|
||||||
|
|
||||||
playAudio: function (items, params) {
|
playAudio: function (items, params) {
|
||||||
var item = items[0];
|
var item = items[0];
|
||||||
|
|
||||||
var baseParams = {
|
var baseParams = {
|
||||||
audioChannels: 2,
|
audioChannels: 2,
|
||||||
audioBitrate: 128000
|
audioBitrate: 128000
|
||||||
};
|
};
|
||||||
|
|
||||||
$.extend(baseParams, params);
|
$.extend(baseParams, params);
|
||||||
|
|
||||||
var mp3Url = ApiClient.getUrl('Audio/' + item.Id + '/stream.mp3', $.extend({}, baseParams, {
|
var mp3Url = ApiClient.getUrl('Audio/' + item.Id + '/stream.mp3', $.extend({}, baseParams, {
|
||||||
audioCodec: 'mp3'
|
audioCodec: 'mp3'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
|
var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
|
||||||
audioCodec: 'aac'
|
audioCodec: 'aac'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||||
audioCodec: 'Vorbis'
|
audioCodec: 'Vorbis'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
/* ffmpeg always says the ogg stream is corrupt after conversion
|
/* ffmpeg always says the ogg stream is corrupt after conversion
|
||||||
var oggUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.oga', $.extend({}, baseParams, {
|
var oggUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.oga', $.extend({}, baseParams, {
|
||||||
audioCodec: 'Vorbis'
|
audioCodec: 'Vorbis'
|
||||||
}));
|
}));
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<audio class="itemAudio" preload="none" controls autoplay>';
|
html += '<audio class="itemAudio" preload="none" controls autoplay>';
|
||||||
html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
|
html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
|
||||||
html += '<source type="audio/aac" src="' + aacUrl + '" />';
|
html += '<source type="audio/aac" src="' + aacUrl + '" />';
|
||||||
html += '<source type="audio/webm" src="' + webmUrl + '" />';
|
html += '<source type="audio/webm" src="' + webmUrl + '" />';
|
||||||
//html += '<source type="audio/ogg" src="' + oggUrl + '" />';
|
//html += '<source type="audio/ogg" src="' + oggUrl + '" />';
|
||||||
html += '</audio';
|
html += '</audio';
|
||||||
|
|
||||||
var nowPlayingBar = $('#nowPlayingBar').show();
|
var nowPlayingBar = $('#nowPlayingBar').show();
|
||||||
//show stop button
|
//show stop button
|
||||||
$('#stopButton', nowPlayingBar).show();
|
$('#stopButton', nowPlayingBar).show();
|
||||||
|
|
||||||
$('#mediaElement', nowPlayingBar).html(html);
|
$('#mediaElement', nowPlayingBar).html(html);
|
||||||
|
|
||||||
return $('audio', nowPlayingBar)[0];
|
return $('audio', nowPlayingBar)[0];
|
||||||
},
|
},
|
||||||
|
|
||||||
playVideo: function (items, startPosition) {
|
playVideo: function (items, startPosition) {
|
||||||
//stop/kill videoJS
|
//stop/kill videoJS
|
||||||
if (MediaPlayer.mediaElement) MediaPlayer.stop();
|
if (MediaPlayer.mediaElement) MediaPlayer.stop();
|
||||||
|
|
||||||
var item = items[0];
|
var item = items[0];
|
||||||
|
|
||||||
// Account for screen rotation. Use the larger dimension as the width.
|
// Account for screen rotation. Use the larger dimension as the width.
|
||||||
var screenWidth = Math.max(screen.height, screen.width);
|
var screenWidth = Math.max(screen.height, screen.width);
|
||||||
var screenHeight = Math.min(screen.height, screen.width);
|
var screenHeight = Math.min(screen.height, screen.width);
|
||||||
|
|
||||||
var volume = localStorage.getItem("volume") || 0.5;
|
var volume = localStorage.getItem("volume") || 0.5;
|
||||||
|
|
||||||
var baseParams = {
|
var baseParams = {
|
||||||
audioChannels: 2,
|
audioChannels: 2,
|
||||||
audioBitrate: 128000,
|
audioBitrate: 128000,
|
||||||
videoBitrate: 1500000,
|
videoBitrate: 1500000,
|
||||||
maxWidth: screenWidth,
|
maxWidth: screenWidth,
|
||||||
maxHeight: screenHeight,
|
maxHeight: screenHeight,
|
||||||
StartTimeTicks: 0
|
StartTimeTicks: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
if (typeof (startPosition) != "undefined") {
|
if (typeof (startPosition) != "undefined") {
|
||||||
baseParams['StartTimeTicks'] = startPosition;
|
baseParams['StartTimeTicks'] = startPosition;
|
||||||
}
|
}
|
||||||
|
|
||||||
var html = '<video id="videoWindow" class="itemVideo video-js vjs-default-skin"></video>';
|
var html = '<video id="videoWindow" class="itemVideo video-js vjs-default-skin"></video>';
|
||||||
|
|
||||||
var nowPlayingBar = $('#nowPlayingBar');
|
var nowPlayingBar = $('#nowPlayingBar');
|
||||||
//hide stop button
|
//hide stop button
|
||||||
$('#stopButton', nowPlayingBar).hide();
|
$('#stopButton', nowPlayingBar).hide();
|
||||||
|
|
||||||
$('#mediaElement', nowPlayingBar).addClass("video").html(html).show();
|
$('#mediaElement', nowPlayingBar).addClass("video").html(html).show();
|
||||||
|
|
||||||
_V_("videoWindow", { 'controls': true, 'autoplay': true, 'preload': 'auto' }, function () {
|
_V_("videoWindow", { 'controls': true, 'autoplay': true, 'preload': 'auto' }, function () {
|
||||||
|
|
||||||
var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
|
var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
|
||||||
videoCodec: 'h264',
|
videoCodec: 'h264',
|
||||||
audioCodec: 'aac'
|
audioCodec: 'aac'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var tsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ts', $.extend({}, baseParams, {
|
var tsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ts', $.extend({}, baseParams, {
|
||||||
videoCodec: 'h264',
|
videoCodec: 'h264',
|
||||||
audioCodec: 'aac'
|
audioCodec: 'aac'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||||
videoCodec: 'vpx',
|
videoCodec: 'vpx',
|
||||||
audioCodec: 'Vorbis'
|
audioCodec: 'Vorbis'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||||
videoCodec: 'h264',
|
videoCodec: 'h264',
|
||||||
audioCodec: 'aac'
|
audioCodec: 'aac'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var ogvVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ogv', $.extend({}, baseParams, {
|
var ogvVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ogv', $.extend({}, baseParams, {
|
||||||
videoCodec: 'theora',
|
videoCodec: 'theora',
|
||||||
audioCodec: 'Vorbis'
|
audioCodec: 'Vorbis'
|
||||||
}));
|
}));
|
||||||
|
|
||||||
(this).src([{ type: "video/webm", src: webmVideoUrl },
|
(this).src([{ type: "video/webm", src: webmVideoUrl },
|
||||||
{ type: "video/mp4", src: mp4VideoUrl },
|
{ type: "video/mp4", src: mp4VideoUrl },
|
||||||
{ type: "video/mp2t; codecs='h264, aac'", src: tsVideoUrl },
|
{ type: "video/mp2t; codecs='h264, aac'", src: tsVideoUrl },
|
||||||
{ type: "application/x-mpegURL", src: hlsVideoUrl },
|
{ type: "application/x-mpegURL", src: hlsVideoUrl },
|
||||||
{ type: "video/ogg", src: ogvVideoUrl }]
|
{ type: "video/ogg", src: ogvVideoUrl }]
|
||||||
).volume(volume);
|
).volume(volume);
|
||||||
|
|
||||||
videoJSextension.setup_video($('#videoWindow'), item);
|
videoJSextension.setup_video($('#videoWindow'), item);
|
||||||
|
|
||||||
(this).addEvent("loadstart", function () {
|
(this).addEvent("loadstart", function () {
|
||||||
$(".vjs-remaining-time-display").hide();
|
$(".vjs-remaining-time-display").hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
(this).addEvent("durationchange", function () {
|
(this).addEvent("durationchange", function () {
|
||||||
if ((this).duration() != "Infinity")
|
if ((this).duration() != "Infinity")
|
||||||
$(".vjs-remaining-time-display").show();
|
$(".vjs-remaining-time-display").show();
|
||||||
});
|
});
|
||||||
|
|
||||||
(this).addEvent("volumechange", function () {
|
(this).addEvent("volumechange", function () {
|
||||||
localStorage.setItem("volume", (this).volume());
|
localStorage.setItem("volume", (this).volume());
|
||||||
});
|
});
|
||||||
|
|
||||||
(this).addEvent("play", MediaPlayer.updateProgress);
|
(this).addEvent("play", MediaPlayer.updateProgress);
|
||||||
|
|
||||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
|
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
|
||||||
});
|
});
|
||||||
|
|
||||||
return $('video', nowPlayingBar)[0];
|
return $('video', nowPlayingBar)[0];
|
||||||
},
|
},
|
||||||
|
|
||||||
stop: function () {
|
stop: function () {
|
||||||
|
|
||||||
var elem = MediaPlayer.mediaElement;
|
var elem = MediaPlayer.mediaElement;
|
||||||
|
|
||||||
//check if it's a video using VideoJS
|
//check if it's a video using VideoJS
|
||||||
if ($(elem).hasClass("vjs-tech")) {
|
if ($(elem).hasClass("vjs-tech")) {
|
||||||
var player = _V_("videoWindow");
|
var player = _V_("videoWindow");
|
||||||
|
|
||||||
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||||
|
|
||||||
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||||
var item_id = item_string[0].replace("Videos/", "");
|
var item_id = item_string[0].replace("Videos/", "");
|
||||||
|
|
||||||
var positionTicks = parseInt(start_time) + Math.floor(10000000 * player.currentTime());
|
var positionTicks = parseInt(start_time) + Math.floor(10000000 * player.currentTime());
|
||||||
|
|
||||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
||||||
|
|
||||||
clearTimeout(progressInterval);
|
clearTimeout(progressInterval);
|
||||||
|
|
||||||
if (player.techName == "html5") {
|
if (player.techName == "html5") {
|
||||||
player.tag.src = "";
|
player.tag.src = "";
|
||||||
player.tech.removeTriggers();
|
player.tech.removeTriggers();
|
||||||
player.load();
|
player.load();
|
||||||
}
|
}
|
||||||
//player.tech.destroy();
|
//player.tech.destroy();
|
||||||
player.destroy();
|
player.destroy();
|
||||||
} else {
|
} else {
|
||||||
elem.pause();
|
elem.pause();
|
||||||
elem.src = "";
|
elem.src = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
$(elem).remove();
|
$(elem).remove();
|
||||||
|
|
||||||
$('#nowPlayingBar').hide();
|
$('#nowPlayingBar').hide();
|
||||||
|
|
||||||
MediaPlayer.mediaElement = null;
|
MediaPlayer.mediaElement = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
isPlaying: function () {
|
isPlaying: function () {
|
||||||
return MediaPlayer.mediaElement;
|
return MediaPlayer.mediaElement;
|
||||||
},
|
},
|
||||||
|
|
||||||
updateProgress: function () {
|
updateProgress: function () {
|
||||||
progressInterval = setInterval(function () {
|
progressInterval = setInterval(function () {
|
||||||
var player = _V_("videoWindow");
|
var player = _V_("videoWindow");
|
||||||
|
|
||||||
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||||
|
|
||||||
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||||
var item_id = item_string[0].replace("Videos/", "");
|
var item_id = item_string[0].replace("Videos/", "");
|
||||||
|
|
||||||
var positionTicks = parseInt(start_time) + Math.floor(10000000 * player.currentTime());
|
var positionTicks = parseInt(start_time) + Math.floor(10000000 * player.currentTime());
|
||||||
|
|
||||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
||||||
}, 30000);
|
}, 30000);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var videoJSextension = {
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add our video quality selector button to the videojs controls. This takes
|
|
||||||
a mandatory jQuery object of the <video> element we are setting up the
|
|
||||||
videojs video for.
|
|
||||||
*/
|
|
||||||
setup_video: function ($video, item) {
|
|
||||||
|
|
||||||
// Add the stop button.
|
|
||||||
_V_.merge(_V_.ControlBar.prototype.options.components, { StopButton: {} });
|
|
||||||
|
|
||||||
var vid_id = $video.attr('id'),
|
|
||||||
available_res = ['high', 'medium', 'low'],
|
|
||||||
default_res,
|
|
||||||
vjs_sources = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
|
||||||
vjs_source = {},
|
|
||||||
vjs_chapters = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
|
||||||
vjs_chapter = {};
|
|
||||||
|
|
||||||
// Determine this video's default res (it might not have the globally determined default available)
|
|
||||||
default_res = available_res[0];
|
|
||||||
|
|
||||||
// Put together the videojs source arrays for each available resolution
|
|
||||||
$.each(available_res, function (i, res) {
|
|
||||||
|
|
||||||
vjs_sources[i] = [];
|
|
||||||
|
|
||||||
vjs_source = {};
|
|
||||||
vjs_source.res = res;
|
|
||||||
|
|
||||||
vjs_sources[i].push(vjs_source);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
_V_.ResolutionSelectorButton = _V_.ResolutionSelector.extend({
|
|
||||||
buttonText: default_res,
|
|
||||||
availableRes: vjs_sources
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add the resolution selector button.
|
|
||||||
_V_.merge(_V_.ControlBar.prototype.options.components, { ResolutionSelectorButton: {} });
|
|
||||||
|
|
||||||
//chceck if chapters exist and add chapter selector
|
|
||||||
if (item.Chapters && item.Chapters.length) {
|
|
||||||
// Put together the videojs source arrays for each available chapter
|
|
||||||
$.each(item.Chapters, function (i, chapter) {
|
|
||||||
|
|
||||||
vjs_chapters[i] = [];
|
|
||||||
|
|
||||||
vjs_chapter = {};
|
|
||||||
vjs_chapter.Name = chapter.Name + " (" + ticks_to_human(chapter.StartPositionTicks) + ")";
|
|
||||||
vjs_chapter.StartPositionTicks = chapter.StartPositionTicks;
|
|
||||||
|
|
||||||
vjs_chapters[i].push(vjs_chapter);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
_V_.ChapterSelectorButton = _V_.ChapterSelector.extend({
|
|
||||||
buttonText: '',
|
|
||||||
Chapters: vjs_chapters
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add the chapter selector button.
|
|
||||||
_V_.merge(_V_.ControlBar.prototype.options.components, { ChapterSelectorButton: {} });
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1 +1,484 @@
|
||||||
|
|
||||||
|
var videoJSextension = {
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add our video quality selector button to the videojs controls. This takes
|
||||||
|
a mandatory jQuery object of the <video> element we are setting up the
|
||||||
|
videojs video for.
|
||||||
|
*/
|
||||||
|
setup_video: function ($video, item) {
|
||||||
|
|
||||||
|
// Add the stop button.
|
||||||
|
_V_.merge(_V_.ControlBar.prototype.options.components, { StopButton: {} });
|
||||||
|
|
||||||
|
var vid_id = $video.attr('id'),
|
||||||
|
available_res = ['high', 'medium', 'low'],
|
||||||
|
default_res,
|
||||||
|
vjs_sources = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
||||||
|
vjs_source = {},
|
||||||
|
vjs_chapters = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
||||||
|
vjs_chapter = {};
|
||||||
|
|
||||||
|
// Determine this video's default res (it might not have the globally determined default available)
|
||||||
|
default_res = available_res[0];
|
||||||
|
|
||||||
|
// Put together the videojs source arrays for each available resolution
|
||||||
|
$.each(available_res, function (i, res) {
|
||||||
|
|
||||||
|
vjs_sources[i] = [];
|
||||||
|
|
||||||
|
vjs_source = {};
|
||||||
|
vjs_source.res = res;
|
||||||
|
|
||||||
|
vjs_sources[i].push(vjs_source);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
_V_.ResolutionSelectorButton = _V_.ResolutionSelector.extend({
|
||||||
|
buttonText: default_res,
|
||||||
|
availableRes: vjs_sources
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add the resolution selector button.
|
||||||
|
_V_.merge(_V_.ControlBar.prototype.options.components, { ResolutionSelectorButton: {} });
|
||||||
|
|
||||||
|
//chceck if chapters exist and add chapter selector
|
||||||
|
if (item.Chapters && item.Chapters.length) {
|
||||||
|
// Put together the videojs source arrays for each available chapter
|
||||||
|
$.each(item.Chapters, function (i, chapter) {
|
||||||
|
|
||||||
|
vjs_chapters[i] = [];
|
||||||
|
|
||||||
|
vjs_chapter = {};
|
||||||
|
vjs_chapter.Name = chapter.Name + " (" + ticks_to_human(chapter.StartPositionTicks) + ")";
|
||||||
|
vjs_chapter.StartPositionTicks = chapter.StartPositionTicks;
|
||||||
|
|
||||||
|
vjs_chapters[i].push(vjs_chapter);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
_V_.ChapterSelectorButton = _V_.ChapterSelector.extend({
|
||||||
|
buttonText: '',
|
||||||
|
Chapters: vjs_chapters
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add the chapter selector button.
|
||||||
|
_V_.merge(_V_.ControlBar.prototype.options.components, { ChapterSelectorButton: {} });
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
JS for the quality selector in video.js player
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Define the base class for the quality selector button.
|
||||||
|
Most of this code is copied from the _V_.TextTrackButton
|
||||||
|
class.
|
||||||
|
|
||||||
|
https://github.com/zencoder/video-js/blob/master/src/tracks.js#L560)
|
||||||
|
*/
|
||||||
|
_V_.ResolutionSelector = _V_.Button.extend({
|
||||||
|
|
||||||
|
kind: "quality",
|
||||||
|
className: "vjs-quality-button",
|
||||||
|
|
||||||
|
init: function (player, options) {
|
||||||
|
|
||||||
|
this._super(player, options);
|
||||||
|
|
||||||
|
// Save the starting resolution as a property of the player object
|
||||||
|
player.options.currentResolution = this.buttonText;
|
||||||
|
|
||||||
|
this.menu = this.createMenu();
|
||||||
|
|
||||||
|
if (this.items.length === 0) {
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createMenu: function () {
|
||||||
|
|
||||||
|
var menu = new _V_.Menu(this.player);
|
||||||
|
|
||||||
|
// Add a title list item to the top
|
||||||
|
menu.el.appendChild(_V_.createElement("li", {
|
||||||
|
className: "vjs-menu-title",
|
||||||
|
innerHTML: _V_.uc(this.kind)
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.items = this.createItems();
|
||||||
|
|
||||||
|
// Add menu items to the menu
|
||||||
|
this.each(this.items, function (item) {
|
||||||
|
menu.addItem(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add list to element
|
||||||
|
this.addComponent(menu);
|
||||||
|
|
||||||
|
return menu;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Override the default _V_.Button createElement so the button text isn't hidden
|
||||||
|
createElement: function (type, attrs) {
|
||||||
|
|
||||||
|
// Add standard Aria and Tabindex info
|
||||||
|
attrs = _V_.merge({
|
||||||
|
className: this.buildCSSClass(),
|
||||||
|
innerHTML: '<div><span class="vjs-quality-text">' + this.buttonText + '</span></div>',
|
||||||
|
role: "button",
|
||||||
|
tabIndex: 0
|
||||||
|
}, attrs);
|
||||||
|
|
||||||
|
return this._super(type, attrs);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Create a menu item for each text track
|
||||||
|
createItems: function () {
|
||||||
|
|
||||||
|
var items = [];
|
||||||
|
|
||||||
|
this.each(this.availableRes, function (res) {
|
||||||
|
|
||||||
|
items.push(new _V_.ResolutionMenuItem(this.player, {
|
||||||
|
|
||||||
|
label: res[0].res,
|
||||||
|
src: res
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
return items;
|
||||||
|
},
|
||||||
|
|
||||||
|
buildCSSClass: function () {
|
||||||
|
|
||||||
|
return this.className + " vjs-menu-button " + this._super();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Focus - Add keyboard functionality to element
|
||||||
|
onFocus: function () {
|
||||||
|
|
||||||
|
// Show the menu, and keep showing when the menu items are in focus
|
||||||
|
this.menu.lockShowing();
|
||||||
|
this.menu.el.style.display = "block";
|
||||||
|
|
||||||
|
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
||||||
|
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
||||||
|
|
||||||
|
this.menu.unlockShowing();
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Can't turn off list display that we turned on with focus, because list would go away.
|
||||||
|
onBlur: function () { },
|
||||||
|
|
||||||
|
onClick: function () {
|
||||||
|
|
||||||
|
/*
|
||||||
|
When you click the button it adds focus, which will show the menu indefinitely.
|
||||||
|
So we'll remove focus when the mouse leaves the button.
|
||||||
|
Focus is needed for tab navigation.
|
||||||
|
*/
|
||||||
|
this.one('mouseout', this.proxy(function () {
|
||||||
|
|
||||||
|
this.menu.unlockShowing();
|
||||||
|
this.el.blur();
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
Define the base class for the quality menu items
|
||||||
|
*/
|
||||||
|
_V_.ResolutionMenuItem = _V_.MenuItem.extend({
|
||||||
|
|
||||||
|
init: function (player, options) {
|
||||||
|
|
||||||
|
// Modify options for parent MenuItem class's init.
|
||||||
|
options.selected = (options.label === player.options.currentResolution);
|
||||||
|
this._super(player, options);
|
||||||
|
|
||||||
|
this.player.addEvent('changeRes', _V_.proxy(this, this.update));
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function () {
|
||||||
|
|
||||||
|
// Check that we are changing to a new quality (not the one we are already on)
|
||||||
|
if (this.options.label === this.player.options.currentResolution)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var resolutions = new Array();
|
||||||
|
resolutions['high'] = new Array(1500000, 128000, 1920, 1080);
|
||||||
|
resolutions['medium'] = new Array(750000, 128000, 1280, 720);
|
||||||
|
resolutions['low'] = new Array(200000, 128000, 720, 480);
|
||||||
|
|
||||||
|
var current_time = this.player.currentTime();
|
||||||
|
|
||||||
|
// Set the button text to the newly chosen quality
|
||||||
|
jQuery(this.player.controlBar.el).find('.vjs-quality-text').html(this.options.label);
|
||||||
|
|
||||||
|
// Change the source and make sure we don't start the video over
|
||||||
|
var currentSrc = this.player.tag.src;
|
||||||
|
var src = parse_src_url(currentSrc);
|
||||||
|
var newSrc = "/mediabrowser/" + src.Type + "/" + src.item_id + "/stream." + src.stream + "?audioChannels=" + src.audioChannels + "&audioBitrate=" + resolutions[this.options.src[0].res][1] +
|
||||||
|
"&videoBitrate=" + resolutions[this.options.src[0].res][0] + "&maxWidth=" + resolutions[this.options.src[0].res][2] + "&maxHeight=" + resolutions[this.options.src[0].res][3] +
|
||||||
|
"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec;
|
||||||
|
|
||||||
|
if (this.player.duration() == "Infinity") {
|
||||||
|
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
||||||
|
var startTimeTicks = currentSrc.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||||
|
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||||
|
|
||||||
|
newSrc += "&StartTimeTicks=" + Math.floor(parseInt(start_time) + (10000000 * current_time));
|
||||||
|
} else {
|
||||||
|
newSrc += "&StartTimeTicks=" + Math.floor(10000000 * current_time);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||||
|
this.play();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||||
|
this.currentTime(current_time);
|
||||||
|
this.play();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save the newly selected resolution in our player options property
|
||||||
|
this.player.options.currentResolution = this.options.label;
|
||||||
|
|
||||||
|
// Update the classes to reflect the currently selected resolution
|
||||||
|
this.player.triggerEvent('changeRes');
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function () {
|
||||||
|
|
||||||
|
if (this.options.label === this.player.options.currentResolution) {
|
||||||
|
this.selected(true);
|
||||||
|
} else {
|
||||||
|
this.selected(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
JS for the chapter selector in video.js player
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Define the base class for the chapter selector button.
|
||||||
|
*/
|
||||||
|
_V_.ChapterSelector = _V_.Button.extend({
|
||||||
|
|
||||||
|
kind: "chapter",
|
||||||
|
className: "vjs-chapter-button",
|
||||||
|
|
||||||
|
init: function (player, options) {
|
||||||
|
|
||||||
|
this._super(player, options);
|
||||||
|
|
||||||
|
this.menu = this.createMenu();
|
||||||
|
|
||||||
|
if (this.items.length === 0) {
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createMenu: function () {
|
||||||
|
|
||||||
|
var menu = new _V_.Menu(this.player);
|
||||||
|
|
||||||
|
// Add a title list item to the top
|
||||||
|
menu.el.appendChild(_V_.createElement("li", {
|
||||||
|
className: "vjs-menu-title",
|
||||||
|
innerHTML: _V_.uc(this.kind)
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.items = this.createItems();
|
||||||
|
|
||||||
|
// Add menu items to the menu
|
||||||
|
this.each(this.items, function (item) {
|
||||||
|
menu.addItem(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add list to element
|
||||||
|
this.addComponent(menu);
|
||||||
|
|
||||||
|
return menu;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Override the default _V_.Button createElement so the button text isn't hidden
|
||||||
|
createElement: function (type, attrs) {
|
||||||
|
|
||||||
|
// Add standard Aria and Tabindex info
|
||||||
|
attrs = _V_.merge({
|
||||||
|
className: this.buildCSSClass(),
|
||||||
|
innerHTML: '<div><span class="vjs-chapter-text">' + this.buttonText + '</span></div>',
|
||||||
|
role: "button",
|
||||||
|
tabIndex: 0
|
||||||
|
}, attrs);
|
||||||
|
|
||||||
|
return this._super(type, attrs);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Create a menu item for each chapter
|
||||||
|
createItems: function () {
|
||||||
|
|
||||||
|
var items = [];
|
||||||
|
|
||||||
|
this.each(this.Chapters, function (chapter) {
|
||||||
|
|
||||||
|
items.push(new _V_.ChapterMenuItem(this.player, {
|
||||||
|
label: chapter[0].Name,
|
||||||
|
src: chapter
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
return items;
|
||||||
|
},
|
||||||
|
|
||||||
|
buildCSSClass: function () {
|
||||||
|
|
||||||
|
return this.className + " vjs-menu-button " + this._super();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Focus - Add keyboard functionality to element
|
||||||
|
onFocus: function () {
|
||||||
|
|
||||||
|
//find the current chapter and mark it active in the list
|
||||||
|
//need to determine current position plus the start point of the file to know where we are.
|
||||||
|
var current_time = this.player.currentTime();
|
||||||
|
var startTimeTicks = this.player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||||
|
var now_ticks = Math.floor(parseInt(startTimeTicks[0].replace("StartTimeTicks=","")) + (10000000 * current_time));
|
||||||
|
|
||||||
|
var activeChapter;
|
||||||
|
this.each(this.Chapters, function (chapter) {
|
||||||
|
if (now_ticks > chapter[0].StartPositionTicks) {
|
||||||
|
activeChapter = chapter[0];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Save the newly selected chapter in our player options property
|
||||||
|
this.player.options.currentChapter = activeChapter.Name;
|
||||||
|
|
||||||
|
jQuery( this.player.controlBar.el ).find( '.vjs-chapter-button .vjs-menu .vjs-menu-item').removeClass('vjs-selected').each(function(){
|
||||||
|
if ($(this).html() == activeChapter.Name) $(this).addClass('vjs-selected');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the menu, and keep showing when the menu items are in focus
|
||||||
|
this.menu.lockShowing();
|
||||||
|
this.menu.el.style.display = "block";
|
||||||
|
|
||||||
|
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
||||||
|
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
||||||
|
|
||||||
|
this.menu.unlockShowing();
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// Can't turn off list display that we turned on with focus, because list would go away.
|
||||||
|
onBlur: function () { },
|
||||||
|
|
||||||
|
onClick: function () {
|
||||||
|
|
||||||
|
/*
|
||||||
|
When you click the button it adds focus, which will show the menu indefinitely.
|
||||||
|
So we'll remove focus when the mouse leaves the button.
|
||||||
|
Focus is needed for tab navigation.
|
||||||
|
*/
|
||||||
|
this.one('mouseout', this.proxy(function () {
|
||||||
|
|
||||||
|
this.menu.unlockShowing();
|
||||||
|
this.el.blur();
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
Define the base class for the chapter menu items
|
||||||
|
*/
|
||||||
|
_V_.ChapterMenuItem = _V_.MenuItem.extend({
|
||||||
|
|
||||||
|
init: function (player, options) {
|
||||||
|
|
||||||
|
// Modify options for parent MenuItem class's init.
|
||||||
|
//options.selected = ( options.label === player.options.currentResolution );
|
||||||
|
this._super(player, options);
|
||||||
|
|
||||||
|
this.player.addEvent('changeChapter', _V_.proxy(this, this.update));
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function () {
|
||||||
|
|
||||||
|
// Set the button text to the newly chosen chapter
|
||||||
|
//jQuery( this.player.controlBar.el ).find( '.vjs-chapter-text' ).html( this.options.label );
|
||||||
|
|
||||||
|
if (this.player.duration() == "Infinity") {
|
||||||
|
var currentSrc = this.player.tag.src;
|
||||||
|
|
||||||
|
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
||||||
|
var newSrc = currentSrc.replace(new RegExp("StartTimeTicks=[0-9]+", "g"), "StartTimeTicks=" + this.options.src[0].StartPositionTicks);
|
||||||
|
} else {
|
||||||
|
var newSrc = currentSrc += "&StartTimeTicks=" + this.options.src[0].StartPositionTicks;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||||
|
this.play();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
//figure out the time from ticks
|
||||||
|
var current_time = parseFloat(this.options.src[0].StartPositionTicks) / 10000000;
|
||||||
|
|
||||||
|
this.player.currentTime(current_time);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save the newly selected chapter in our player options property
|
||||||
|
this.player.options.currentChapter = this.options.label;
|
||||||
|
|
||||||
|
// Update the classes to reflect the currently selected chapter
|
||||||
|
this.player.triggerEvent('changeChapter');
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function () {
|
||||||
|
if (this.options.label === this.player.options.currentChapter) {
|
||||||
|
this.selected(true);
|
||||||
|
} else {
|
||||||
|
this.selected(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
JS for the stop button in video.js player
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Define the base class for the stop button.
|
||||||
|
*/
|
||||||
|
|
||||||
|
_V_.StopButton = _V_.Button.extend({
|
||||||
|
|
||||||
|
kind: "stop",
|
||||||
|
className: "vjs-stop-button",
|
||||||
|
|
||||||
|
init: function (player, options) {
|
||||||
|
|
||||||
|
this._super(player, options);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
buildCSSClass: function () {
|
||||||
|
|
||||||
|
return this.className + " vjs-menu-button " + this._super();
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function () {
|
||||||
|
MediaPlayer.stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue