npx skills add https://github.com/muxinc/skills --skill mux-video关于使用 Mux(开发者优先的视频基础设施平台)构建视频应用的全面指南。此技能涵盖视频流、直播流、播放器集成、Mux Data 分析以及 AI 驱动的工作流。无论您是构建视频点播平台、直播应用,还是将视频集成到现有产品中,本文档都提供了快速交付所需的模式和代码示例。
五分钟内开始流媒体播放:
在 Mux 控制面板中创建一个 API 访问令牌,并授予视频读取和写入权限
从 URL 创建视频资产:
curl https://api.mux.com/video/v1/assets \
-H "Content-Type: application/json" \
-X POST \
-d '{ "input": [{ "url": "https://muxed.s3.amazonaws.com/leds.mp4" }], "playback_policy": ["public"] }' \
-u ${MUX_TOKEN_ID}:${MUX_TOKEN_SECRET}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
3. 使用返回的播放 ID 播放视频:
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player playback-id="YOUR_PLAYBACK_ID"></mux-player>
有关 Node.js、Python、Ruby、Go 和 PHP 中 SDK 示例的完整演练,请参阅 examples/quickstart-stream-video.md。
使用 Mux API 和基础设施所需的基础知识。
| 文件 | 描述 |
|---|---|
| reference/mux-fundamentals.md | 组织、环境、资产、播放 ID 和 API 结构 |
| reference/api-authentication.md | 访问令牌、权限和安全 API 请求模式 |
| reference/webhooks.md | Webhook 事件、签名验证和事件处理 |
| reference/content-security-policy.md | Mux Player 和流媒体域名的 CSP 配置 |
具有内置分析和自适应控制的即插即用视频播放器组件。
| 文件 | 描述 |
|---|---|
| reference/mux-player-overview.md | 平台支持(Web、iOS、Android)、安装和核心功能 |
| reference/player-setup-integration.md | HTML、React、iframe 嵌入和原生移动端集成 |
| reference/player-customization.md | 主题、CSS 变量、自定义控件和品牌化 |
| reference/player-advanced-features.md | Chromecast、AirPlay、DVR 模式、画中画和画质选择 |
| reference/playback-security.md | 签名 URL、JWT 令牌生成和播放限制 |
| reference/playback-modifiers-resolution.md | 分辨率限制、带宽提示和播放 URL 参数 |
将视频内容导入 Mux 并配置资产的方法。
| 文件 | 描述 |
|---|---|
| reference/upload-methods.md | URL 导入、直接上传和可恢复上传协议 |
| reference/mux-uploader.md | 适用于 Web 的即插即用上传组件,支持进度和错误处理 |
| reference/mobile-upload-sdks.md | 适用于原生应用的 iOS 和 Android 上传 SDK |
| reference/asset-configuration.md | 视频质量等级、MP4 支持、主文件访问和编码设置 |
| reference/text-tracks-and-audio.md | 字幕、副标题、音轨和语言配置 |
具有全球输入和低延迟交付的实时视频广播。
| 文件 | 描述 |
|---|---|
| reference/live-streaming-getting-started.md | 创建直播流、流密钥和基本广播 |
| reference/live-stream-configuration.md | 延迟模式、重连窗口和录制设置 |
| reference/streaming-protocols-encoder-setup.md | RTMP、RTMPS、SRT 协议和编码器配置 |
| reference/live-stream-features.md | 同步广播、直播剪辑、DVR 模式和嵌入式字幕 |
| reference/live-stream-troubleshooting.md | 常见问题、调试和编码器兼容性 |
体验质量指标、参与度跟踪和性能监控。
| 文件 | 描述 |
|---|---|
| reference/metrics-overview.md | 观看次数、观看时长、QoE 分数和指标定义 |
| reference/dashboards-and-filtering.md | 控制面板导航、筛选器和数据探索 |
| reference/custom-metadata-and-dimensions.md | 自定义维度、视频元数据和观看者识别 |
| reference/data-exports.md | CSV 导出、S3 交付和原始数据访问 |
| reference/alerts-and-monitoring.md | 警报配置、阈值和通知渠道 |
| reference/privacy-and-configuration.md | 数据保留、GDPR 合规性和隐私设置 |
将 Mux Data 与第三方视频播放器集成。
| 文件 | 描述 |
|---|---|
| reference/web-player-integrations.md | Video.js、HLS.js、Shaka Player、JW Player 和 Bitmovin |
| reference/mobile-player-integrations.md | AVPlayer(iOS)、ExoPlayer(Android)和原生 SDK |
| reference/smart-tv-device-integrations.md | Roku、Fire TV、Apple TV 和智能电视平台 |
| reference/custom-player-integrations.md | 使用 Mux Data SDK 构建自定义播放器集成 |
超越基本播放的额外视频能力。
| 文件 | 描述 |
|---|---|
| reference/video-clipping.md | 从资产创建剪辑、基于 URL 的剪辑和剪辑管理 |
| reference/images-and-thumbnails.md | 缩略图生成、动态 GIF 和时间线预览 |
| reference/custom-domains-and-security.md | CNAME 设置、SSL 证书和品牌化交付域名 |
| reference/social-sharing-and-special-features.md | OG 标签、Twitter 卡片和社交媒体优化 |
针对流行 Web 和移动框架的平台特定指南。
| 文件 | 描述 |
|---|---|
| reference/web-framework-integrations.md | Next.js、Remix、SvelteKit、Nuxt 和其他 Web 框架 |
| reference/react-native-getting-started.md | 在 React Native 应用中设置 Mux |
| reference/react-native-video-features.md | React Native 中的视频播放、上传和分析 |
| reference/react-native-ui-patterns.md | 视频应用的常见 UI 模式(信息流、故事、全屏) |
| reference/react-native-advanced-topics.md | 性能优化、离线播放和后台音频 |
将 Mux 与内容管理系统和后端服务连接。
| 文件 | 描述 |
|---|---|
| reference/cms-integrations.md | Sanity、Contentful、WordPress、Strapi 和其他 CMS 平台 |
| reference/server-side-sdks.md | Node.js、Python、Ruby、PHP、Go、Java 和 .NET SDK |
| reference/mcp-server.md | 用于 AI 助手集成的 Mux MCP 服务器 |
了解并优化 Mux 成本。
| 文件 | 描述 |
|---|---|
| reference/pricing-overview.md | 定价模型、计费指标和成本计算 |
| reference/cost-optimization.md | 降低编码、存储和交付成本的策略 |
| 文件 | 描述 |
|---|---|
| examples/quickstart-stream-video.md | 上传和播放第一个视频的完整指南 |
| examples/webhook-signature-verification.md | 在 Node.js、Python 和 Ruby 中验证 Webhook 签名 |
| 文件 | 描述 |
|---|---|
| examples/mux-player-web-setup.md | 在 HTML、React 和 Vue 应用中设置 Mux Player |
| examples/signed-url-playback.md | 使用 JWT 生成和使用签名播放 URL |
| examples/drm-protected-playback.md | 配置 Widevine 和 FairPlay 的 DRM 保护内容 |
| 文件 | 描述 |
|---|---|
| examples/direct-upload-with-webhooks.md | 客户端上传与服务器端 Webhook 处理 |
| examples/video-with-captions-and-metadata.md | 上传带有字幕轨道和自定义元数据的视频 |
| 文件 | 描述 |
|---|---|
| examples/live-streaming-complete-setup.md | 端到端直播流媒体实现 |
| examples/live-captions-and-simulcasting.md | 添加直播字幕和向多个平台流媒体 |
| 文件 | 描述 |
|---|---|
| examples/custom-analytics-integration.md | 带有自定义维度的高级 Mux Data 集成 |
| examples/web-player-integration-example.md | 将 Mux Data 与 Video.js 和 HLS.js 集成 |
| examples/mobile-player-integration-example.md | iOS 和 Android 分析 SDK 集成 |
| 文件 | 描述 |
|---|---|
| examples/video-clipping-workflows.md | 为社交媒体分享和精彩片段创建剪辑 |
| examples/thumbnail-and-preview-integration.md | 动态缩略图和时间线悬停预览 |
| 文件 | 描述 |
|---|---|
| examples/react-native-stories-app.md | 构建 Instagram 风格的故事功能 |
| examples/react-native-video-upload-workflow.md | 包含进度和后台处理的完整上传流程 |
| 文件 | 描述 |
|---|---|
| examples/cms-setup-sanity.md | 将 Mux 与 Sanity CMS 集成 |
| 文件 | 描述 |
|---|---|
| examples/ai-video-workflows.md | 使用 @mux/ai 实现自动章节、摘要和标记 |
| examples/content-moderation-strategies.md | 用户生成视频的 AI 驱动内容审核 |
| examples/video-synchronization.md | 跨多个观看者同步视频播放 |
所有 Mux API 请求都需要使用令牌 ID 和令牌密钥进行认证。API 请求必须从服务器环境发出 - API 不支持 CORS,并且凭据绝不应暴露在客户端代码中。
api.mux.com)管理内容stream.mux.com)在跟踪资产状态时,应始终优先使用 Webhook 而非轮询。当资产准备就绪、直播流状态更改或上传完成时,Webhook 会提供实时通知。请在 Mux 控制面板中为每个环境配置 Webhook。
Mux 提供不同的视频质量等级(基础版、增强版、高级版),这些等级会影响编码质量和定价。请根据您的内容类型和质量要求选择合适的等级。
直播流密钥应视为机密。任何拥有流密钥的人都可以向您的直播流进行广播。如果密钥泄露,请立即重置。
每周安装次数
83
代码仓库
GitHub 星标数
2
首次出现
2026年1月23日
安全审计
安装于
opencode75
codex74
gemini-cli72
github-copilot70
cursor64
amp63
Comprehensive guide to building video applications with Mux, the developer-first video infrastructure platform. This skill covers video streaming, live streaming, player integrations, analytics with Mux Data, and AI-powered workflows. Whether you are building a video-on-demand platform, live streaming application, or integrating video into an existing product, this documentation provides the patterns and code examples needed to ship quickly.
Get streaming in five minutes:
Create an API Access Token in the Mux Dashboard with Video Read and Write permissions
Create a video asset from a URL:
curl https://api.mux.com/video/v1/assets \
-H "Content-Type: application/json" \
-X POST \
-d '{ "input": [{ "url": "https://muxed.s3.amazonaws.com/leds.mp4" }], "playback_policy": ["public"] }' \
-u ${MUX_TOKEN_ID}:${MUX_TOKEN_SECRET}
3. Play the video using the returned playback ID:
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player playback-id="YOUR_PLAYBACK_ID"></mux-player>
See examples/quickstart-stream-video.md for the complete walkthrough with SDK examples in Node.js, Python, Ruby, Go, and PHP.
Foundational knowledge for working with Mux APIs and infrastructure.
| File | Description |
|---|---|
| reference/mux-fundamentals.md | Organizations, environments, assets, playback IDs, and API structure |
| reference/api-authentication.md | Access tokens, permissions, and secure API request patterns |
| reference/webhooks.md | Webhook events, signature verification, and event handling |
| reference/content-security-policy.md | CSP configuration for Mux Player and streaming domains |
Drop-in video player components with built-in analytics and adaptive controls.
| File | Description |
|---|---|
| reference/mux-player-overview.md | Platform support (web, iOS, Android), installation, and core features |
| reference/player-setup-integration.md | HTML, React, iframe embed, and native mobile integration |
| reference/player-customization.md | Theming, CSS variables, custom controls, and branding |
| reference/player-advanced-features.md | Chromecast, AirPlay, DVR mode, picture-in-picture, and quality selection |
| reference/playback-security.md | Signed URLs, JWT token generation, and playback restrictions |
| reference/playback-modifiers-resolution.md | Resolution capping, bandwidth hints, and playback URL parameters |
Methods for getting video content into Mux and configuring assets.
| File | Description |
|---|---|
| reference/upload-methods.md | URL ingestion, direct uploads, and resumable upload protocols |
| reference/mux-uploader.md | Drop-in upload components for web with progress and error handling |
| reference/mobile-upload-sdks.md | iOS and Android upload SDKs for native applications |
| reference/asset-configuration.md | Video quality tiers, MP4 support, master access, and encoding settings |
| reference/text-tracks-and-audio.md | Captions, subtitles, audio tracks, and language configuration |
Real-time video broadcasting with global ingest and low-latency delivery.
| File | Description |
|---|---|
| reference/live-streaming-getting-started.md | Creating live streams, stream keys, and basic broadcasting |
| reference/live-stream-configuration.md | Latency modes, reconnect windows, and recording settings |
| reference/streaming-protocols-encoder-setup.md | RTMP, RTMPS, SRT protocols and encoder configuration |
| reference/live-stream-features.md | Simulcasting, live clipping, DVR mode, and embedded captions |
| reference/live-stream-troubleshooting.md | Common issues, debugging, and encoder compatibility |
Quality of experience metrics, engagement tracking, and performance monitoring.
| File | Description |
|---|---|
| reference/metrics-overview.md | Views, watch time, QoE scores, and metric definitions |
| reference/dashboards-and-filtering.md | Dashboard navigation, filters, and data exploration |
| reference/custom-metadata-and-dimensions.md | Custom dimensions, video metadata, and viewer identification |
| reference/data-exports.md | CSV exports, S3 delivery, and raw data access |
| reference/alerts-and-monitoring.md | Alert configuration, thresholds, and notification channels |
| reference/privacy-and-configuration.md | Data retention, GDPR compliance, and privacy settings |
Integrating Mux Data with third-party video players.
| File | Description |
|---|---|
| reference/web-player-integrations.md | Video.js, HLS.js, Shaka Player, JW Player, and Bitmovin |
| reference/mobile-player-integrations.md | AVPlayer (iOS), ExoPlayer (Android), and native SDKs |
| reference/smart-tv-device-integrations.md | Roku, Fire TV, Apple TV, and smart TV platforms |
| reference/custom-player-integrations.md | Building custom player integrations with Mux Data SDK |
Additional video capabilities beyond basic playback.
| File | Description |
|---|---|
| reference/video-clipping.md | Creating clips from assets, URL-based clipping, and clip management |
| reference/images-and-thumbnails.md | Thumbnail generation, animated GIFs, and timeline previews |
| reference/custom-domains-and-security.md | CNAME setup, SSL certificates, and branded delivery domains |
| reference/social-sharing-and-special-features.md | OG tags, Twitter cards, and social media optimization |
Platform-specific guides for popular web and mobile frameworks.
| File | Description |
|---|---|
| reference/web-framework-integrations.md | Next.js, Remix, SvelteKit, Nuxt, and other web frameworks |
| reference/react-native-getting-started.md | Setting up Mux in React Native applications |
| reference/react-native-video-features.md | Video playback, uploads, and analytics in React Native |
| reference/react-native-ui-patterns.md | Common UI patterns for video apps (feeds, stories, full-screen) |
| reference/react-native-advanced-topics.md | Performance optimization, offline playback, and background audio |
Connecting Mux with content management systems and backend services.
| File | Description |
|---|---|
| reference/cms-integrations.md | Sanity, Contentful, WordPress, Strapi, and other CMS platforms |
| reference/server-side-sdks.md | Node.js, Python, Ruby, PHP, Go, Java, and .NET SDKs |
| reference/mcp-server.md | Mux MCP server for AI assistant integrations |
Understanding and optimizing Mux costs.
| File | Description |
|---|---|
| reference/pricing-overview.md | Pricing model, billable metrics, and cost calculations |
| reference/cost-optimization.md | Strategies for reducing encoding, storage, and delivery costs |
| File | Description |
|---|---|
| examples/quickstart-stream-video.md | Complete guide to uploading and playing your first video |
| examples/webhook-signature-verification.md | Verifying webhook signatures in Node.js, Python, and Ruby |
| File | Description |
|---|---|
| examples/mux-player-web-setup.md | Setting up Mux Player in HTML, React, and Vue applications |
| examples/signed-url-playback.md | Generating and using signed playback URLs with JWTs |
| examples/drm-protected-playback.md | Configuring DRM-protected content with Widevine and FairPlay |
| File | Description |
|---|---|
| examples/direct-upload-with-webhooks.md | Client-side uploads with server webhook handling |
| examples/video-with-captions-and-metadata.md | Uploading videos with subtitle tracks and custom metadata |
| File | Description |
|---|---|
| examples/live-streaming-complete-setup.md | End-to-end live streaming implementation |
| examples/live-captions-and-simulcasting.md | Adding live captions and streaming to multiple platforms |
| File | Description |
|---|---|
| examples/custom-analytics-integration.md | Advanced Mux Data integration with custom dimensions |
| examples/web-player-integration-example.md | Integrating Mux Data with Video.js and HLS.js |
| examples/mobile-player-integration-example.md | iOS and Android analytics SDK integration |
| File | Description |
|---|---|
| examples/video-clipping-workflows.md | Creating clips for social sharing and highlights |
| examples/thumbnail-and-preview-integration.md | Dynamic thumbnails and timeline hover previews |
| File | Description |
|---|---|
| examples/react-native-stories-app.md | Building an Instagram-style stories feature |
| examples/react-native-video-upload-workflow.md | Complete upload flow with progress and background handling |
| File | Description |
|---|---|
| examples/cms-setup-sanity.md | Integrating Mux with Sanity CMS |
| File | Description |
|---|---|
| examples/ai-video-workflows.md | Automatic chapters, summarization, and tagging with @mux/ai |
| examples/content-moderation-strategies.md | AI-powered content moderation for user-generated video |
| examples/video-synchronization.md | Syncing video playback across multiple viewers |
All Mux API requests require authentication using a Token ID and Token Secret. API requests must be made from a server environment - the API does not support CORS and credentials should never be exposed in client-side code.
api.mux.com)stream.mux.com)Always prefer webhooks over polling to track asset status. Webhooks provide real-time notifications when assets are ready, live streams change state, or uploads complete. Configure webhooks per environment in the Mux Dashboard.
Mux offers different video quality tiers (basic, plus, premium) that affect encoding quality and pricing. Choose the appropriate tier based on your content type and quality requirements.
Live stream keys should be treated as secrets. Anyone with the stream key can broadcast to your live stream. Reset keys immediately if compromised.
Weekly Installs
83
Repository
GitHub Stars
2
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode75
codex74
gemini-cli72
github-copilot70
cursor64
amp63
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装
Azure部署指南:从验证到执行,确保云应用成功上线
103,400 周安装
UI/UX Pro Max 设计指南:50+样式、97调色板、57字体配对、99条UX规则
105,500 周安装
Azure AI 服务指南:AI Search、Speech、OpenAI 与 MCP 工具使用教程
103,800 周安装
Azure 升级评估与自动化工具 - 轻松迁移 Functions 计划、托管层级和 SKU
111,700 周安装
Azure 配额管理指南:服务限制、容量验证与配额增加方法
122,900 周安装
Azure Validate 验证工具:Microsoft Azure 部署前检查与预检指南
146,300 周安装