Customize and preview your own M3U8 (HLS) streams using Video.js. Add poster images, generate embed code, and test playback — all in your browser. No registration, no hosting.
Preview will appear here
This tool helps you test, customize, and preview your own M3U8 (HLS) video streams using the popular Video.js player — all without installing any software. Whether you're a developer debugging a stream, a content publisher preparing an embed, or an educator demonstrating HLS playback, this tool gives you a real-time preview and a ready-to-use embed code.
HLS (HTTP Live Streaming) is the dominant protocol for delivering video over the web. However, testing HLS streams often requires complicated setups. This tool simplifies the process:
Frontend developers, streaming engineers, QA teams, educators, OTT platform builders, and anyone who needs to validate HLS streams quickly and reliably.
Video.js is an open-source HTML5 video player used by thousands of websites worldwide. It provides a consistent, accessible, and customizable experience across all modern browsers.
Video.js is completely free to use and modify, with a permissive MIT license. No licensing fees or restrictions.
Works on all modern browsers, including Chrome, Firefox, Safari, Edge, and mobile devices. Uses HTML5 video with fallbacks.
Extensive plugin ecosystem, skinning options, and API allow you to tailor the player to your exact needs.
Built-in support for keyboard navigation, screen readers, and captions, making video accessible to all users.
Supports HLS, DASH, and other adaptive formats through plugins, ensuring smooth playback even on poor networks.
Add analytics, ads, quality selection, and more via community-contributed plugins.
Understanding each option in the customizer helps you get the most out of your player.
The M3U8 URL is the address of your HLS playlist. It can be a master playlist (which lists multiple bitrate variants) or a media playlist (which lists individual segments). The player uses this URL to fetch the stream.
Example: https://example.com/stream/playlist.m3u8
A poster is a static image shown before the video starts playing. It gives viewers a preview of the content. Recommended size is 16:9 aspect ratio (e.g., 1920×1080). Supported formats: JPEG, PNG, WebP.
Example: https://example.com/poster.jpg
The embed code is an iframe snippet you can copy and paste into your website's HTML. It includes the player with your stream and poster already configured.
Attributes explained:
src – the URL of the embed page with your parameters.width and height – set the dimensions of the player.allowfullscreen – allows users to go fullscreen.loading="lazy" – defers loading until the iframe is near the viewport.referrerpolicy – controls what referrer information is sent.title – provides an accessible name for the iframe.Example embed code:
<iframe src="https://playanym3u8.com/cuembed.html?url=https://example.com/stream.m3u8&poster=https://example.com/poster.jpg"
width="800" height="450" frameborder="0" allowfullscreen loading="lazy"
referrerpolicy="no-referrer-when-downgrade" title="HLS Player"></iframe>
Making your embedded player responsive ensures it looks great on any device. Use the CSS technique below to maintain the aspect ratio.
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://playanym3u8.com/cuembed.html?url=YOUR_URL"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0" allowfullscreen loading="lazy" title="HLS Player"></iframe>
</div>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The padding-bottom: 56.25% creates a 16:9 aspect ratio. Adjust to 75% for 4:3, or use any
other percentage to match your video's aspect ratio.
Always use width: 100% and height: 100% on the iframe to fill the
container.
This works on all devices and screen sizes.
Follow these recommendations to ensure optimal performance, security, and user experience.
application/vnd.apple.mpegurl
for .m3u8 files and video/MP2T for .ts segments.
If your stream doesn't load or behaves unexpectedly, check the following common issues.
Symptom: Player shows error, console shows 404.
Cause: The URL is incorrect or the stream has been removed.
Solution: Verify the URL, check for typos, and ensure the stream is still active.
Symptom: Access denied error.
Cause: Server blocks requests (e.g., referer restrictions, IP blocking, or expired tokens).
Solution: Check if the stream requires authentication or a specific referer. Contact the stream provider.
Symptom: Console shows "No 'Access-Control-Allow-Origin' header".
Cause: The server does not include the necessary CORS headers.
Solution: Configure your server to include
Access-Control-Allow-Origin: *
or your specific domain.
Symptom: Player blocked due to HTTP content on HTTPS page.
Cause: The M3U8 URL uses HTTP while the page is served over HTTPS.
Solution: Use HTTPS for your stream URLs, or load the page over HTTP if security is not critical.
Symptom: Stream plays briefly then stops with 403 errors.
Cause: The URL includes a time-limited token that has expired.
Solution: Refresh the URL to obtain a new token, or use a long-lived test URL.
Symptom: Video plays but no audio (or vice versa), or error about unsupported codec.
Cause: The codec used (e.g., H.265) is not supported by the browser.
Solution: Use widely supported codecs like H.264 for video and AAC for audio.
Symptom: Player fails to initialize or shows a compatibility error.
Cause: Browser does not support HTML5 video or Media Source Extensions.
Solution: Use an up-to-date browser like Chrome, Firefox, Safari, or Edge.
Symptom: The player area is black or empty with no error.
Cause: The M3U8 URL is invalid, or the player failed to load the playlist.
Solution: Check the URL for correctness, and ensure the server responds with a valid M3U8 playlist.
Open your browser's developer console (F12) to see detailed error messages. The "Network" tab can show which requests are failing, helping you pinpoint the issue.
Video.js and the HLS plugin work on all modern browsers. Here's a detailed compatibility table.
| Browser | Video.js Support | HLS Playback | Poster Image | Fullscreen | Captions |
|---|---|---|---|---|---|
| Chrome (latest) | ✓ | ✓ (via plugin) | ✓ | ✓ | ✓ |
| Firefox (latest) | ✓ | ✓ (via plugin) | ✓ | ✓ | ✓ |
| Safari (latest) | ✓ | ✓ (native) | ✓ | ✓ | ✓ |
| Edge (latest) | ✓ | ✓ (via plugin) | ✓ | ✓ | ✓ |
| Android Chrome | ✓ | ✓ (via plugin) | ✓ | ✓ | ✓ |
| Samsung Internet | ✓ | ✓ (via plugin) | ✓ | ✓ | ✓ |
| iOS Safari | ✓ | ✓ (native) | ✓ | ✓ | ✓ |
| Opera (latest) | ✓ | ✓ (via plugin) | ✓ | ✓ | ✓ |
Note: Native HLS support varies. The plugin ensures consistent playback across all browsers.
Your privacy and security are important to us. Here's how PlayAnyM3U8 handles your data:
We respect your privacy and do not collect personal information without consent. We are transparent about our data practices.
Our tool is used by a wide range of professionals and organizations.
Testing HLS integration and player customization.
Validating stream output from encoding pipelines.
Running regression tests on live and VOD streams.
Testing multi-bitrate streams and player configurations.
Previewing content before publishing.
Teaching HLS and video streaming technology.
Demonstrating HLS playback in courses.
Learning about video streaming and player customization.
Checking streams before embedding on platforms.
Verifying stream accessibility and quality.
Explore these resources to deepen your understanding of HLS and Video.js.
Main player and tool overview
Articles on HLS, streaming, and more
Learn about PlayAnyM3U8
Get in touch for support
How we handle your data
Acceptable use policies
Copyright and takedown procedures
More documentation coming soon. Subscribe to our Blog for updates.
Find answers to common questions about the player customizer and HLS streaming.
The M3U8 Player Customizer is an online tool that allows you to test and preview your own M3U8 (HLS) video streams using Video.js, a modern HTML5 video player. PlayAnyM3U8 does not host or provide any video content.
No. PlayAnyM3U8 does not host, store, or distribute any video streams. All media is loaded directly from URLs provided by the user.
This page uses Video.js, an open-source HTML5 video player that ensures compatibility across modern browsers and devices.
Yes. After loading your stream, you can copy the generated embed code and use it on your own website or application. The embed player will load the same stream you provide.
This usually occurs if the provided M3U8 URL is invalid, unavailable, or blocked by the source server. Please verify that your stream URL is accessible and correct.
Yes. The player and interface are fully responsive and work on desktops, tablets, and mobile devices.
Yes, Video.js allows extensive customization of controls, skin, and functionality. The embed code can be modified to include additional Video.js options.
Autoplay is possible but may be blocked by browsers due to user experience policies. You can add the 'autoplay' parameter to the iframe or Video.js options, but success depends on browser restrictions.
Yes, Video.js with the HLS plugin supports both live and on-demand HLS streams. The player will adapt to the stream type automatically.
Yes, the Video.js player can also play MP4, WebM, and other formats supported by HTML5 video. Simply provide the appropriate URL.
Yes, you can include multiple iframes with different stream URLs on the same page. Ensure each iframe has a unique ID or title for accessibility.
There could be several reasons: the URL is incorrect, the server is down, CORS restrictions, or the stream requires authentication. Check the console for errors and verify the URL.
Yes, Video.js supports WebVTT captions. You can include a <track> element
or use the Video.js API to load captions.
Yes, you can use URLs with tokens or signatures. The player will fetch the playlist and segments as long as the URLs are valid and accessible.
Yes, Video.js allows full CSS customization. You can override the default skin or create your
own theme by editing the Video.js styles or using the .vjs-custom class.
Yes, Video.js is open-source and released under the MIT license, which allows free use, modification, and distribution.
Video.js can integrate with DRM systems (e.g., Widevine, PlayReady) via plugins. However, this tool does not include DRM support by default; it is intended for testing non-DRM streams.
A master playlist references multiple media playlists, each for a different bitrate. The player chooses the appropriate one based on network conditions. A media playlist contains the actual segment URLs for a single bitrate.
Use the CSS padding-bottom technique (e.g., 56.25% for 16:9) on a container div around the iframe. See the "Responsive Embed Guide" above for details.
You need a valid M3U8 URL hosted on a server. The tool cannot generate or host streams; it only plays URLs you provide.
Visit these pages for additional tools and information:
If you have any questions or need assistance with the player customizer, please contact us. We're here to help.