M3U8 Player Online

Developer Guide

Step-by-step guides for developers implementing M3U8 Player Online in their projects

Back to Documentation

Basic Integration

This guide will walk you through the basic steps to integrate M3U8 Player Online into your website.

Step 1: Add the Embed Code

Add the iframe embed code to your HTML page where you want the player to appear.

<iframe 
  src="https://www.m3u8player.online/embed/m3u8?url=YOUR_STREAM_URL" 
  width="100%" 
  height="100%" 
  style="border:none; aspect-ratio: 16/9;" 
  allowfullscreen
></iframe>
Step 2: Style the Container

Create a responsive container for the player to ensure it looks good on all devices.

<div style="max-width: 800px; margin: 0 auto;">
  <div style="position: relative; padding-bottom: 56.25%; height: 0;">
    <iframe 
      src="https://www.m3u8player.online/embed/m3u8?url=YOUR_STREAM_URL" 
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" 
      allowfullscreen
    ></iframe>
  </div>
</div>
Step 3: Test Your Integration

Test your integration with different stream URLs to ensure it works correctly.

You can use our test streams to verify your integration:

  • https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 (HLS)
  • https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd (DASH)
  • https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 (MP4)

Customizing the Player

You can customize the player by adding parameters to the iframe URL:

<iframe 
  src="https://www.m3u8player.online/embed/m3u8?url=YOUR_STREAM_URL&autoplay=true&muted=true" 
  width="100%" 
  height="100%" 
  style="border:none; aspect-ratio: 16/9;" 
  allowfullscreen
></iframe>

Available parameters:

  • url: The URL of the stream to play
  • autoplay: Whether to start playing automatically (true/false)
  • muted: Whether to start muted (true/false)
  • controls: Whether to show player controls (true/false)

Note on Autoplay

Most modern browsers require user interaction before allowing autoplay with sound. If you set autoplay=true, you should also set muted=true to ensure the video starts playing automatically. Users can then unmute the video if they wish.