Preload trickplay images, for even better scrubbing

[picarica]

so i was a bit suprised when i couldnt find any thread on this, trickplay images work fine, but when hovering there is about 300ms delay between image being shown, i tried implementing something, i was confused about using jellyfin API i even tried AI for help, and i couldnt make it work, i can see in network tab the requested url is correct, but it results in404 error,

this is the stuff i tried

wanted to make it into plugin later on ,but even this doesnt work

function preloadJellyfinTrickplayImages() {
  // Configuration for preloading
  const config = {
    startIndex: 1,     // Start from image 1.jpg
    endIndex: 100,     // Try to load up to 100 images (adjust as needed)
    batchSize: 5,      // Number of simultaneous requests
    delay: 100,        // Delay between batches in ms
    resolution: 320    // Trickplay image resolution
  };

  // Track loaded and failed images
  const stats = {
    loaded: 0,
    failed: 0,
    total: 0
  };

  // Get API parameters from current Jellyfin session
  function getJellyfinSessionInfo() {
    console.log('Getting Jellyfin session info...');
    
    // Get API key from the successful request in HAR file
    const apiKey = '610add4c844d4773a95e893cdb1c7282';
    const serverUrl = 'http://192.168.0.10:8096';
    
    return { apiKey, serverUrl };
  }

  // Function to get the current video ID from the URL
  function getCurrentVideoId() {
    // Try to get video ID from URL first
    const urlMatch = window.location.href.match(/\/video-player\.html.*\?id=([^&]+)/);
    if (urlMatch) {
      return urlMatch[1];
    }

    // If not in URL, let user input it
    const videoId = prompt('Enter the video ID (e.g. 5f0799e259c6233d6e4a48eea1636d81):', '5f0799e259c6233d6e4a48eea1636d81');
    return videoId;
  }

  // Function to preload a single image
  function preloadImage(url) {
    return new Promise((resolve) => {
      const img = new Image();
      
      img.onload = () => {
        stats.loaded++;
        console.log(`Loaded image ${stats.loaded}/${stats.total}: ${url}`);
        resolve(true);
      };
      
      img.onerror = () => {
        stats.failed++;
        console.log(`Failed to load image ${stats.loaded + stats.failed}/${stats.total}: ${url}`);
        resolve(false);
      };
      
      img.src = url;
    });
  }

  // Preload images in batches
  async function preloadBatch(urls) {
    const batch = urls.map(url => preloadImage(url));
    return Promise.all(batch);
  }

  // Main preloading process
  async function startPreloading() {
    const sessionInfo = getJellyfinSessionInfo();
    const videoId = getCurrentVideoId();
    
    if (!videoId) {
      console.error('Could not determine video ID');
      return;
    }
    
    console.log('Using video ID:', videoId);
    
    // Build URLs for trickplay images
    const imageUrls = [];
    for (let i = config.startIndex; i <= config.endIndex; i++) {
      const url = `${sessionInfo.serverUrl}/Videos/${videoId}/Trickplay/${config.resolution}/${i}.jpg?api_key=${sessionInfo.apiKey}&MediaSourceId=${videoId}`;
      imageUrls.push(url);
    }
    
    stats.total = imageUrls.length;
    console.log(`Starting to preload ${stats.total} trickplay images...`);
    
    // Preload images in batches
    for (let i = 0; i < imageUrls.length; i += config.batchSize) {
      const batchUrls = imageUrls.slice(i, i + config.batchSize);
      await preloadBatch(batchUrls);
      
      // Add a small delay between batches to avoid overwhelming the server
      if (i + config.batchSize < imageUrls.length) {
        await new Promise(resolve => setTimeout(resolve, config.delay));
      }
    }
    
    console.log(`Preloading complete! Successfully loaded ${stats.loaded} images, failed to load ${stats.failed} images.`);
  }

  // Start the preloading process
  startPreloading();
}

// Execute the function
preloadJellyfinTrickplayImages(); 

[peerless2012]

I think, it's a good idea, I like preload too.

[RuchikaTalele12]

Hi @picarica,

You're very close — your script and logic look good, but the main issue causing the 404 error is that you're using the wrong MediaSourceId.

In your current code, you're doing:

MediaSourceId=${videoId}

However, videoId and MediaSourceId are not the same. Jellyfin requires the actual media source ID of the file, which is different from the video item ID.

To fix this, you should first fetch the correct MediaSourceId from the Jellyfin API like this:

async function getMediaSourceId(videoId, apiKey, serverUrl) {
  const response = await fetch(`${serverUrl}/Videos/${videoId}?api_key=${apiKey}`);
  const data = await response.json();
  return data?.MediaSources?.[0]?.Id;
}

Then update your trickplay image URL to use the correct media source ID:

const mediaSourceId = await getMediaSourceId(videoId, sessionInfo.apiKey, sessionInfo.serverUrl);
const url = `${sessionInfo.serverUrl}/Videos/${videoId}/Trickplay/${config.resolution}/${i}.jpg?api_key=${sessionInfo.apiKey}&MediaSourceId=${mediaSourceId}`;

Also, make sure:

1. Preview thumbnails are enabled in the Jellyfin admin dashboard (Settings → Playback → Generate video preview thumbnails).
2. The video has been analyzed. If not, manually refresh metadata and analyze the media.

Once you apply these changes, your image preloading should start working without 404 errors.

Let me know if you'd like help turning this into a plugin later. You're on the right track.

– \Ruchika

[rzalawad]

I've implemented this in branch: https://github.com/rzalawad/jellyfin-web/tree/feature/preload-trickplay-images
pull request: jellyfin/jellyfin-web#7774