mirror of https://github.com/FreeTubeApp/FreeTube
Fixing up dash player implementation
This commit is contained in:
parent
491180f762
commit
b9251f75de
|
@ -83,13 +83,13 @@ let videoShortcutHandler = function (event) {
|
|||
forceSubscriptions();
|
||||
}
|
||||
|
||||
let videoPlayer = $('.videoPlayer').get(0);
|
||||
let videoPlayer = $('#player').get(0);
|
||||
if (typeof (videoPlayer) !== 'undefined' && !$('#jumpToInput').is(':focus') && !$('#search').is(':focus')) {
|
||||
switch (event.which) {
|
||||
case 32:
|
||||
// Space Bar
|
||||
event.preventDefault();
|
||||
videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
|
||||
player.paused ? player.play() : player.pause();
|
||||
break;
|
||||
case 74:
|
||||
// J Key
|
||||
|
@ -99,7 +99,7 @@ let videoShortcutHandler = function (event) {
|
|||
case 75:
|
||||
// K Key
|
||||
event.preventDefault();
|
||||
videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
|
||||
player.paused ? player.play() : player.pause();
|
||||
break;
|
||||
case 76:
|
||||
// L Key
|
||||
|
@ -109,18 +109,18 @@ let videoShortcutHandler = function (event) {
|
|||
case 79:
|
||||
// O Key
|
||||
event.preventDefault();
|
||||
if (videoPlayer.playbackRate > 0.25){
|
||||
let rate = videoPlayer.playbackRate - 0.25;
|
||||
videoPlayer.playbackRate = rate;
|
||||
if (player.playbackRate > 0.25){
|
||||
let rate = player.playbackRate - 0.25;
|
||||
player.playbackRate = rate;
|
||||
$('#currentSpeed').html(rate);
|
||||
}
|
||||
break;
|
||||
case 80:
|
||||
// P Key
|
||||
event.preventDefault();
|
||||
if (videoPlayer.playbackRate < 2){
|
||||
let rate = videoPlayer.playbackRate + 0.25;
|
||||
videoPlayer.playbackRate = rate;
|
||||
if (player.playbackRate < 2){
|
||||
let rate = player.playbackRate + 0.25;
|
||||
player.playbackRate = rate;
|
||||
$('#currentSpeed').html(rate);
|
||||
}
|
||||
break;
|
||||
|
@ -128,17 +128,17 @@ let videoShortcutHandler = function (event) {
|
|||
// F Key
|
||||
event.preventDefault();
|
||||
|
||||
if (videoPlayer.webkitDisplayingFullscreen) {
|
||||
videoPlayer.webkitExitFullscreen
|
||||
if (player.webkitDisplayingFullscreen) {
|
||||
player.webkitExitFullscreen
|
||||
}
|
||||
else{
|
||||
videoPlayer.webkitRequestFullscreen();
|
||||
player.webkitRequestFullscreen();
|
||||
}
|
||||
break;
|
||||
case 77:
|
||||
// M Key
|
||||
event.preventDefault();
|
||||
let volume = videoPlayer.volume;
|
||||
let volume = player.volume;
|
||||
|
||||
if (volume > 0) {
|
||||
changeVolume(-1);
|
||||
|
|
|
@ -185,7 +185,7 @@ function hideMouseTimeout() {
|
|||
clearTimeout(mouseTimeout);
|
||||
mouseTimeout = window.setTimeout(function () {
|
||||
$('.videoPlayer')[0].style.cursor = 'none';
|
||||
}, 3150);
|
||||
}, 2800);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -474,37 +474,41 @@ function clickMiniPlayer(videoId) {
|
|||
function checkVideoSettings() {
|
||||
//let player = document.getElementById('videoPlayer');
|
||||
|
||||
console.log('checking Settings');
|
||||
|
||||
// Mediaelement.js for some reason calls onLoadStart() multiple times
|
||||
// This check is here to force checkVideoSettings to only run once.
|
||||
if (checkedSettings) {
|
||||
return;
|
||||
}
|
||||
|
||||
checkedSettings = true;
|
||||
console.log('checking Settings');
|
||||
|
||||
let player = new MediaElementPlayer('player', {
|
||||
features: ['playpause', 'current', 'progress', 'duration', 'volume', 'loop', 'stop', 'speed', 'quality', 'fullscreen'],
|
||||
features: ['playpause', 'current', 'loop', 'tracks', 'progress', 'duration', 'volume', 'stop', 'speed', 'quality', 'fullscreen'],
|
||||
|
||||
speeds: ['2', '1.75', '1.5', '1.25', '1', '0.75', '0.5', '0.25'],
|
||||
defaultSpeed: '1',
|
||||
defaultSpeed: defaultPlaybackRate,
|
||||
qualityText: 'Quality',
|
||||
defaultQuality: 'auto',
|
||||
stretching: 'fill',
|
||||
defaultQuality: 'Auto',
|
||||
stretching: 'responsive',
|
||||
startVolume: currentVolume,
|
||||
|
||||
success: function(mediaElement, originalNode, instance) {
|
||||
console.log(mediaElement,originalNode,instance);
|
||||
|
||||
if (autoplay) {
|
||||
instance.play();
|
||||
}
|
||||
|
||||
if (enableSubtitles) {
|
||||
instance.options.startLanguage = 'en';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
|
||||
if (autoplay) {
|
||||
player.play();
|
||||
}
|
||||
|
||||
if (enableSubtitles) {
|
||||
player.textTracks[0].mode = 'showing';
|
||||
}
|
||||
|
||||
if (playerView.firstLoad) {
|
||||
playerView.firstLoad = false;
|
||||
|
||||
|
@ -528,9 +532,6 @@ function checkVideoSettings() {
|
|||
}
|
||||
break;
|
||||
}
|
||||
|
||||
player.playbackRate = parseFloat(defaultPlaybackRate);
|
||||
$('#currentSpeed').html(defaultPlaybackRate);
|
||||
}
|
||||
|
||||
player.volume = currentVolume;
|
||||
|
@ -573,7 +574,7 @@ function playNextVideo() {
|
|||
*/
|
||||
function changeVideoSpeed(speed) {
|
||||
$('#currentSpeed').html(speed);
|
||||
$('.videoPlayer').get(0).playbackRate = speed;
|
||||
player.playbackRate = speed;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -584,15 +585,15 @@ function changeVideoSpeed(speed) {
|
|||
* @return {Void}
|
||||
*/
|
||||
function changeVolume(amount) {
|
||||
const videoPlayer = $('.videoPlayer').get(0);
|
||||
let volume = videoPlayer.volume;
|
||||
// const videoPlayer = $('#player').get();
|
||||
let volume = player.volume;
|
||||
volume = volume + amount;
|
||||
if (volume > 1) {
|
||||
videoPlayer.volume = 1;
|
||||
player.volume = 1;
|
||||
} else if (volume < 0) {
|
||||
videoPlayer.volume = 0;
|
||||
player.volume = 0;
|
||||
} else {
|
||||
videoPlayer.volume = volume;
|
||||
player.volume = volume;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -604,8 +605,8 @@ function changeVolume(amount) {
|
|||
* @return {Void}
|
||||
*/
|
||||
function changeDurationBySeconds(seconds) {
|
||||
const videoPlayer = $('.videoPlayer').get(0);
|
||||
videoPlayer.currentTime = videoPlayer.currentTime + seconds;
|
||||
// const videoPlayer = $('.videoPlayer').get(0);
|
||||
player.currentTime = player.currentTime + seconds;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -616,17 +617,16 @@ function changeDurationBySeconds(seconds) {
|
|||
* @return {Void}
|
||||
*/
|
||||
function changeDurationByPercentage(percentage) {
|
||||
const videoPlayer = $('.videoPlayer').get(0);
|
||||
videoPlayer.currentTime = videoPlayer.duration * percentage;
|
||||
//const videoPlayer = $('.videoPlayer').get(0);
|
||||
player.currentTime = player.duration * percentage;
|
||||
}
|
||||
|
||||
function changeDuration(seconds) {
|
||||
const videoPlayer = $('.videoPlayer').get(0);
|
||||
videoPlayer.currentTime = seconds;
|
||||
// const videoPlayer = $('.videoPlayer').get(0);
|
||||
player.currentTime = seconds;
|
||||
}
|
||||
|
||||
function updateVolume() {
|
||||
let player = document.getElementById('videoPlayer');
|
||||
currentVolume = player.volume
|
||||
}
|
||||
|
||||
|
|
|
@ -232,7 +232,7 @@ function displayChannel(channel) {
|
|||
let channelData = {};
|
||||
|
||||
channelData.channelId = channel.authorId;
|
||||
channelData.thumbnail = "https:" + channel.authorThumbnails[4].url;
|
||||
channelData.thumbnail = channel.authorThumbnails[4].url;
|
||||
channelData.channelName = channel.author;
|
||||
channelData.description = channel.description;
|
||||
channelData.subscriberCount = channel.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
|
|
|
@ -64,7 +64,7 @@ a {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.topNav span {
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
<div v-if='seen'>
|
||||
<div v-if='playerSeen' class='videoPlayer'>
|
||||
<video id='player' onloadstart='checkVideoSettings(); return;'>
|
||||
<video id='player' onloadstart='checkVideoSettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onvolumechange='updateVolume()'>
|
||||
<source data-quality='360p' type="video/mp4" :src="video480p" />
|
||||
<source data-quality='720p' type="video/mp4" :src="video720p" />
|
||||
<source data-quality='Audio' type="audio/mp4" :src="videoAudio" />
|
||||
<source data-quality='Auto' type="application/dash+xml" :src="videoDash" />
|
||||
<span v-html="subtitleHtml"></span>
|
||||
</video>
|
||||
<!--<video class="videoPlayer" id='videoPlayer' type="application/x-mpegURL" object-fit='cover' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" onloadstart='checkVideoSettings()' onvolumechange='updateVolume()' controls="" onended='playNextVideo()' :src='videoUrl' :poster="videoThumbnail" v-html="subtitleHtml">
|
||||
</video>-->
|
||||
|
|
Loading…
Reference in New Issue