{"id":51136603,"url":"https://github.com/brodazz/mp4-player","last_synced_at":"2026-06-25T19:00:15.250Z","repository":{"id":367129562,"uuid":"1279358164","full_name":"Brodazz/mp4-player","owner":"Brodazz","description":"Estensione per Visual Studio Code che riproduce video .mp4 (video + audio) direttamente in una scheda dell'editor, affiancabile al codice. Player HTML5 nativo, scorciatoie da tastiera e Content-Security-Policy restrittiva. Scritta in TypeScript.","archived":false,"fork":false,"pushed_at":"2026-06-24T17:02:51.000Z","size":238,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-24T18:16:03.241Z","etag":null,"topics":["custom-editor","html5-video","media","mp4","typescript","video","video-player","vscode","vscode-extension","webview"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Brodazz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-24T16:00:19.000Z","updated_at":"2026-06-24T17:02:42.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Brodazz/mp4-player","commit_stats":null,"previous_names":["brodazz/mp4-player"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Brodazz/mp4-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brodazz%2Fmp4-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brodazz%2Fmp4-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brodazz%2Fmp4-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brodazz%2Fmp4-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Brodazz","download_url":"https://codeload.github.com/Brodazz/mp4-player/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brodazz%2Fmp4-player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34788254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-editor","html5-video","media","mp4","typescript","video","video-player","vscode","vscode-extension","webview"],"created_at":"2026-06-25T19:00:14.157Z","updated_at":"2026-06-25T19:00:15.223Z","avatar_url":"https://github.com/Brodazz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modern Video Player — with Audio for VS Code\n\n[![Version](https://badgen.net/vs-marketplace/v/Brodazz.mp4-player)](https://marketplace.visualstudio.com/items?itemName=Brodazz.mp4-player)\n[![Installs](https://badgen.net/vs-marketplace/i/Brodazz.mp4-player)](https://marketplace.visualstudio.com/items?itemName=Brodazz.mp4-player)\n[![Rating](https://badgen.net/vs-marketplace/rating/Brodazz.mp4-player)](https://marketplace.visualstudio.com/items?itemName=Brodazz.mp4-player)\n[![CI](https://github.com/Brodazz/mp4-player/actions/workflows/ci.yml/badge.svg)](https://github.com/Brodazz/mp4-player/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n\nExtension that plays `.mp4`, `.mov` and `.m4v` videos (video **and** audio) in a\nVisual Studio Code editor tab. You can keep the video open in one pane and keep\nwriting code in another by splitting the editor — no external windows.\n\n\u003c!-- Media URLs must be absolute HTTPS (the Marketplace doesn't render relative paths),\n     so these point at the raw files on the main branch. --\u003e\n![Video, code and AI side by side in VS Code](https://raw.githubusercontent.com/Brodazz/mp4-player/main/assets/demo.gif)\n\n*A modern workflow: a reference video (Modern Video Player), your code and your AI assistant — all at once, in VS Code.*\n\n![The player with its custom control bar](https://raw.githubusercontent.com/Brodazz/mp4-player/main/assets/screenshot.png)\n\n## Why this one\n\nMost video extensions for VS Code either **play MP4 without sound** (Chromium in\nVS Code can't decode AAC audio) or **make you install `ffmpeg` yourself**. This one\njust works: it **bundles `ffmpeg`**, so MP4/MOV/M4V play **with audio out of the\nbox** — no setup, no local server, fully **offline**, in a single lightweight and\nsecure extension.\n\n- 🔊 **Real audio** on MP4/MOV/M4V — even AAC, which VS Code can't decode on its own\n- ⚡ **Zero setup** — `ffmpeg` is bundled; nothing to install\n- 🔒 **Secure \u0026 offline** — no network, no local server, read-only editor, strict CSP\n- 🎛️ **Modern control bar** — seekable timeline, speed (0.25×–2×), volume, Picture-in-Picture, fullscreen\n- 🪶 **Lightweight \u0026 focused** — does one thing, well\n- 🖥️ **Cross-platform** — Windows, Linux, macOS (Intel \u0026 Apple Silicon)\n\n| | This extension | Other VS Code video extensions |\n|---|:--:|:--:|\n| Audio on MP4/MOV (incl. AAC) | ✅ out of the box | ❌ silent — or ⚠️ only if you install ffmpeg |\n| Setup required | ✅ none (ffmpeg bundled) | ⚠️ often needs ffmpeg installed |\n| Network / local server | ✅ none — fully offline | ⚠️ some run a local HTTP server |\n| Footprint | 🪶 lightweight | 🐘 some ship large WASM decoders |\n| Security | 🔒 strict CSP, read-only, no network | varies |\n| Control bar (speed · PiP · fullscreen) | ✅ built-in | varies |\n\n## How it works\n\nVS Code is built on Electron (Chromium), so an HTML5 `\u003cvideo\u003e` tag in a Webview\nplays the **H.264** video of MP4/MOV/M4V files. The VS Code engine, however, does\nnot decode **AAC audio**: that's why the extension extracts the audio track and\ntranscodes it locally (with a bundled `ffmpeg`) into MP3, then plays it **in\nsync** with the video. Everything happens offline, on your PC. The extension\nregisters a *Custom Editor* for `.mp4`, `.mov` and `.m4v` files.\n\n## Installation\n\n### From a `.vsix` file\n1. Download the `.vsix` file (from the *Releases* page, or build it yourself, see below).\n2. In VS Code: **Extensions** (`Ctrl+Shift+X`) → `...` menu → *Install from VSIX...*\n3. Or from the terminal: `code --install-extension mp4-player-win32-x64.vsix`\n\n### Usage\n- Open a `.mp4`, `.mov` or `.m4v` file from the Explorer: the player starts.\n- To place code and video side by side, use the editor split (`Ctrl+\\` or drag the tab).\n- A **custom control bar** appears at the bottom of the player on mouse move\n  (play/pause, seekable timeline, time, volume, playback speed, Picture-in-Picture,\n  fullscreen) and fades out during playback. Keyboard shortcuts work too (see below).\n\n## Keyboard shortcuts\n\n| Key | Action |\n|---|---|\n| `Space` / `K` | Play / Pause |\n| `←` / `→` | Back / Forward 5s |\n| `↑` / `↓` | Volume up / down |\n| `\u003c` / `\u003e` | Slower / Faster (0.25×–2×) |\n| `M` | Mute |\n| `P` | Picture-in-Picture |\n| `F` | Fullscreen |\n\n## Development\n\n```bash\nnpm install\nnpm run compile      # or: npm run watch\n```\n\nPress **F5** in VS Code to open the *Extension Development Host* test window.\n\n### Packaging (.vsix)\n\n```bash\nnpm run package\n```\n\n## Security\n\nSee [SECURITY.md](SECURITY.md). In short: restrictive Content-Security-Policy,\ncryptographic nonce, file access limited to the video's folder, read-only editor,\nno network connections.\n\n## Supported codecs\n\n- **Video**: **H.264** (the most common). Codecs such as **H.265/HEVC** may not\n  be supported by the VS Code engine: in that case the player shows an error.\n- **Audio**: handled via local transcoding with `ffmpeg`, so it works even with\n  **AAC** (which VS Code does not decode on its own). The audio is converted to a\n  temporary MP3 file the VS Code engine plays reliably, then cached for instant\n  reopens. The cache **cleans itself up** (files older than 7 days, and a 1 GB cap).\n\n## Platforms\n\nDedicated packages for **Windows (x64)**, **Linux (x64)**, **macOS Intel** and\n**macOS Apple Silicon**: audio works on all of them thanks to a bundled `ffmpeg`\nfor each platform. The VS Code Marketplace automatically downloads the right\npackage for your system.\n\n## License\n\n[MIT](LICENSE) © Alessandro Broda\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrodazz%2Fmp4-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrodazz%2Fmp4-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrodazz%2Fmp4-player/lists"}