Supported Media
ReactPlayer supports a wide range of media sources. The component automatically detects the source type from the src URL and loads the appropriate player.
Streaming Services
| Service | Player SDK / Element | URL Pattern Examples |
|---|---|---|
| Mux | <mux-player> |
stream.mux.com/{PLAYBACK_ID} |
| YouTube | YouTube iFrame Player API | youtu.be/..., youtube.com/watch?v=..., youtube.com/shorts/..., youtube.com/playlist?list=... |
| Vimeo | Vimeo Player API | vimeo.com/{VIDEO_ID} |
| Wistia | Wistia Player API | home.wistia.com/medias/..., wi.st/medias/... |
| Spotify | spotify-audio-element |
open.spotify.com/episode/... |
| Twitch | twitch-video-element |
twitch.tv/videos/..., twitch.tv/{CHANNEL_NAME} |
| TikTok | tiktok-video-element |
tiktok.com/@user/video/{VIDEO_ID} |
Streaming Protocols
| Protocol | Player SDK / Element | File Extension |
|---|---|---|
| HLS | hls.js |
.m3u8 |
| DASH | dash.js |
.mpd |
File Paths
ReactPlayer can play any file that the browser's native <video> or <audio> elements can play. The file type is inferred from the file extension.
- Video Formats:
.mp4,.webm,.ogv,.mov,.m4v - Audio Formats:
.mp3,.wav,.aac,.ogg,.m4a,.m4b
For a complete list of supported formats and browser compatibility, refer to the MDN documentation on supported media formats.
If a URL does not match any of the specific players above, it will fall back to using the native HTML5 player.