'use strict'; console.log('[Invidious Debug] player.js start'); var player_data = JSON.parse(document.getElementById('player_data').textContent); var video_data = JSON.parse(document.getElementById('video_data').textContent); console.log('[Invidious Debug] video_data.params:', JSON.stringify(video_data.params)); var options = { liveui: true, playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], controlBar: { children: [ 'playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'remainingTimeDisplay', 'Spacer', 'captionsButton', 'audioTrackButton', 'qualitySelector', 'playbackRateMenuButton', 'fullscreenToggle' ] }, html5: { preloadTextTracks: false, vhs: { overrideNative: true } } }; if (player_data.aspect_ratio) { options.aspectRatio = player_data.aspect_ratio; } var embed_url = new URL(location); embed_url.searchParams.delete('v'); var short_url = location.origin + '/' + video_data.id + embed_url.search; embed_url = location.origin + '/embed/' + video_data.id + embed_url.search; var save_player_pos_key = 'save_player_pos'; videojs.Vhs.xhr.beforeRequest = function(options) { // set local if requested not videoplayback if (!options.uri.includes('videoplayback')) { if (!options.uri.includes('local=true')) options.uri += '?local=true'; } return options; }; console.log('[Invidious Debug] Initializing videojs...'); var player; try { player = videojs('player', options); console.log('[Invidious Debug] videojs initialized successfully.'); } catch (e) { console.error('[Invidious Debug] videojs initialization FAILED:', e); // Stop further execution if player init fails throw e; } player.on('error', function () { console.error('[Invidious Debug] Player error event triggered:', player.error()); if (video_data.params.quality === 'dash') return; var localNotDisabled = ( !player.currentSrc().includes('local=true') && !video_data.local_disabled ); var reloadMakesSense = ( player.error().code === MediaError.MEDIA_ERR_NETWORK || player.error().code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED ); if (localNotDisabled) { // add local=true to all current sources player.src(player.currentSources().map(function (source) { source.src += '&local=true'; return source; })); } else if (reloadMakesSense) { console.log('[Invidious Debug] Player error: Attempting reload in 5 seconds.'); setTimeout(function () { console.warn('An error occurred in the player, reloading...'); // After load() all parameters are reset. Save them var currentTime = player.currentTime(); var playbackRate = player.playbackRate(); var paused = player.paused(); player.load(); if (currentTime > 0.5) currentTime -= 0.5; player.currentTime(currentTime); player.playbackRate(playbackRate); if (!paused) player.play(); }, 5000); } else { console.log('[Invidious Debug] Player error: No specific action taken.'); } }); if (video_data.params.quality === 'dash') { console.log('[Invidious Debug] Initializing reloadSourceOnError...'); try { player.reloadSourceOnError({ errorInterval: 10 }); console.log('[Invidious Debug] reloadSourceOnError initialized.'); } catch (e) { console.error('[Invidious Debug] reloadSourceOnError FAILED:', e); } } /** * Function for add time argument to url * * @param {String} url * @param {String} [base] * @returns {URL} urlWithTimeArg */ function addCurrentTimeToURL(url, base) { var urlUsed = new URL(url, base); urlUsed.searchParams.delete('start'); var currentTime = Math.ceil(player.currentTime()); if (currentTime > 0) urlUsed.searchParams.set('t', currentTime); else if (urlUsed.searchParams.has('t')) urlUsed.searchParams.delete('t'); return urlUsed; } /** * Global variable to save the last timestamp (in full seconds) at which the external * links were updated by the 'timeupdate' callback below. * * It is initialized to 5s so that the video will always restart from the beginning * if the user hasn't really started watching before switching to the other website. */ var timeupdate_last_ts = 5; /** * Callback that updates the timestamp on all external links */ player.on('timeupdate', function () { // Only update once every second let current_ts = Math.floor(player.currentTime()); if (current_ts > timeupdate_last_ts) timeupdate_last_ts = current_ts; else return; // YouTube links let elem_yt_watch = document.getElementById('link-yt-watch'); if (elem_yt_watch) { let base_url_yt_watch = elem_yt_watch.getAttribute('data-base-url'); elem_yt_watch.href = addCurrentTimeToURL(base_url_yt_watch); } let elem_yt_embed = document.getElementById('link-yt-embed'); if (elem_yt_embed) { let base_url_yt_embed = elem_yt_embed.getAttribute('data-base-url'); elem_yt_embed.href = addCurrentTimeToURL(base_url_yt_embed); } // Invidious links let domain = window.location.origin; let elem_iv_embed = document.getElementById('link-iv-embed'); if (elem_iv_embed) { let base_url_iv_embed = elem_iv_embed.getAttribute('data-base-url'); elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, domain); } let elem_iv_other = document.getElementById('link-iv-other'); if (elem_iv_other) { let base_url_iv_other = elem_iv_other.getAttribute('data-base-url'); elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain); } }); /** * Method for getting the contents of a cookie * * @param {String} name Name of cookie * @returns {String|null} cookieValue */ function getCookieValue(name) { var cookiePrefix = name + '='; var matchedCookie = document.cookie.split(';').find(function (item) {return item.includes(cookiePrefix);}); if (matchedCookie) return matchedCookie.replace(cookiePrefix, ''); return null; } /** * Method for updating the 'PREFS' cookie (or creating it if missing) * * @param {number} newVolume New volume defined (null if unchanged) * @param {number} newSpeed New speed defined (null if unchanged) */ function updateCookie(newVolume, newSpeed) { var volumeValue = newVolume !== null ? newVolume : video_data.params.volume; var speedValue = newSpeed !== null ? newSpeed : video_data.params.speed; var cookieValue = getCookieValue('PREFS'); var cookieData; if (cookieValue !== null) { var cookieJson = JSON.parse(decodeURIComponent(cookieValue)); cookieJson.volume = volumeValue; cookieJson.speed = speedValue; cookieData = encodeURIComponent(JSON.stringify(cookieJson)); } else { cookieData = encodeURIComponent(JSON.stringify({ 'volume': volumeValue, 'speed': speedValue })); } // Set expiration in 2 year var date = new Date(); date.setFullYear(date.getFullYear() + 2); var ipRegex = /^((\d+\.){3}\d+|[\dA-Fa-f]*:[\d:A-Fa-f]*:[\d:A-Fa-f]+)$/; var domainUsed = location.hostname; // Fix for a bug in FF where the leading dot in the FQDN is not ignored if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost') domainUsed = '.' + location.hostname; var secure = location.protocol.startsWith("https") ? " Secure;" : ""; document.cookie = 'PREFS=' + cookieData + '; SameSite=Lax; path=/; domain=' + domainUsed + '; expires=' + date.toGMTString() + ';' + secure; video_data.params.volume = volumeValue; video_data.params.speed = speedValue; } player.on('ratechange', function () { updateCookie(null, player.playbackRate()); if (isMobile()) { player.mobileUi({ touchControls: { seekSeconds: 5 * player.playbackRate() } }); } }); player.on('volumechange', function () { updateCookie(Math.ceil(player.volume() * 100), null); }); player.on('waiting', function () { if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) { console.info('Player has caught up to source, resetting playbackRate'); player.playbackRate(1); } }); if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.premiere_timestamp) { player.getChild('bigPlayButton').hide(); } if (video_data.params.save_player_pos) { console.log('[Invidious Debug] Setting up player position save/restore...'); var lastUpdated = 0; var save_video_time = function(time) { const all_video_times = get_all_video_times(); all_video_times[video_data.id] = time; helpers.storage.set(save_player_pos_key, all_video_times); } player.on('timeupdate', function () { const raw = player.currentTime(); const time = Math.floor(raw); if(lastUpdated !== time && raw <= video_data.length_seconds - 15) { save_video_time(time); lastUpdated = time; } }); } else remove_all_video_times(); if (video_data.params.autoplay) { console.log('[Invidious Debug] Handling autoplay setup...'); var bpb = player.getChild('bigPlayButton'); bpb.hide(); player.ready(function () { console.log('[Invidious Debug] Player ready for autoplay.'); new Promise(function (resolve, reject) { setTimeout(function () {resolve(1);}, 1); }).then(function (result) { console.log('[Invidious Debug] Attempting autoplay...'); console.log('[Invidious Debug] Calling player.play() for autoplay...'); var promise = player.play(); if (promise !== undefined) { promise.then(function () { console.log('[Invidious Debug] Autoplay successful.'); }).catch(function (error) { console.error('[Invidious Debug] Autoplay FAILED:', error); bpb.show(); }); } else { console.log('[Invidious Debug] Autoplay started (no promise returned).'); } }); }); } if (!video_data.params.listen && video_data.params.quality === 'dash') { console.log('[Invidious Debug] Initializing httpSourceSelector...'); console.log('[Invidious Debug] Player sources BEFORE httpSourceSelector init:', JSON.stringify(player.currentSources())); try { player.httpSourceSelector(); console.log('[Invidious Debug] httpSourceSelector initialized.'); console.log('[Invidious Debug] Player sources AFTER httpSourceSelector init:', JSON.stringify(player.currentSources())); if (video_data.params.quality_dash !== 'auto') { console.log('[Invidious Debug] Setting DASH quality:', video_data.params.quality_dash); player.ready(function () { player.on('loadedmetadata', function () { try { const qualityLevels = Array.from(player.qualityLevels()).sort(function (a, b) {return a.height - b.height;}); let targetQualityLevel; switch (video_data.params.quality_dash) { case 'best': targetQualityLevel = qualityLevels.length - 1; break; case 'worst': targetQualityLevel = 0; break; default: const targetHeight = parseInt(video_data.params.quality_dash); for (let i = 0; i < qualityLevels.length; i++) { if (qualityLevels[i].height <= targetHeight) targetQualityLevel = i; else break; } } qualityLevels.forEach(function (level, index) { level.enabled = (index === targetQualityLevel); }); console.log('[Invidious Debug] DASH quality levels set.'); } catch (e) { console.error('[Invidious Debug] Error setting DASH quality levels:', e); } }); }); } } catch (e) { console.error('[Invidious Debug] httpSourceSelector FAILED:', e); } } console.log('[Invidious Debug] Initializing vttThumbnails...'); try { player.vttThumbnails({ src: '/api/v1/storyboards/' + video_data.id + '?height=90', showTimestamp: true }); console.log('[Invidious Debug] vttThumbnails initialized.'); } catch (e) { console.error('[Invidious Debug] vttThumbnails FAILED:', e); } // Enable annotations if (!video_data.params.listen && video_data.params.annotations) { console.log('[Invidious Debug] Initializing annotations...'); addEventListener('load', function (e) { addEventListener('__ar_annotation_click', function (e) { const url = e.detail.url, target = e.detail.target, seconds = e.detail.seconds; var path = new URL(url); if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) { path.search += '&t=' + seconds; } path = path.pathname + path.search; if (target === 'current') { location.href = path; } else if (target === 'new') { open(path, '_blank'); } }); helpers.xhr('GET', '/api/v1/annotations/' + video_data.id, { responseType: 'text', timeout: 60000 }, { on200: function (response) { var video_container = document.getElementById('player'); videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin); if (player.paused()) { player.one('play', function (event) { player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container }); }); } else { player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container }); } console.log('[Invidious Debug] Annotations initialized.'); } }); }); } player.on('play', function() { console.log('[Invidious Debug] Event: play triggered. Current source:', JSON.stringify(player.currentSource())); }); player.on('playing', function() { console.log('[Invidious Debug] Event: playing triggered. Playback has started.'); }); player.on('waiting', function() { console.log('[Invidious Debug] Event: waiting triggered. Buffering or waiting for data.'); }); var shareOptions = { socials: ['fbFeed', 'tw', 'reddit', 'email'], get url() { return addCurrentTimeToURL(short_url); }, title: player_data.title, description: player_data.description, image: player_data.thumbnail, get embedCode() { // Single quotes inside here required. HTML inserted as is into value attribute of input return ""; } }; if (location.pathname.startsWith('/embed/')) { console.log('[Invidious Debug] Initializing overlay...'); try { var overlay_content = '

' + player_data.title + '

'; player.overlay({ overlays: [ { start: 'loadstart', content: overlay_content, end: 'playing', align: 'top'}, { start: 'pause', content: overlay_content, end: 'playing', align: 'top'} ] }); console.log('[Invidious Debug] Overlay initialized.'); } catch (e) { console.error('[Invidious Debug] Overlay FAILED:', e); } } // Detect mobile users and initialize mobileUi for better UX // Detection code taken from https://stackoverflow.com/a/20293441 function isMobile() { return typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1; } if (isMobile()) { console.log('[Invidious Debug] Mobile detected, initializing mobile UI...'); try { player.mobileUi({ touchControls: { seekSeconds: 5, tapTimeout: 200, disableOnEnd: true } }); console.log('[Invidious Debug] Mobile UI initialized.'); } catch (e) { console.error('[Invidious Debug] Mobile UI FAILED:', e); } } if (player.markers && !video_data.params.listen && video_data.params.chapters) { console.log('[Invidious Debug] Initializing markers...'); var markers = []; for (var i = 0; i < video_data.params.chapters.length; i++) { var marker = video_data.params.chapters[i]; markers.push({ time: marker.start, text: marker.title, }); } if (markers.length > 1 && markers[0].time === 0 && markers[0].text === 'Intro') { markers.shift(); } markers.sort((a,b) => (a.time > b.time) ? 1 : ((b.time > a.time) ? -1 : 0)); var unique_markers = []; var last_time = -1; for (var i = 0; i < markers.length; i++) { var marker = markers[i]; if (marker.time <= last_time) { continue; } unique_markers.push(marker); last_time = marker.time; } markers = unique_markers; // Add "end" time information to each marker for (var i = 0; i < markers.length; i++) { var marker = markers[i]; if (i < markers.length - 1) { marker.end = markers[i+1].time - 0.001; } else { marker.end = player.duration(); } } player.markers.removeAll(); // Callback function when a marker is reached function onMarkerReached(marker) { //console.log("marker reached: " + marker.text + " at " + marker.time); } try { player.markers({ onMarkerReached: onMarkerReached, markers: markers }); console.log('[Invidious Debug] Markers initialized.'); } catch (e) { console.error('[Invidious Debug] Markers FAILED:', e); } player.currentTime(video_data.params.video_start); } player.volume(video_data.params.volume / 100); player.playbackRate(video_data.params.speed); console.log('[Invidious Debug] Volume and playback rate set.'); if (player.share) { console.log('[Invidious Debug] Initializing share plugin...'); try { player.share(shareOptions); console.log('[Invidious Debug] Share plugin initialized.'); } catch(e) { console.error('[Invidious Debug] Share plugin FAILED:', e); } } /** * Method for saving the current video time * * @param {number} seconds */ function save_video_time(seconds) { const all_video_times = get_all_video_times(); all_video_times[video_data.id] = seconds; helpers.storage.set(save_player_pos_key, all_video_times); } /** * Method for getting the saved video time * * @returns {number} */ function get_video_time() { return get_all_video_times()[video_data.id] || 0; } /** * Method for getting all saved video times * * @returns {Object} */ function get_all_video_times() { return helpers.storage.get(save_player_pos_key) || {}; } /** * Method for removing all saved video times */ function remove_all_video_times() { helpers.storage.remove(save_player_pos_key); } /** * Method for setting the video time to a certain percentage * * @param {number} percent */ function set_time_percent(percent) { const duration = player.duration(); const newTime = duration * (percent / 100); player.currentTime(newTime); } /** * Method for playing the video */ function play() { player.play(); } /** * Method for pausing the video */ function pause() { player.pause(); } /** * Method for stopping the video */ function stop() { player.pause(); player.currentTime(0); } /** * Method for toggling play/pause */ function toggle_play() { player.paused() ? play() : pause(); } /** * Method for toggling captions */ const toggle_captions = (function () { let toggledTrack = null; function bindChange(onOrOff) { player.textTracks()[onOrOff]('change', function (e) { toggledTrack = null; }); } // Wrapper function to ignore our own emitted events and only listen // to events emitted by Video.js on click on the captions menu items. function setMode(track, mode) { bindChange('off'); track.mode = mode; setTimeout(function () { bindChange('on'); }, 0); } bindChange('on'); return function () { if (toggledTrack !== null) { if (toggledTrack.mode !== 'showing') { setMode(toggledTrack, 'showing'); } else { setMode(toggledTrack, 'disabled'); } toggledTrack = null; return; } // Used as a fallback if no captions are currently active. // TODO: Make this more intelligent by e.g. relying on browser language. let fallbackCaptionsTrack = null; const tracks = player.textTracks(); for (let i = 0; i < tracks.length; i++) { const track = tracks[i]; if (track.kind !== 'captions') continue; if (fallbackCaptionsTrack === null) { fallbackCaptionsTrack = track; } if (track.mode === 'showing') { setMode(track, 'disabled'); toggledTrack = track; return; } } // Fallback if no captions are currently active. if (fallbackCaptionsTrack !== null) { setMode(fallbackCaptionsTrack, 'showing'); toggledTrack = fallbackCaptionsTrack; } }; })(); /** * Method for toggling fullscreen */ function toggle_fullscreen() { player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen(); } /** * Method for increasing playback rate * * @param {number} steps */ function increase_playback_rate(steps) { const maxIndex = options.playbackRates.length - 1; const curIndex = options.playbackRates.indexOf(player.playbackRate()); let newIndex = curIndex + steps; newIndex = helpers.clamp(newIndex, 0, maxIndex); player.playbackRate(options.playbackRates[newIndex]); } // Add event listener for keydown events addEventListener('keydown', function (e) { if (e.target.tagName.toLowerCase() === 'input') { // Ignore input when focus is on certain elements, e.g. form fields. return; } // See https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L310-L313 const isPlayerFocused = false || e.target === document.querySelector('.video-js') || e.target === document.querySelector('.vjs-tech') || e.target === document.querySelector('.iframeblocker') || e.target === document.querySelector('.vjs-control-bar') ; let action = null; const code = e.keyCode; const decoratedKey = e.key + (e.altKey ? '+alt' : '') + (e.ctrlKey ? '+ctrl' : '') + (e.metaKey ? '+meta' : '') ; switch (decoratedKey) { case ' ': case 'k': case 'MediaPlayPause': action = toggle_play; break; case 'MediaPlay': action = play; break; case 'MediaPause': action = pause; break; case 'MediaStop': action = stop; break; case 'ArrowUp': if (isPlayerFocused) action = change_volume.bind(this, 0.1); break; case 'ArrowDown': if (isPlayerFocused) action = change_volume.bind(this, -0.1); break; case 'm': action = toggle_muted; break; case 'ArrowRight': case 'MediaFastForward': action = skip_seconds.bind(this, 5 * player.playbackRate()); break; case 'ArrowLeft': case 'MediaTrackPrevious': action = skip_seconds.bind(this, -5 * player.playbackRate()); break; case 'l': action = skip_seconds.bind(this, 10 * player.playbackRate()); break; case 'j': action = skip_seconds.bind(this, -10 * player.playbackRate()); break; case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': // Ignore numpad numbers if (code > 57) break; const percent = (code - 48) * 10; action = set_time_percent.bind(this, percent); break; case 'c': action = toggle_captions; break; case 'f': action = toggle_fullscreen; break; case 'N': case 'MediaTrackNext': action = next_video; break; case 'P': case 'MediaTrackPrevious': // TODO: Add support to play back previous video. break; // TODO: More precise step. Now FPS is taken equal to 29.97 // Common FPS: https://forum.videohelp.com/threads/81868#post323588 // Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/ case ',': action = function () { pause(); skip_seconds(-1/29.97); }; break; case '.': action = function () { pause(); skip_seconds( 1/29.97); }; break; case '>': action = increase_playback_rate.bind(this, 1); break; case '<': action = increase_playback_rate.bind(this, -1); break; default: console.info('Unhandled key down event: %s:', decoratedKey, e); break; } if (action) { e.preventDefault(); action(); } }, false); // Add support for controlling the player volume by scrolling over it. Adapted from // https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L292-L328 (function () { const pEl = document.getElementById('player'); var volumeHover = false; var volumeSelector = pEl.querySelector('.vjs-volume-menu-button') || pEl.querySelector('.vjs-volume-panel'); if (volumeSelector !== null) { volumeSelector.onmouseover = function () { volumeHover = true; }; volumeSelector.onmouseout = function () { volumeHover = false; }; } function mouseScroll(event) { // When controls are disabled, hotkeys will be disabled as well if (!player.controls() || !volumeHover) return; event.preventDefault(); var wheelMove = event.wheelDelta || -event.detail; var volumeSign = Math.sign(wheelMove); change_volume(volumeSign * 0.05); // decrease/increase by 5% } player.on('mousewheel', mouseScroll); player.on('DOMMouseScroll', mouseScroll); }()); // show the preferred caption by default if (player_data.preferred_caption_found) { player.ready(function () { if (!video_data.params.listen && video_data.params.quality === 'dash') { // play.textTracks()[0] on DASH mode is showing some debug messages player.textTracks()[1].mode = 'showing'; } else { player.textTracks()[0].mode = 'showing'; } }); } // Safari audio double duration fix if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) { console.log('[Invidious Debug] Applying Safari listen mode duration fix...'); player.on('loadedmetadata', function () { player.on('timeupdate', function () { if (player.remainingTime() < player.duration() / 2 && player.remainingTime() >= 2) { player.currentTime(player.duration() - 1); } }); }); } // Safari screen timeout on looped video playback fix if (navigator.vendor === 'Apple Computer, Inc.' && !video_data.params.listen && video_data.params.video_loop) { console.log('[Invidious Debug] Applying Safari loop mode screen timeout fix...'); player.loop(false); player.ready(function () { player.on('ended', function () { player.currentTime(0); player.play(); }); }); } // Watch on Invidious link if (location.pathname.startsWith('/embed/')) { console.log('[Invidious Debug] Adding Watch on Invidious button...'); try { const Button = videojs.getComponent('Button'); let watch_on_invidious_button = new Button(player); // Create hyperlink for current instance var redirect_element = document.createElement('a'); redirect_element.setAttribute('href', location.pathname.replace('/embed/', '/watch?v=')); redirect_element.appendChild(document.createTextNode('Invidious')); watch_on_invidious_button.el().appendChild(redirect_element); watch_on_invidious_button.addClass('watch-on-invidious'); var cb = player.getChild('ControlBar'); cb.addChild(watch_on_invidious_button); console.log('[Invidious Debug] Watch on Invidious button added.'); } catch (e) { console.error('[Invidious Debug] Watch on Invidious button FAILED:', e); } } addEventListener('DOMContentLoaded', function () { // Save time during redirection on another instance const changeInstanceLink = document.querySelector('#watch-on-another-invidious-instance > a'); if (changeInstanceLink) changeInstanceLink.addEventListener('click', function () { changeInstanceLink.href = addCurrentTimeToURL(changeInstanceLink.href); }); }); console.log('[Invidious Debug] player.js finished loading.');