Free Video Player Online

Your video files never leave your device. FreeVideoPlayerOnline opens local files directly in the browser using the File and File System Access APIs — no server upload, no cloud processing, no waiting for transfers. This is a true local video player, not a cloud-based editor.

// Files are opened locally — nothing is sent over the network
const addFilesInput = document.getElementById('add-files-input-fallback');
addFilesInput.addEventListener('change', (e) => handleFiles(e.target.files));
// Object URLs keep data inside the browser
const vidUrl = URL.createObjectURL(item.video.file);
localPlayer.src = vidUrl; // plays from local memory

No advertisements, no sign-up forms, no account creation, no premium tiers. FreeVideoPlayerOnline is a completely free, open browser video player that works instantly. No tracking cookies, no analytics beyond a simple page counter, and no data collection of any kind.

// No ad SDKs, no analytics trackers, no user accounts
// The entire player is a single HTML file — no build step
// No external API calls except the optional Statcounter pixel
const videos = [];  // local playlist array
let currentVideoIndex = -1;
// Everything runs client-side with zero network requests

A real video playlist with auto-generated thumbnails, duration badges, subtitle/audio indicators, and drag-and-drop reordering. The player auto-advances to the next video, supports previous/next navigation, and shows a "PLAYING" badge on the active item. This is a playlist player, not an editing timeline.

// Auto-generate thumbnails from video frames
const generateThumbnail = async (file) => {
  const v = document.createElement('video');
  v.src = URL.createObjectURL(file);
  v.onloadedmetadata = () => v.currentTime = 1;
  v.onseeked = () => {
    const cvs = document.createElement('canvas');
    cvs.width = 320; cvs.height = 180;
    cvs.getContext('2d').drawImage(v, 0, 0, 320, 180);
    return cvs.toDataURL('image/jpeg', 0.7);
  };
};

Load SRT or VTT subtitle files alongside your videos. When you load a folder, the player automatically matches subtitle files to video files by filename. Subtitles render with customizable positioning, backdrop blur, and adjustable offset. SRT files are automatically converted to VTT for native HTML5 track rendering.

// Auto-match subtitles by filename when loading a folder
const matchedSub = subFiles.find(s => isMatch(s.name, baseName));
// SRT is auto-converted to VTT for the <track> element
const vttBlob = new Blob([text.includes('WEBVTT') ? text :
  `WEBVTT\n\n` + text.replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, '$1.$2')
], { type: 'text/vtt' });
const track = document.createElement('track');
track.kind = 'subtitles'; track.src = trackUrl;

Set precise start (A) and end (B) points to loop any segment of a video indefinitely. Ideal for language learners studying dialog, musicians practicing parts of a performance, or anyone analyzing specific scenes. The loop runs seamlessly until you clear it. A full-file loop mode is also available.

// A-B Loop implementation — live segment repeat
if (abLoopState === 'idle') {
  loopStart = localPlayer.currentTime;
  abLoopState = 'startSet';
  abLoopBtn.textContent = 'Set End (B)';
} else if (abLoopState === 'startSet') {
  loopEnd = localPlayer.currentTime;
  abLoopState = 'active';
  localPlayer.currentTime = loopStart; // jump to A
}
// In timeupdate handler: seamless loop back
if (current >= loopEnd || current < loopStart)
  localPlayer.currentTime = loopStart;

Load an external audio track in MP3, M4A, AAC, OGG, Opus, FLAC, or WAV format when your video has missing or incompatible audio — common with MKV files. The player automatically syncs the external audio with video playback, even when seeking. No re-encoding or export needed — it just works live.

// External audio sync — no re-encoding required
if (item.audio) {
  audioEl = document.createElement('audio');
  videoEl.muted = true; // mute video, play external audio
  const audUrl = URL.createObjectURL(item.audio.file);
  localAudioPlayer.src = audUrl;
}
// Auto-sync on every timeupdate:
const diff = Math.abs(localPlayer.currentTime - localAudioPlayer.currentTime);
if (diff > 0.5) localAudioPlayer.currentTime = localPlayer.currentTime;

Pop out the video into a floating, always-on-top window using the browser's native Picture-in-Picture API. Continue watching while browsing other tabs or using other applications. Works on all modern browsers including Chrome, Firefox, Safari, and Edge — including mobile devices that support the API.

// Native Picture-in-Picture via the browser API
pipBtn.addEventListener('click', () => {
  if (localPlayer && document.pictureInPictureEnabled) {
    if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
    } else {
      localPlayer.requestPictureInPicture();
    }
  }
});

A minimal seek + volume bar appears only when you move your mouse over the video and fades away when idle, keeping the viewing area completely clean. Scroll-wheel controls volume (vertical scroll) and seeking (horizontal scroll/shift+scroll). Click to play/pause. No intrusive overlays blocking your content.

// Stealth seek + volume bar — appears only on mouse activity
const triggerStealthFade = () => {
  videoPlayerContainer.classList.add('mouse-active');
  clearTimeout(stealthFadeTimeout);
  stealthFadeTimeout = setTimeout(() => {
    videoPlayerContainer.classList.remove('mouse-active');
  }, 2500);
};
// Scroll wheel: volume (Y-axis) and seek (X-axis / shift+scroll)
const volChange = scrollAccumulatorY > 0 ? -0.05 : 0.05;

True fullscreen mode for an immersive viewing experience, plus a unique fill-screen mode that stretches the video to fill the entire browser window with no letterboxing. An aspect ratio lock option ensures the video maintains its original proportions even in fill mode, preventing distortion. Cursor auto-hides in fullscreen after 3 seconds.

// Fill mode: stretch to window, no letterboxing
fillModeBtn.addEventListener('click', () => {
  isFillMode = !isFillMode;
  document.body.classList.toggle('fill-mode', isFillMode);
});
// CSS handles the object-fit:
// :fullscreen video { object-fit: contain; }
// body.fill-mode video { object-fit: cover; }
// body.fill-mode.native-ratio video { object-fit: contain; }
// Cursor auto-hides after 3s idle in fullscreen

Load an entire folder and the player automatically matches video, subtitle, and audio files based on filename. No manual pairing required — just place your .mp4, .srt, and .mp3 in the same folder with matching names and load the folder once. The player detects all media types and links them together intelligently.

// Auto-match subtitles & audio by filename
const isMatch = (candidate, base) => {
  if (!candidate.startsWith(base)) return false;
  const rest = candidate.substring(base.length);
  return rest.length === 0 || ['.','-','_',' '].includes(rest[0]);
};
const matchedSub = subFiles.find(s => isMatch(s.name, baseName));
const matchedAudio = audioFiles.find(a => isMatch(a.name, baseName));