Video Preview XD

Video Preview XD is a Visual Studio Code extension that allows you to play video files directly within your editor. Instead of switching context to an external media player, simply click on a video file in the file explorer to view it in a dedicated tab. Why "XD"... I dunno lol, why not.

Features

• Native VS Code Integration: Opens video files in standard editor tabs.
• WebM / Ogg Support: Uses ogv.js WASM decoders to play VP8/VP9/Opus/Vorbis — formats that VS Code's Electron cannot play natively.
• MP4 / MOV Support: Uses Video.js with the browser's native playback.
• Playback Controls: Play/pause, seek, volume, and playback rate (0.5x–2x).
• Performance: Retains the video context when hidden to prevent unnecessary reloading.

Usage

1. Open your project in VS Code.
2. Navigate to a video file in your file explorer.
3. Click the video file to open it in a Video Player tab.

Supported Formats

Why two players? VS Code's Electron build cannot play WebM or Ogg natively (upstream issue). ogv.js decodes these formats in WebAssembly and renders to a canvas, no system dependencies required.

Development & Publishing Workflow

Prerequisites

npm install
npm run copy-media   # vendors Video.js and ogv.js into media/ for the webview

You'll also need a Personal Access Token (PAT) from Azure DevOps with the Marketplace (Manage) scope. Create one at dev.azure.com → User Settings → Personal access tokens. Run this once to store it:

npx vsce login sitefinitysteve

Making Changes

1. Make your code changes in src/.
2. Bump the version field in package.json following semver:
   • Patch (0.0.x) — bug fixes
   • Minor (0.x.0) — new features, backwards compatible
   • Major (x.0.0) — breaking changes
3. Update this README if behaviour or supported formats changed.

Test Locally

Press F5 in VS Code to launch an Extension Development Host with your changes loaded. Open a video file to verify it plays correctly. After making code changes, press Cmd+Shift+P (or Ctrl+Shift+P) in the Extension Development Host and run "Developer: Reload Window" to pick up the latest build.

To build and inspect the package contents before publishing:

npm run package
# outputs dist/video-preview-xd-<version>.vsix

npx vsce ls   # lists every file that will be included

Install the local .vsix to do a final smoke test:

code --install-extension dist/video-preview-xd-<version>.vsix

Publish to the Marketplace

Once everything looks good:

npm run publish

This runs vsce:prepublish (which compiles TypeScript) and then pushes directly to the VS Code Marketplace. The new version is usually live within a few minutes.

Tip: If you want to publish a specific version without interactive prompts, use:

npx vsce publish --no-git-tag-version

After publishing, commit and push the version bump:

git add package.json
git commit -m "chore: bump version to x.x.x"
git push

Credits

Made with ❤️ by sitefinitysteve Visit my site at https://www.sitefinitysteve.com