diff --git a/client/dive-common/apispec.ts b/client/dive-common/apispec.ts
index 55fca437c..b756dc20a 100644
--- a/client/dive-common/apispec.ts
+++ b/client/dive-common/apispec.ts
@@ -189,6 +189,8 @@ interface DatasetMeta extends DatasetMetaMutable {
   id: Readonly<string>;
   imageData: Readonly<FrameImage[]>;
   videoUrl: Readonly<string | undefined>;
+  // Path to original video for native (non-transcoded) playback via frame extraction
+  nativeVideoPath?: Readonly<string>;
   type: Readonly<DatasetType | 'multi'>;
   fps: Readonly<number>; // this will become mutable in the future.
   name: Readonly<string>;
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index ea2580422..bd18ae9bd 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref,
+  defineComponent, defineAsyncComponent, ref, toRef, computed, Ref,
   reactive, watch, inject, provide, nextTick, onBeforeUnmount, PropType,
 } from 'vue';
 import type { Vue } from 'vue/types/vue';
@@ -71,6 +71,12 @@ import MultiCamToolbar from './MultiCamToolbar.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
 import UserSettingsDialog from './UserSettingsDialog.vue';
 
+// NativeVideoAnnotator uses electron APIs - only load in desktop app
+// The webpackIgnore comment prevents bundling in web builds
+const NativeVideoAnnotator = defineAsyncComponent(
+  () => import(/* webpackIgnore: true */ 'vue-media-annotator/components/annotators/NativeVideoAnnotator.vue'),
+);
+
 export interface ImageDataItem {
   url: string;
   filename: string;
@@ -86,6 +92,7 @@ export default defineComponent({
     Sidebar,
     LayerManager,
     VideoAnnotator,
+    NativeVideoAnnotator,
     ImageAnnotator,
     LargeImageAnnotator,
     ConfidenceFilter,
@@ -154,6 +161,7 @@ export default defineComponent({
     const subType = ref(null as string | null);
     const saveInProgress = ref(false);
     const videoUrl: Ref<Record<string, string>> = ref({});
+    const nativeVideoPath: Ref<Record<string, string>> = ref({});
     const {
       loadDetections, loadMetadata, saveMetadata, getTiles, getTileURL,
     } = useApi();
@@ -838,6 +846,9 @@ export default defineComponent({
           if (subCameraMeta.videoUrl) {
             videoUrl.value[camera] = subCameraMeta.videoUrl;
           }
+          if (subCameraMeta.nativeVideoPath) {
+            nativeVideoPath.value[camera] = subCameraMeta.nativeVideoPath;
+          }
           cameraStore.addCamera(camera);
           addSaveCamera(camera);
           // eslint-disable-next-line no-await-in-loop
@@ -1269,6 +1280,7 @@ export default defineComponent({
       selectedKey,
       trackFilters,
       videoUrl,
+      nativeVideoPath,
       visibleModes,
       frameRate: time.frameRate,
       originalFps: time.originalFps,
@@ -1613,15 +1625,16 @@ export default defineComponent({
               <component
                 :is="datasetType === 'image-sequence' ? 'image-annotator'
                   : datasetType === 'video'
-                    ? 'video-annotator'
+                    ? (nativeVideoPath[camera] ? 'native-video-annotator' : 'video-annotator')
                     : 'large-image-annotator'"
-                v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+                v-if="(imageData[camera].length || videoUrl[camera] || nativeVideoPath[camera]) && progress.loaded"
                 ref="subPlaybackComponent"
                 class="fill-height"
                 :class="{ 'selected-camera': selectedCamera === camera && camera !== 'singleCam' }"
                 v-bind="{
                   imageData: imageData[camera],
                   videoUrl: videoUrl[camera],
+                  nativeVideoPath: nativeVideoPath[camera],
                   updateTime,
                   frameRate,
                   originalFps,
diff --git a/client/platform/desktop/backend/native/common.spec.ts b/client/platform/desktop/backend/native/common.spec.ts
index 4598d323c..fcaca395f 100644
--- a/client/platform/desktop/backend/native/common.spec.ts
+++ b/client/platform/desktop/backend/native/common.spec.ts
@@ -101,6 +101,7 @@ const settings: Settings = {
   dataPath: '/home/user/viamedata',
   viamePath: '/opt/viame',
   readonlyMode: false,
+  nativeVideoPlayback: false,
   overrides: {},
 };
 const urlMapper = (a: string) => `http://localhost:8888/api/media?path=${a}`;
diff --git a/client/platform/desktop/backend/native/common.ts b/client/platform/desktop/backend/native/common.ts
index 6939811e0..a0ec29aa4 100644
--- a/client/platform/desktop/backend/native/common.ts
+++ b/client/platform/desktop/backend/native/common.ts
@@ -368,6 +368,7 @@ async function loadMetadata(
   const projectMetaData = await loadJsonMetadata(projectDirData.metaFileAbsPath);
 
   let videoUrl = '';
+  let nativeVideoPath: string | undefined;
   let imageData = [] as FrameImage[];
   let multiCamMedia: MultiCamMedia | null = null;
   const { subType } = projectMetaData;
@@ -383,8 +384,20 @@ async function loadMetadata(
     imageData = defaultDisplay.imageData;
     videoUrl = defaultDisplay.videoUrl;
   } else if (projectMetaData.type === 'video') {
-    /* Use transcoded output only after it exists on disk. */
-    if (projectMetaData.transcodedVideoFile) {
+    /* If using native playback (no transcoding), provide the native video path */
+    if (projectMetaData.useNativePlayback) {
+      // Get the original video path for native playback
+      const originalVideoPath = npath.join(
+        projectMetaData.originalBasePath,
+        projectMetaData.originalVideoFile,
+      );
+      // For native playback, we pass the file path directly (not a URL)
+      // The frontend will use the frame extraction API
+      nativeVideoPath = originalVideoPath;
+      // Still provide videoUrl as empty - frontend will use nativeVideoPath instead
+      videoUrl = '';
+    } else if (projectMetaData.transcodedVideoFile) {
+      /* Use transcoded output only after it exists on disk. */
       const transcodedVideo = npath.join(projectDirData.basePath, projectMetaData.transcodedVideoFile);
       if (await fs.pathExists(transcodedVideo)) {
         videoUrl = makeMediaUrl(transcodedVideo);
@@ -428,6 +441,7 @@ async function loadMetadata(
   return {
     ...projectMetaData,
     videoUrl,
+    nativeVideoPath,
     imageData,
     multiCamMedia,
     subType,
@@ -1314,6 +1328,7 @@ async function beginMediaImport(path: string): Promise<DesktopMediaImportRespons
     mediaConvertList,
     trackFileAbsPath,
     forceMediaTranscode: false,
+    useNativePlayback: false,
     multiCamTrackFiles: null,
     metaFileAbsPath,
   };
@@ -1461,7 +1476,13 @@ async function finalizeMediaImport(
     jsonMeta.fps = (
       Math.max(1, Math.min(jsonMeta.fps, jsonMeta.originalFps))
     );
-    if (args.forceMediaTranscode) {
+
+    // If using native playback, skip conversion entirely
+    if (args.useNativePlayback) {
+      jsonMeta.useNativePlayback = true;
+      // Clear any conversion list for videos when using native playback
+      mediaConvertList = [];
+    } else if (args.forceMediaTranscode) {
       mediaConvertList.push(npath.join(jsonMeta.originalBasePath, jsonMeta.originalVideoFile));
     }
   }
diff --git a/client/platform/desktop/backend/native/frameExtraction.ts b/client/platform/desktop/backend/native/frameExtraction.ts
new file mode 100644
index 000000000..f31e5b5b4
--- /dev/null
+++ b/client/platform/desktop/backend/native/frameExtraction.ts
@@ -0,0 +1,257 @@
+/**
+ * Frame extraction service for native video playback.
+ * Extracts frames on-demand using FFmpeg without requiring
+ * full video transcoding.
+ */
+import { spawn } from 'child_process';
+import { getBinaryPath, spawnResult } from './utils';
+
+const ffmpegPath = getBinaryPath('ffmpeg-ffprobe-static/ffmpeg');
+const ffprobePath = getBinaryPath('ffmpeg-ffprobe-static/ffprobe');
+
+// LRU cache for extracted frames
+interface CachedFrame {
+  data: Buffer;
+  timestamp: number;
+}
+
+interface FrameCache {
+  frames: Map<number, CachedFrame>;
+  maxSize: number;
+}
+
+const frameCaches: Map<string, FrameCache> = new Map();
+const MAX_CACHE_SIZE = 100; // Max frames per video
+const CACHE_EXPIRY_MS = 5 * 60 * 1000; // 5 minutes
+
+interface VideoInfo {
+  fps: number;
+  duration: number;
+  width: number;
+  height: number;
+  frameCount: number;
+}
+
+/**
+ * Get video information using ffprobe
+ */
+async function getVideoInfo(videoPath: string): Promise<VideoInfo> {
+  const args = [
+    '-v', 'quiet',
+    '-print_format', 'json',
+    '-show_format',
+    '-show_streams',
+    videoPath,
+  ];
+
+  const result = await spawnResult(ffprobePath, args);
+  if (result.error || result.output === null) {
+    throw new Error(`Failed to probe video: ${result.error || 'Unknown error'}`);
+  }
+
+  const info = JSON.parse(result.output);
+  const videoStream = info.streams?.find((s: { codec_type: string }) => s.codec_type === 'video');
+
+  if (!videoStream) {
+    throw new Error('No video stream found');
+  }
+
+  // Parse frame rate (e.g., "30000/1001" or "30/1")
+  const fpsStr = videoStream.avg_frame_rate || videoStream.r_frame_rate || '30/1';
+  const [num, den] = fpsStr.split('/').map(Number);
+  const fps = den ? num / den : num;
+
+  const duration = parseFloat(info.format?.duration || videoStream.duration || '0');
+  const frameCount = Math.floor(duration * fps);
+
+  return {
+    fps,
+    duration,
+    width: videoStream.width || 0,
+    height: videoStream.height || 0,
+    frameCount,
+  };
+}
+
+/**
+ * Get or create a frame cache for a video
+ */
+function getFrameCache(videoPath: string): FrameCache {
+  let cache = frameCaches.get(videoPath);
+  if (!cache) {
+    cache = {
+      frames: new Map(),
+      maxSize: MAX_CACHE_SIZE,
+    };
+    frameCaches.set(videoPath, cache);
+  }
+  return cache;
+}
+
+/**
+ * Evict old entries from the cache
+ */
+function evictOldEntries(cache: FrameCache) {
+  const now = Date.now();
+  const entries = Array.from(cache.frames.entries());
+
+  // Remove expired entries
+  entries.forEach(([frame, cached]) => {
+    if (now - cached.timestamp > CACHE_EXPIRY_MS) {
+      cache.frames.delete(frame);
+    }
+  });
+
+  // If still over capacity, remove oldest entries
+  if (cache.frames.size > cache.maxSize) {
+    const sortedEntries = entries
+      .filter(([frame]) => cache.frames.has(frame))
+      .sort((a, b) => a[1].timestamp - b[1].timestamp);
+
+    const toRemove = sortedEntries.slice(0, cache.frames.size - cache.maxSize);
+    toRemove.forEach(([frame]) => cache.frames.delete(frame));
+  }
+}
+
+/**
+ * Extract a single frame from a video at the specified frame number
+ * Returns the frame as a JPEG buffer
+ */
+async function extractFrame(
+  videoPath: string,
+  frameNumber: number,
+  fps: number,
+): Promise<Buffer> {
+  const cache = getFrameCache(videoPath);
+
+  // Check cache first
+  const cached = cache.frames.get(frameNumber);
+  if (cached) {
+    cached.timestamp = Date.now(); // Update access time
+    return cached.data;
+  }
+
+  // Calculate timestamp from frame number
+  const timestamp = frameNumber / fps;
+
+  // Use -ss AFTER -i for frame-accurate seeking.
+  // This is slower (decodes from start) but guarantees correct frames.
+  // The -noaccurate_seek flag is NOT used, ensuring precise positioning.
+  const args = [
+    '-i', videoPath,
+    '-ss', timestamp.toFixed(6),
+    '-vframes', '1',
+    '-f', 'image2pipe',
+    '-vcodec', 'mjpeg',
+    '-q:v', '2',
+    '-',
+  ];
+
+  return new Promise((resolve, reject) => {
+    const ffmpeg = spawn(ffmpegPath, args);
+    const chunks: Buffer[] = [];
+
+    ffmpeg.stdout.on('data', (chunk: Buffer) => {
+      chunks.push(chunk);
+    });
+
+    ffmpeg.stderr.on('data', () => {
+      // Ignore stderr output (progress info)
+    });
+
+    ffmpeg.on('close', (code) => {
+      if (code === 0 && chunks.length > 0) {
+        const frameData = Buffer.concat(chunks);
+
+        // Cache the frame
+        cache.frames.set(frameNumber, {
+          data: frameData,
+          timestamp: Date.now(),
+        });
+        evictOldEntries(cache);
+
+        resolve(frameData);
+      } else {
+        reject(new Error(`FFmpeg exited with code ${code}`));
+      }
+    });
+
+    ffmpeg.on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+/**
+ * Process frames in batches with limited concurrency
+ */
+async function processBatches(
+  batches: number[][],
+  videoPath: string,
+  fps: number,
+): Promise<void> {
+  if (batches.length === 0) return;
+  const [batch, ...remaining] = batches;
+  await Promise.all(batch.map((frame) => extractFrame(videoPath, frame, fps).catch(() => null)));
+  await processBatches(remaining, videoPath, fps);
+}
+
+/**
+ * Pre-extract multiple frames around a given frame (for smoother playback)
+ */
+async function prefetchFrames(
+  videoPath: string,
+  centerFrame: number,
+  fps: number,
+  range: number = 5,
+): Promise<void> {
+  const cache = getFrameCache(videoPath);
+  const framesToFetch: number[] = [];
+
+  // Determine which frames to prefetch (not already cached)
+  for (let i = -range; i <= range; i += 1) {
+    const frame = centerFrame + i;
+    if (frame >= 0 && !cache.frames.has(frame)) {
+      framesToFetch.push(frame);
+    }
+  }
+
+  // Fetch in parallel (limited concurrency)
+  const concurrency = 3;
+  const batches: number[][] = [];
+  for (let i = 0; i < framesToFetch.length; i += concurrency) {
+    batches.push(framesToFetch.slice(i, i + concurrency));
+  }
+  await processBatches(batches, videoPath, fps);
+}
+
+/**
+ * Clear the frame cache for a specific video
+ */
+function clearCache(videoPath?: string) {
+  if (videoPath) {
+    frameCaches.delete(videoPath);
+  } else {
+    frameCaches.clear();
+  }
+}
+
+/**
+ * Get cache statistics
+ */
+function getCacheStats(videoPath: string): { cachedFrames: number; maxSize: number } {
+  const cache = frameCaches.get(videoPath);
+  return {
+    cachedFrames: cache?.frames.size || 0,
+    maxSize: MAX_CACHE_SIZE,
+  };
+}
+
+export {
+  extractFrame,
+  prefetchFrames,
+  getVideoInfo,
+  clearCache,
+  getCacheStats,
+  VideoInfo,
+};
diff --git a/client/platform/desktop/backend/native/linux.ts b/client/platform/desktop/backend/native/linux.ts
index 77041b879..692e140b0 100644
--- a/client/platform/desktop/backend/native/linux.ts
+++ b/client/platform/desktop/backend/native/linux.ts
@@ -25,6 +25,8 @@ const DefaultSettings: Settings = {
   viamePath: '/opt/noaa/viame',
   // read only mode flag
   readonlyMode: false,
+  // Use native video playback (no transcoding) - off by default
+  nativeVideoPlayback: false,
   // Path to a user data folder
   dataPath: npath.join(os.homedir(), 'VIAME_DATA'),
   // environment overrides
diff --git a/client/platform/desktop/backend/native/windows.ts b/client/platform/desktop/backend/native/windows.ts
index 45dc630e0..0fdddf05c 100644
--- a/client/platform/desktop/backend/native/windows.ts
+++ b/client/platform/desktop/backend/native/windows.ts
@@ -25,6 +25,8 @@ const DefaultSettings: Settings = {
   dataPath: npath.join(os.homedir(), 'VIAME_DATA'),
   // read only mode flag
   readonlyMode: false,
+  // Use native video playback (no transcoding) - off by default
+  nativeVideoPlayback: false,
   // environment overrides
   overrides: {
     // override VIAME install path from env
diff --git a/client/platform/desktop/backend/server.ts b/client/platform/desktop/backend/server.ts
index 11dd5fdd0..d7a9e8330 100644
--- a/client/platform/desktop/backend/server.ts
+++ b/client/platform/desktop/backend/server.ts
@@ -13,6 +13,7 @@ import { SaveAttributeArgs, SaveAttributeTrackFilterArgs, SaveDetectionsArgs } f
 import settings from './state/settings';
 import * as common from './native/common';
 import * as geotiffTiles from './tiles/geotiffTiles';
+import * as frameExtraction from './native/frameExtraction';
 
 const app = express();
 app.use(express.json({ limit: '250MB' }));
@@ -181,6 +182,86 @@ apirouter.get('/dataset/:id/:camera?/tiles', async (req, res, next) => {
   return null;
 });
 
+/* GET video info for native playback */
+apirouter.get('/video-info', async (req, res, next) => {
+  const { path } = req.query;
+  if (!path || Array.isArray(path)) {
+    return next({
+      status: 400,
+      statusMessage: `Invalid path: ${path}`,
+    });
+  }
+  try {
+    const info = await frameExtraction.getVideoInfo(path.toString());
+    return res.json(info);
+  } catch (err) {
+    return next({
+      status: 500,
+      statusMessage: `Failed to get video info: ${err}`,
+    });
+  }
+});
+
+/* EXTRACT frame for native video playback */
+apirouter.get('/frame', async (req, res, next) => {
+  const { path, frame, fps } = req.query;
+  if (!path || Array.isArray(path)) {
+    return next({
+      status: 400,
+      statusMessage: `Invalid path: ${path}`,
+    });
+  }
+  const frameNum = parseInt(frame as string, 10);
+  const fpsNum = parseFloat(fps as string);
+  if (Number.isNaN(frameNum) || frameNum < 0) {
+    return next({
+      status: 400,
+      statusMessage: `Invalid frame number: ${frame}`,
+    });
+  }
+  if (Number.isNaN(fpsNum) || fpsNum <= 0) {
+    return next({
+      status: 400,
+      statusMessage: `Invalid fps: ${fps}`,
+    });
+  }
+  try {
+    const frameData = await frameExtraction.extractFrame(path.toString(), frameNum, fpsNum);
+    res.setHeader('Content-Type', 'image/jpeg');
+    res.setHeader('Content-Length', frameData.length);
+    res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache for 1 hour
+    return res.send(frameData);
+  } catch (err) {
+    return next({
+      status: 500,
+      statusMessage: `Failed to extract frame: ${err}`,
+    });
+  }
+});
+
+/* PREFETCH frames for native video playback */
+apirouter.post('/prefetch-frames', async (req, res, next) => {
+  const {
+    path, centerFrame, fps, range,
+  } = req.body;
+  if (!path || typeof path !== 'string') {
+    return next({
+      status: 400,
+      statusMessage: 'Invalid path',
+    });
+  }
+  try {
+    await frameExtraction.prefetchFrames(path, centerFrame, fps, range);
+    return res.json({ success: true });
+  } catch (err) {
+    return next({
+      status: 500,
+      statusMessage: `Failed to prefetch frames: ${err}`,
+    });
+  }
+  return null;
+});
+
 /* STREAM media */
 apirouter.get('/media', (req, res, next) => {
   let { path } = req.query;
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index 5b24868ff..31a90f63f 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -26,6 +26,10 @@ export interface Settings {
   dataPath: string;
   // readonly flag
   readonlyMode: boolean;
+  // Use native video playback (frame extraction) instead of transcoding
+  // This saves disk space and allows faster initial access at the cost of
+  // potentially slower playback performance
+  nativeVideoPlayback: boolean;
   // overrides of user-provided settings
   overrides: {
     // externally force the VIAME path
@@ -121,6 +125,11 @@ export interface JsonMeta extends DatasetMetaMutable {
   // key that ran transcoding
   transcodingJobKey?: string;
 
+  // If true, use native video playback (frame extraction) instead of transcoded video
+  // This saves disk space and allows faster initial access at the cost of
+  // potentially slower playback performance
+  useNativePlayback?: boolean;
+
   error?: string;
 
   // attributes are not datasetMetaMutable and are stored separate
@@ -254,6 +263,9 @@ export interface DesktopMediaImportResponse extends MediaImportResponse {
   trackFileAbsPath: string;
   multiCamTrackFiles: null | Record<string, string>;
   forceMediaTranscode: boolean;
+  // Use native playback (frame extraction) instead of transcoding
+  // This saves disk space and allows faster initial access
+  useNativePlayback: boolean;
   metaFileAbsPath?: string;
 }
 
diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index ae0fad5a2..3103477b2 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -23,6 +23,7 @@ import {
   JsonMetaCache, recents, removeRecents, setRecents,
 } from '../store/dataset';
 import {
+  settings,
   upgradedVersion, downgradedVersion, acknowledgeVersion, knownVersion,
 } from '../store/settings';
 import { setOrGetConversionJob, cpuJobQueue, queuedCpuJobs } from '../store/jobs';
@@ -86,7 +87,16 @@ export default defineComponent({
     async function finalizeBulkImport(argsArray: DesktopMediaImportResponse[]) {
       importing.value = true;
 
-      const imports = await request(async () => Promise.all(argsArray.map((args) => api.finalizeImport(args))));
+      // Apply native video playback setting to video imports
+      const argsWithSettings = argsArray.map((args) => ({
+        ...args,
+        useNativePlayback: args.jsonMeta.type === 'video'
+          && (settings.value?.nativeVideoPlayback ?? false),
+      }));
+
+      const imports = await request(async () => Promise.all(
+        argsWithSettings.map((args) => api.finalizeImport(args)),
+      ));
       pendingImportPayload.value = null;
 
       imports.forEach(async (conversionArgs) => {
@@ -105,7 +115,13 @@ export default defineComponent({
     async function finalizeImport(args: DesktopMediaImportResponse) {
       importing.value = true;
       await request(async () => {
-        const conversionArgs = await api.finalizeImport(args);
+        // Apply native video playback setting to video imports
+        const argsWithSettings: DesktopMediaImportResponse = {
+          ...args,
+          useNativePlayback: args.jsonMeta.type === 'video'
+            && (settings.value?.nativeVideoPlayback ?? false),
+        };
+        const conversionArgs = await api.finalizeImport(argsWithSettings);
         pendingImportPayload.value = null; // close dialog
         if (conversionArgs.mediaList.length === 0) {
           router.push({
diff --git a/client/platform/desktop/frontend/components/Settings.vue b/client/platform/desktop/frontend/components/Settings.vue
index bc68f91a7..19ba21c37 100644
--- a/client/platform/desktop/frontend/components/Settings.vue
+++ b/client/platform/desktop/frontend/components/Settings.vue
@@ -163,6 +163,24 @@ export default defineComponent({
               />
             </v-col>
           </v-row>
+
+          <v-row>
+            <v-col>
+              <v-switch
+                v-model="localSettings.nativeVideoPlayback"
+                color="primary"
+                label="Native video playback (experimental)"
+                hide-details
+                class="my-0"
+              />
+              <div class="text-caption grey--text mt-1">
+                When enabled, videos will be played using on-demand frame extraction instead of
+                being transcoded to MP4. This saves disk space and allows faster initial access,
+                but playback may be slower for smooth video review.
+                Best for frame-by-frame annotation work.
+              </div>
+            </v-col>
+          </v-row>
         </v-card-text>
 
         <v-card-text>
diff --git a/client/src/components/annotators/NativeVideoAnnotator.vue b/client/src/components/annotators/NativeVideoAnnotator.vue
new file mode 100644
index 000000000..1993b28e2
--- /dev/null
+++ b/client/src/components/annotators/NativeVideoAnnotator.vue
@@ -0,0 +1,478 @@
+<script lang="ts">
+import {
+  defineComponent, onBeforeUnmount, PropType, ref, watch,
+} from 'vue';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ipcRenderer } from 'electron';
+import { ImageEnhancementOutputs } from 'vue-media-annotator/use/useImageEnhancements';
+import { Flick, SetTimeFunc } from '../../use/useTimeObserver';
+import { injectCameraInitializer } from './useMediaController';
+
+/**
+ * NativeVideoAnnotator renders video frames extracted on-demand via FFmpeg.
+ * This allows playback of arbitrary video formats without transcoding,
+ * saving disk space at the cost of potentially slower playback performance.
+ *
+ * The component uses a canvas element to display frames, which are fetched
+ * from the backend frame extraction API.
+ */
+export default defineComponent({
+  name: 'NativeVideoAnnotator',
+  props: {
+    // Path to the original video file (not a URL)
+    nativeVideoPath: {
+      type: String,
+      required: true,
+    },
+    frameRate: {
+      type: Number,
+      required: true,
+    },
+    updateTime: {
+      type: Function as PropType<SetTimeFunc>,
+      required: true,
+    },
+    originalFps: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
+    camera: {
+      type: String as PropType<string>,
+      default: 'singleCam',
+    },
+    imageEnhancementOutputs: {
+      type: Object as PropType<ImageEnhancementOutputs>,
+      default: () => ({
+        brightness: { slope: 1, intercept: 0 },
+        contrast: { slope: 1, intercept: 0.5 },
+        saturation: { values: 1 },
+        sharpen: { kernelMatrix: '0 -1 0 -1 5 -1 0 -1 0', divisor: 1 },
+      }),
+    },
+    isDefaultImage: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props) {
+    const cameraInitializer = injectCameraInitializer();
+    const {
+      state: data,
+      geoViewer,
+      cursorHandler,
+      imageCursor,
+      container,
+      initializeViewer,
+      mediaController,
+    } = cameraInitializer(props.camera, {
+      seek,
+      pause,
+      play,
+      setVolume,
+      setSpeed,
+    });
+
+    // Canvas for dimension tracking
+    const frameCanvas = document.createElement('canvas');
+
+    // Video info loaded from backend
+    const videoInfo = ref<{
+      fps: number;
+      duration: number;
+      width: number;
+      height: number;
+      frameCount: number;
+    } | null>(null);
+
+    // Playback state
+    const isPlaying = ref(false);
+    let playbackInterval: number | null = null;
+
+    // Frame loading
+    const frameCache = new Map<number, HTMLImageElement>();
+    const MAX_CACHE_SIZE = 50;
+
+    // API base URL (fetched from IPC)
+    let baseApiUrl = '';
+
+    /**
+     * Get the API base URL from the backend server
+     */
+    async function getApiBaseUrl(): Promise<string> {
+      if (baseApiUrl) return baseApiUrl;
+      const addr = await ipcRenderer.invoke('server-info');
+      baseApiUrl = `http://${addr.address}:${addr.port}/api`;
+      return baseApiUrl;
+    }
+
+    /**
+     * Load video info from the backend
+     */
+    async function loadVideoInfo() {
+      try {
+        const apiUrl = await getApiBaseUrl();
+        const response = await fetch(
+          `${apiUrl}/video-info?path=${encodeURIComponent(props.nativeVideoPath)}`,
+        );
+        if (!response.ok) {
+          throw new Error(`Failed to load video info: ${response.statusText}`);
+        }
+        videoInfo.value = await response.json();
+      } catch (err) {
+        console.error('Failed to load video info:', err);
+        throw err;
+      }
+    }
+
+    /**
+     * Get the URL for a specific frame
+     */
+    function getFrameUrl(frameNumber: number): string {
+      const fps = videoInfo.value?.fps || props.originalFps || props.frameRate;
+      return `${baseApiUrl}/frame?path=${encodeURIComponent(props.nativeVideoPath)}&frame=${frameNumber}&fps=${fps}`;
+    }
+
+    /**
+     * Load a frame image and optionally cache it
+     */
+    function loadFrame(frameNumber: number): Promise<HTMLImageElement> {
+      // Check cache first
+      const cached = frameCache.get(frameNumber);
+      if (cached) {
+        return Promise.resolve(cached);
+      }
+
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+          // Add to cache
+          if (frameCache.size >= MAX_CACHE_SIZE) {
+            // Remove oldest entry
+            const firstKey = frameCache.keys().next().value;
+            if (firstKey !== undefined) {
+              frameCache.delete(firstKey);
+            }
+          }
+          frameCache.set(frameNumber, img);
+          resolve(img);
+        };
+        img.onerror = () => {
+          reject(new Error(`Failed to load frame ${frameNumber}`));
+        };
+        img.src = getFrameUrl(frameNumber);
+      });
+    }
+
+    /**
+     * Render a frame to the quad feature
+     */
+    async function renderFrame(frameNumber: number) {
+      try {
+        const img = await loadFrame(frameNumber);
+
+        // Update canvas dimensions if needed
+        if (frameCanvas.width !== img.width || frameCanvas.height !== img.height) {
+          frameCanvas.width = img.width;
+          frameCanvas.height = img.height;
+        }
+
+        // Update the geojs quad feature with the new image
+        if (quadFeature) {
+          quadFeature
+            .data([
+              {
+                ul: { x: 0, y: 0 },
+                lr: { x: img.width, y: img.height },
+                image: img,
+              },
+            ])
+            .draw();
+        }
+      } catch (err) {
+        console.error(`Failed to render frame ${frameNumber}:`, err);
+      }
+    }
+
+    /**
+     * Prefetch frames around the current frame for smoother navigation
+     */
+    function prefetchFrames(centerFrame: number, range: number = 3) {
+      for (let i = -range; i <= range; i += 1) {
+        const frame = centerFrame + i;
+        if (frame >= 0 && frame <= data.maxFrame && !frameCache.has(frame)) {
+          // Load in background, don't await
+          loadFrame(frame).catch(() => {});
+        }
+      }
+    }
+
+    /**
+     * Seek to a specific frame
+     */
+    async function seek(frame: number) {
+      const requestedFrame = Math.round(frame);
+      if (requestedFrame < 0 || requestedFrame > data.maxFrame) {
+        return;
+      }
+
+      data.frame = requestedFrame;
+      data.currentTime = requestedFrame / props.frameRate;
+      data.flick = Math.round(data.currentTime * Flick);
+      data.syncedFrame = requestedFrame;
+
+      await renderFrame(requestedFrame);
+      prefetchFrames(requestedFrame);
+
+      props.updateTime(data);
+    }
+
+    /**
+     * Pause playback
+     */
+    function pause() {
+      isPlaying.value = false;
+      if (playbackInterval !== null) {
+        clearInterval(playbackInterval);
+        playbackInterval = null;
+      }
+      data.playing = false;
+      props.updateTime(data);
+    }
+
+    /**
+     * Start playback
+     * Note: Playback will be slower than real-time due to frame extraction overhead.
+     * This is intended for frame-by-frame annotation work, not smooth video playback.
+     */
+    async function play() {
+      if (isPlaying.value) return;
+
+      isPlaying.value = true;
+      data.playing = true;
+      props.updateTime(data);
+
+      // Calculate frame interval based on desired framerate
+      // We use a slower rate to account for frame extraction time
+      const targetInterval = Math.max(100, 1000 / props.frameRate);
+
+      playbackInterval = window.setInterval(async () => {
+        if (!isPlaying.value) return;
+
+        const nextFrame = data.frame + 1;
+        if (nextFrame > data.maxFrame) {
+          pause();
+          return;
+        }
+
+        data.frame = nextFrame;
+        data.currentTime = nextFrame / props.frameRate;
+        data.flick = Math.round(data.currentTime * Flick);
+        data.syncedFrame = nextFrame;
+
+        await renderFrame(nextFrame);
+        prefetchFrames(nextFrame, 5);
+
+        props.updateTime(data);
+      }, targetInterval);
+    }
+
+    function setVolume(level: number) {
+      // No audio support for native video playback
+      data.volume = level;
+    }
+
+    function setSpeed(level: number) {
+      // Speed control not implemented for native playback
+      data.speed = level;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let quadFeatureLayer = undefined as any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let quadFeature = undefined as any;
+
+    watch(
+      () => props.isDefaultImage,
+      (newVal) => {
+        if (quadFeatureLayer !== undefined) {
+          if (newVal) {
+            quadFeatureLayer.node().css('filter', '');
+          } else {
+            quadFeatureLayer.node().css('filter', 'url(#imageEhancements)');
+          }
+        }
+      },
+      { deep: true },
+    );
+
+    /**
+     * Initialize the viewer once video info is loaded
+     */
+    async function initialize() {
+      await getApiBaseUrl();
+      await loadVideoInfo();
+
+      if (!videoInfo.value) {
+        throw new Error('Failed to load video info');
+      }
+
+      const { width, height, frameCount } = videoInfo.value;
+
+      // Set canvas size
+      frameCanvas.width = width;
+      frameCanvas.height = height;
+
+      // Calculate max frame
+      const fps = videoInfo.value.fps || props.originalFps || props.frameRate;
+      data.maxFrame = Math.max(0, frameCount - 1);
+      data.duration = frameCount / fps;
+
+      // Initialize geojs viewer
+      initializeViewer(width, height);
+
+      // Create quad feature layer for rendering frames
+      quadFeatureLayer = geoViewer.value.createLayer('feature', {
+        features: ['quad'],
+        autoshareRenderer: false,
+        renderer: 'canvas',
+      });
+
+      quadFeature = quadFeatureLayer.createFeature('quad');
+      quadFeature
+        .data([
+          {
+            ul: { x: 0, y: 0 },
+            lr: { x: width, y: height },
+            image: frameCanvas,
+          },
+        ])
+        .draw();
+
+      // Load and render first frame
+      await seek(0);
+
+      if (!props.isDefaultImage) {
+        quadFeatureLayer.node().css('filter', 'url(#imageEhancements)');
+      }
+
+      data.ready = true;
+      data.volume = 0;
+      data.speed = 1;
+    }
+
+    // Initialize on mount
+    initialize().catch((err) => {
+      console.error('Failed to initialize NativeVideoAnnotator:', err);
+    });
+
+    onBeforeUnmount(() => {
+      pause();
+      frameCache.clear();
+    });
+
+    return {
+      data,
+      imageCursorRef: imageCursor,
+      containerRef: container,
+      cursorHandler,
+      mediaController,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="video-annotator native-video-annotator" :style="{ cursor: data.cursor }">
+    <svg width="0" height="0" style="position: absolute; top: -1px; left: -1px">
+      <defs>
+        <filter id="imageEhancements">
+          <feComponentTransfer id="feBrightness">
+            <feFuncR
+              type="linear"
+              :slope="imageEnhancementOutputs.brightness.slope"
+              :intercept="imageEnhancementOutputs.brightness.intercept"
+            />
+            <feFuncG
+              type="linear"
+              :slope="imageEnhancementOutputs.brightness.slope"
+              :intercept="imageEnhancementOutputs.brightness.intercept"
+            />
+            <feFuncB
+              type="linear"
+              :slope="imageEnhancementOutputs.brightness.slope"
+              :intercept="imageEnhancementOutputs.brightness.intercept"
+            />
+          </feComponentTransfer>
+          <!-- Contrast -->
+          <feComponentTransfer id="feContrast">
+            <feFuncR
+              type="linear"
+              :slope="imageEnhancementOutputs.contrast.slope"
+              :intercept="imageEnhancementOutputs.contrast.intercept"
+            />
+            <feFuncG
+              type="linear"
+              :slope="imageEnhancementOutputs.contrast.slope"
+              :intercept="imageEnhancementOutputs.contrast.intercept"
+            />
+            <feFuncB
+              type="linear"
+              :slope="imageEnhancementOutputs.contrast.slope"
+              :intercept="imageEnhancementOutputs.contrast.intercept"
+            />
+          </feComponentTransfer>
+          <!-- Saturation -->
+          <feColorMatrix
+            id="feSaturate"
+            type="saturate"
+            :values="imageEnhancementOutputs.saturation.values.toString()"
+          />
+          <!-- Sharpening -->
+          <feConvolveMatrix
+            id="feSharpen"
+            order="3"
+            :divisor="imageEnhancementOutputs.sharpen.divisor"
+            :kernelMatrix="imageEnhancementOutputs.sharpen.kernelMatrix"
+            edgeMode="duplicate"
+          />
+          <feComposite in2="SourceGraphic" operator="in" />
+        </filter>
+      </defs>
+    </svg>
+    <div ref="imageCursorRef" class="imageCursor">
+      <v-icon> {{ data.imageCursor }} </v-icon>
+    </div>
+    <div
+      ref="containerRef"
+      class="playback-container"
+      @mousemove="cursorHandler.handleMouseMove"
+      @mouseleave="cursorHandler.handleMouseLeave"
+      @mouseover="cursorHandler.handleMouseEnter"
+    />
+    <slot name="control" />
+    <slot v-if="data.ready" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./annotator.scss";
+
+.native-video-annotator {
+  // Indicator that this is using native playback
+  &::after {
+    content: "Native";
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #4caf50;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: bold;
+    z-index: 100;
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index ec4d30a9a..08b48f809 100644
--- a/client/src/components/index.ts
+++ b/client/src/components/index.ts
@@ -6,6 +6,7 @@ import ImageAnnotator from './annotators/ImageAnnotator.vue';
 import VideoAnnotator from './annotators/VideoAnnotator.vue';
 import LargeImageAnnotator from './annotators/LargeImageAnnotator.vue';
 import AnnotatorImageCursor from './annotators/AnnotatorImageCursor.vue';
+// NativeVideoAnnotator is not exported - it depends on electron and is only for desktop app
 
 import Controls from './controls/Controls.vue';
 import EventChart from './controls/EventChart.vue';