mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
replace videoJS with jPlayer
This commit is contained in:
Techywarrior
parent
991cbb0830
commit
54a89ce8fc
11 changed files with 861 additions and 544 deletions
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
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/webm').replace(/no/, '') || media.canPlayType('video/ogv').replace(/no/, '');
|
||||
}
|
||||
|
||||
return false;
|
||||
|
|
@ -170,6 +170,9 @@
|
|||
|
||||
var volume = localStorage.getItem("volume") || 0.5;
|
||||
|
||||
//need to store current play position (reset to 0 on new video load)
|
||||
MediaPlayer.playingTime = 0;
|
||||
|
||||
var baseParams = {
|
||||
audioChannels: 2,
|
||||
audioBitrate: 128000,
|
||||
|
|
@ -183,102 +186,90 @@
|
|||
baseParams['StartTimeTicks'] = startPosition;
|
||||
}
|
||||
|
||||
var html = '<video id="videoWindow" class="itemVideo video-js vjs-default-skin"></video>';
|
||||
var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
|
||||
videoCodec: 'h264',
|
||||
audioCodec: 'aac'
|
||||
}));
|
||||
|
||||
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||
videoCodec: 'vpx',
|
||||
audioCodec: 'Vorbis'
|
||||
}));
|
||||
|
||||
var ogvVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ogv', $.extend({}, baseParams, {
|
||||
videoCodec: 'theora',
|
||||
audioCodec: 'Vorbis'
|
||||
}));
|
||||
|
||||
$("#media_player").jPlayer({
|
||||
ready: function () {
|
||||
$(this).jPlayer("setMedia", {
|
||||
m4v: mp4VideoUrl,
|
||||
ogv: ogvVideoUrl,
|
||||
webm: webmVideoUrl
|
||||
}).jPlayer("play");
|
||||
|
||||
$('.jp_duration').html(ticks_to_human(item.RunTimeTicks));
|
||||
|
||||
$(this).bind($.jPlayer.event.timeupdate,function(event){
|
||||
MediaPlayer.playingTime = event.jPlayer.status.currentTime;
|
||||
});
|
||||
|
||||
$(this).bind($.jPlayer.event.volumechange,function(event){
|
||||
localStorage.setItem("volume", event.jPlayer.options.volume );
|
||||
});
|
||||
|
||||
//add quality selector
|
||||
var available_res = ['high','medium','low'];
|
||||
$('.jp_quality').html('');
|
||||
$.each(available_res, function(i, value) {
|
||||
var html = '<li><a href="javascript:;" onclick="MediaPlayer.setResolution(\''+value+'\');">'+value+'</a></li>';
|
||||
$('.jp_quality').append(html);
|
||||
});
|
||||
|
||||
$('.jp_chapters').html('');
|
||||
if (item.Chapters && item.Chapters.length) {
|
||||
// Put together the available chapter list
|
||||
$.each( item.Chapters, function( i, chapter ) {
|
||||
var chapter_name = chapter.Name + " (" + ticks_to_human(chapter.StartPositionTicks) + ")";
|
||||
var html = '<li><a href="javascript:;" onclick="MediaPlayer.setChapter(\''+i+'\',\''+chapter.StartPositionTicks+'\');">'+chapter_name+'</a></li>';
|
||||
$('.jp_chapters').append(html);
|
||||
});
|
||||
}
|
||||
|
||||
MediaPlayer.updateProgress();
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
|
||||
|
||||
},
|
||||
volume: volume,
|
||||
supplied: "m4v, ogv, webm",
|
||||
cssSelectorAncestor: "#media_container",
|
||||
emulateHtml: true
|
||||
});
|
||||
|
||||
var nowPlayingBar = $('#nowPlayingBar');
|
||||
|
||||
$('#mediaElement', nowPlayingBar).html(html).show();
|
||||
|
||||
_V_("videoWindow", {'controls': true, 'autoplay': true, 'preload': 'auto'}, function(){
|
||||
|
||||
var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
|
||||
videoCodec: 'h264',
|
||||
audioCodec: 'aac'
|
||||
}));
|
||||
|
||||
var tsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ts', $.extend({}, baseParams, {
|
||||
videoCodec: 'h264',
|
||||
audioCodec: 'aac'
|
||||
}));
|
||||
|
||||
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||
videoCodec: 'vpx',
|
||||
audioCodec: 'Vorbis'
|
||||
}));
|
||||
|
||||
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||
videoCodec: 'h264',
|
||||
audioCodec: 'aac'
|
||||
}));
|
||||
|
||||
var ogvVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ogv', $.extend({}, baseParams, {
|
||||
videoCodec: 'theora',
|
||||
audioCodec: 'Vorbis'
|
||||
}));
|
||||
|
||||
(this).src([{ type: "video/webm", src: webmVideoUrl },
|
||||
{ type: "video/mp4", src: mp4VideoUrl },
|
||||
{ type: "video/mp2t; codecs='h264, aac'", src: tsVideoUrl },
|
||||
{ type: "application/x-mpegURL", src: hlsVideoUrl },
|
||||
{ type: "video/ogg", src: ogvVideoUrl }]
|
||||
).volume(volume);
|
||||
|
||||
videoJSextension.setup_video( $( '#videoWindow' ), item );
|
||||
|
||||
(this).addEvent("loadstart",function(){
|
||||
$(".vjs-remaining-time-display").hide();
|
||||
});
|
||||
|
||||
(this).addEvent("durationchange",function(){
|
||||
if ((this).duration() != "Infinity")
|
||||
$(".vjs-remaining-time-display").show();
|
||||
});
|
||||
|
||||
(this).addEvent("volumechange",function(){
|
||||
localStorage.setItem("volume", (this).volume());
|
||||
});
|
||||
|
||||
(this).addEvent("play", MediaPlayer.updateProgress);
|
||||
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
|
||||
});
|
||||
$('#mediaElement', nowPlayingBar).show();
|
||||
|
||||
return $('video', nowPlayingBar)[0];
|
||||
},
|
||||
|
||||
stop: function () {
|
||||
|
||||
var elem = MediaPlayer.mediaElement;
|
||||
var startTimeTicks = $("#media_player video").attr("src").match(new RegExp("StartTimeTicks=[0-9]+","g"));
|
||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=","");
|
||||
|
||||
//check if it's a video using VideoJS
|
||||
if ($(elem).hasClass("vjs-tech")) {
|
||||
var player = _V_("videoWindow");
|
||||
var item_string = $("#media_player video").attr("src").match(new RegExp("Videos/[0-9a-z\-]+","g"));
|
||||
var item_id = item_string[0].replace("Videos/","");
|
||||
|
||||
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+","g"));
|
||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=","");
|
||||
var current_time = MediaPlayer.playingTime;
|
||||
var positionTicks = parseInt(start_time) + Math.floor(10000000*current_time);
|
||||
|
||||
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+","g"));
|
||||
var item_id = item_string[0].replace("Videos/","");
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
||||
|
||||
var positionTicks = parseInt(start_time) + Math.floor(10000000*player.currentTime());
|
||||
clearTimeout(MediaPlayer.progressInterval);
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
||||
|
||||
clearTimeout(progressInterval);
|
||||
|
||||
if (player.techName == "html5") {
|
||||
player.tag.src = "";
|
||||
player.tech.removeTriggers();
|
||||
player.load();
|
||||
}
|
||||
//player.tech.destroy();
|
||||
player.destroy();
|
||||
}else {
|
||||
elem.pause();
|
||||
elem.src = "";
|
||||
}
|
||||
|
||||
$(elem).remove();
|
||||
$("#media_player").jPlayer("destroy");
|
||||
|
||||
$('#nowPlayingBar').hide();
|
||||
|
||||
|
|
@ -290,89 +281,74 @@
|
|||
},
|
||||
|
||||
updateProgress: function () {
|
||||
progressInterval = setInterval(function(){
|
||||
var player = _V_("videoWindow");
|
||||
MediaPlayer.progressInterval = setInterval(function(){
|
||||
var current_time = MediaPlayer.playingTime;
|
||||
|
||||
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+","g"));
|
||||
var startTimeTicks = $("#media_player video").attr("src").match(new RegExp("StartTimeTicks=[0-9]+","g"));
|
||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=","");
|
||||
|
||||
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+","g"));
|
||||
var item_string = $("#media_player video").attr("src").match(new RegExp("Videos/[0-9a-z\-]+","g"));
|
||||
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*current_time);
|
||||
|
||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
||||
},30000);
|
||||
},
|
||||
|
||||
setResolution: function (new_res) {
|
||||
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 = MediaPlayer.playingTime;
|
||||
|
||||
// Set the button text to the newly chosen quality
|
||||
|
||||
|
||||
// Change the source and make sure we don't start the video over
|
||||
var currentSrc = $("#media_player video").attr("src");
|
||||
var src = parse_src_url(currentSrc);
|
||||
var newSrc = "/mediabrowser/"+src.Type+"/"+src.item_id+"/stream."+src.stream+"?audioChannels="+src.audioChannels+"&audioBitrate="+resolutions[new_res][1]+
|
||||
"&videoBitrate="+resolutions[new_res][0]+"&maxWidth="+resolutions[new_res][2]+"&maxHeight="+resolutions[new_res][3]+
|
||||
"&videoCodec="+src.videoCodec+"&audioCodec="+src.audioCodec;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
//need to store current play position (reset to 0 on new video load)
|
||||
MediaPlayer.playingTime = 0;
|
||||
|
||||
$("#media_player").jPlayer("setMedia",{
|
||||
m4v: newSrc,
|
||||
ogv: newSrc,
|
||||
webm: newSrc
|
||||
}).jPlayer("play");
|
||||
|
||||
},
|
||||
|
||||
setChapter: function (chapter_id, new_time) {
|
||||
|
||||
var currentSrc = $("#media_player video").attr("src");
|
||||
|
||||
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
||||
var newSrc = currentSrc.replace(new RegExp("StartTimeTicks=[0-9]+","g"),"StartTimeTicks="+new_time);
|
||||
}else {
|
||||
var newSrc = currentSrc += "&StartTimeTicks="+new_time;
|
||||
}
|
||||
|
||||
$("#media_player").jPlayer("setMedia",{
|
||||
m4v: newSrc,
|
||||
ogv: newSrc,
|
||||
webm: newSrc
|
||||
}).jPlayer("play");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
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 : {} } );
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue