Video API for developers | Mux
Video API for developers | MuxSkip to contentMux LogoToggle Mux Brand PopoverToggle navigation menuXProductCaretSolutionsCaretDevelopersCaretPricingBlogTalk to usTalk to usLog inLog inNew:Mux + LLMs = @mux/aiArrow RightVideo for developersMux helps teams ship high-performance and cost-effective video in minutes, not months. Build better video into anything from websites to platforms to AI workflows.Get startedGet startedRead our docsRead our docsTrusted by top brandsFeaturesTry another videoCaretEmbedding a video with Mux is simpleIframe embedWeb componentReact component<iframe src="https://player.mux.com/dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm?&metadata-video-title=All about thumbnails&metadata-user-id=user-1138" style="width: 100%; border: none; aspect-ratio: 16/9;" allow="autoplay; encrypted-media; picture-in-picture;" allowfullscreen></iframe>Cursor clickingTurn video files into video featuresWe give you the building blocks to create live and on-demand video exactly how you want.See all Mux Video featuresTranscript0:01Ouch!0:02Dang thumbs.0:03You know, there's an easier way to get thumbnails.0:08Quickly grab a still from anywhere in your video with the Mux API.0:12All it takes is some query params.0:15Thumbnail.0:16What about GIFs?0:18What?0:19Not you, Jeff.0:20GIFs.0:22I thought it was GIFs.0:24GIFs, GIFS, it's all the same to Mux with a simple get request.0:29Because video is fun with Mux.// create an asset with auto-generated subtitlesawait muxClient.video.assets.create({ "inputs": [ { "url": "https://static.mux.com/home-page/thumbnail-infomercial.mp4" }, { generated_subtitles: [{ name: "English CC", "language_code": "en" }] } ], "playback_policies": ["public"], "video_quality": "basic"});// get subtitlesconst playbackId = "dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm";const trackId = "Yq9OsPqSNFCZ1q4tak9cEKQNxt9lHO8ghRSLQGDdYcVwCL5XXnCR1A";await fetch(`https://stream.mux.com/${playbackId}/text/${trackId}.vtt`)Show the codeCodeThumbnailsGIFsTime = 17Width = 512Height = 512RotatePreserveFlip HorizontalFlip Horizontal<img src="https://image.mux.com/dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm/thumbnail.webp?width=512&height=512" width="512" height="512" alt="Thumbnail"/>Show the codeCodeClippingPlay0:050:25Chevron RightChevron Right// Get an instant clipconst playbackId = "dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm";const streamUrl = `https://stream.mux.com/${playbackId}.m3u8?asset_start_time=5&asset_end_time=25`;// Or create a frame-accurate asset-based clipconst assetId = "sMP4ES801fUTrIwceiqvbZxrzuzOfI00P3";await muxClient.video.assets.create({ "inputs": [{ "url": `mux://assets/${assetId}`, "start_time": 5, "end_time": 25 }], "playback_policies": ["public"], "video_quality": "basic"});Show the codeCodeStoryboardsUse storyboards to quickly tell AI about your video, or to create experiences like video player timeline hover previews// You can get a storyboard as data (.json or .webvtt) or an image (.webp, .jpg, or .png)const playbackId = "dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm";const response = await fetch(`https://image.mux.com/${playbackId}/storyboard.json`)console.log(await response.json())/* { "storyboard": { "url": "https://image.mux.com/Ljxts2USDNC18YsA8u2Ik1iZCcO5YcBT/storyboard.jpg", "webpUrl": "https://image.mux.com/Ljxts2USDNC18YsA8u2Ik1iZCcO5YcBT/storyboard.webp", "tile_width": 284, "tile_height": 160, "calc_storyboard_width": 1420, "calc_storyboard_height": 1120, "duration": 34.334, "tiles": [ { "start": 0, "x": 0, "y": 0 }, { "start": 0.978, "x": 284, "y": 0 }, { "start": 1.956, "x": 568, "y": 0 }, { "start": 2.934, "x": 852, "y": 0 }, { "start": 3.912, "x": 1136, "y": 0 }, { "start": 4.891, "x": 0, "y": 160 }, { "start": 5.869, "x": 284, "y": 160 }, { "start": 6.847, "x": 568, "y": 160 }, { "start": 7.825, "x": 852, "y": 160 }, { "start": 8.803, "x": 1136, "y": 160 }, { "start": 9.781, "x": 0, "y": 320 }, { "start": 10.759, "x": 284, "y": 320 }, { "start": 11.737, "x": 568, "y": 320 }, { "start": 12.716, "x": 852, "y": 320 }, { "start": 13.694, "x": 1136, "y": 320 }, { "start": 14.672, "x": 0, "y": 480 }, { "start": 15.65, "x": 284, "y": 480 }, { "start": 16.628, "x": 568, "y": 480 }, { "start": 17.606, "x": 852, "y": 480 }, { "start": 18.584, "x": 1136, "y": 480 }, { "start": 19.562, "x": 0, "y": 640 }, { "start": 20.541, "x": 284, "y": 640 }, { "start": 21.519, "x": 568, "y": 640 }, { "start": 22.497, "x": 852, "y": 640 }, { "start": 23.475, "x": 1136, "y": 640 }, { "start": 24.453, "x": 0, "y": 800 }, { "start": 25.431, "x": 284, "y": 800 }, { "start": 26.409, "x": 568, "y": 800 }, { "start": 27.387, "x": 852, "y": 800 }, { "start": 28.366, "x": 1136, "y": 800 }, { "start": 29.344, "x": 0, "y": 960 }, { "start": 30.322, "x": 284, "y": 960 }, { "start": 31.3, "x": 568, "y": 960 }, { "start": 32.278, "x": 852, "y": 960 }, { "start": 33.256, "x": 1136, "y": 960 } ] }, "error": null} */Show the codeCodeAudio-only// Enable an audio-only static renditionconst assetId = "sMP4ES801fUTrIwceiqvbZx...
Video API for developers | MuxSkip to contentMux LogoToggle Mux Brand PopoverToggle navigation menuXProductCaretSolutionsCaretDevelopersCaretPricingBlogTalk to usTalk to usLog inLog inNew:Mux + LLMs = @mux/aiArrow RightVideo for developersMux helps teams ship high-performance and cost-effective video in minutes, not months. Build better video into anything from websites to platforms to AI workflows.Get startedGet startedRead our docsRead our docsTrusted by top brandsFeaturesTry another videoCaretEmbedding a video with Mux is simpleIframe embedWeb componentReact component<iframe src="https://player.mux.com/dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm?&metadata-video-title=All about thumbnails&metadata-user-id=user-1138" style="width: 100%; border: none; aspect-ratio: 16/9;" allow="autoplay; encrypted-media; picture-in-picture;" allowfullscreen></iframe>Cursor clickingTurn video files into video featuresWe give you the building blocks to create live and on-demand video exactly how you want.See all Mux Video featuresTranscript0:01Ouch!0:02Dang thumbs.0:03You know, there's an easier way to get thumbnails.0:08Quickly grab a still from anywhere in your video with the Mux API.0:12All it takes is some query params.0:15Thumbnail.0:16What about GIFs?0:18What?0:19Not you, Jeff.0:20GIFs.0:22I thought it was GIFs.0:24GIFs, GIFS, it's all the same to Mux with a simple get request.0:29Because video is fun with Mux.// create an asset with auto-generated subtitlesawait muxClient.video.assets.create({ "inputs": [ { "url": "https://static.mux.com/home-page/thumbnail-infomercial.mp4" }, { generated_subtitles: [{ name: "English CC", "language_code": "en" }] } ], "playback_policies": ["public"], "video_quality": "basic"});// get subtitlesconst playbackId = "dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm";const trackId = "Yq9OsPqSNFCZ1q4tak9cEKQNxt9lHO8ghRSLQGDdYcVwCL5XXnCR1A";await fetch(`https://stream.mux.com/${playbackId}/text/${trackId}.vtt`)Show the codeCodeThumbnailsGIFsTime = 17Width = 512Height = 512RotatePreserveFlip HorizontalFlip Horizontal<img src="https://image.mux.com/dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm/thumbnail.webp?width=512&height=512" width="512" height="512" alt="Thumbnail"/>Show the codeCodeClippingPlay0:050:25Chevron RightChevron Right// Get an instant clipconst playbackId = "dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm";const streamUrl = `https://stream.mux.com/${playbackId}.m3u8?asset_start_time=5&asset_end_time=25`;// Or create a frame-accurate asset-based clipconst assetId = "sMP4ES801fUTrIwceiqvbZxrzuzOfI00P3";await muxClient.video.assets.create({ "inputs": [{ "url": `mux://assets/${assetId}`, "start_time": 5, "end_time": 25 }], "playback_policies": ["public"], "video_quality": "basic"});Show the codeCodeStoryboardsUse storyboards to quickly tell AI about your video, or to create experiences like video player timeline hover previews// You can get a storyboard as data (.json or .webvtt) or an image (.webp, .jpg, or .png)const playbackId = "dE02GfTAlJD4RcqNAlgiS2m00LqbdFqlBm";const response = await fetch(`https://image.mux.com/${playbackId}/storyboard.json`)console.log(await response.json())/* { "storyboard": { "url": "https://image.mux.com/Ljxts2USDNC18YsA8u2Ik1iZCcO5YcBT/storyboard.jpg", "webpUrl": "https://image.mux.com/Ljxts2USDNC18YsA8u2Ik1iZCcO5YcBT/storyboard.webp", "tile_width": 284, "tile_height": 160, "calc_storyboard_width": 1420, "calc_storyboard_height": 1120, "duration": 34.334, "tiles": [ { "start": 0, "x": 0, "y": 0 }, { "start": 0.978, "x": 284, "y": 0 }, { "start": 1.956, "x": 568, "y": 0 }, { "start": 2.934, "x": 852, "y": 0 }, { "start": 3.912, "x": 1136, "y": 0 }, { "start": 4.891, "x": 0, "y": 160 }, { "start": 5.869, "x": 284, "y": 160 }, { "start": 6.847, "x": 568, "y": 160 }, { "start": 7.825, "x": 852, "y": 160 }, { "start": 8.803, "x": 1136, "y": 160 }, { "start": 9.781, "x": 0, "y": 320 }, { "start": 10.759, "x": 284, "y": 320 }, { "start": 11.737, "x": 568, "y": 320 }, { "start": 12.716, "x": 852, "y": 320 }, { "start": 13.694, "x": 1136, "y": 320 }, { "start": 14.672, "x": 0, "y": 480 }, { "start": 15.65, "x": 284, "y": 480 }, { "start": 16.628, "x": 568, "y": 480 }, { "start": 17.606, "x": 852, "y": 480 }, { "start": 18.584, "x": 1136, "y": 480 }, { "start": 19.562, "x": 0, "y": 640 }, { "start": 20.541, "x": 284, "y": 640 }, { "start": 21.519, "x": 568, "y": 640 }, { "start": 22.497, "x": 852, "y": 640 }, { "start": 23.475, "x": 1136, "y": 640 }, { "start": 24.453, "x": 0, "y": 800 }, { "start": 25.431, "x": 284, "y": 800 }, { "start": 26.409, "x": 568, "y": 800 }, { "start": 27.387, "x": 852, "y": 800 }, { "start": 28.366, "x": 1136, "y": 800 }, { "start": 29.344, "x": 0, "y": 960 }, { "start": 30.322, "x": 284, "y": 960 }, { "start": 31.3, "x": 568, "y": 960 }, { "start": 32.278, "x": 852, "y": 960 }, { "start": 33.256, "x": 1136, "y": 960 } ] }, "error": null} */Show the codeCodeAudio-only// Enable an audio-only static renditionconst assetId = "sMP4ES801fUTrIwceiqvbZx...