OpenPlayer.js

OpenPlayerJS — modular, plugin-first, easier to extend

This is a media player that uses all the goods of HTML5 video/audio elements to play the most popular media in MP4/MP3, HLS and also has the ability to play VMAP / VAST / non linear / companion ads

🎉🎉🎉 OpenPlayerJS v3 is finally here!! 🎉🎉🎉

v3 is a radical internal rebuild that keeps most of the player familiar to use, but makes it much easier to extend (controls, plugins, engines) and much easier to maintain.

✅ If you use UMD/CDN today, you can keep the classic new OpenPlayerJS('id', options); player.init(); flow with some minor changes — see UMD compatibility section below.

✨ What’s new in v3

🧩 Modular packages (install only what you need)
🔌 Plugin-first architecture (UI, Ads, Engines are plugins)
🎛️ Imperative UI extensions (addElement, addControl via extendControls)
🧱 Cleaner separation of concerns (core vs…

Video

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.css" />
<!-- Adding Css CDN -->


  <video class="op-player__media" id="player" controls playsinline width="100%">
            <source src="https://archive.org/download/sample-video_202306/SampleVideo.mp4" type="video/mp4" />
  </video>

<hr>

<script src="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js"></script>
<!-- Adding JavaScript CDN -->

<script>
   // Check the `API and events` link below for more options
    const player = new OpenPlayerJS('player');
    player.init();
</script>

Audio

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.css" />
<!-- Adding Css CDN -->


<audio class="op-player__media" id="aud2" controls>
  <source src="https://archive.org/download/sample-video_202306/SampleVideo.mp4" type="audio/ogg">
</audio>

<hr>

<script src="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js"></script>
<!-- Adding JavaScript CDN -->

<script>
   // Check the `API and events` link below for more options
    const player2 = new OpenPlayerJS('aud2');
    player2.init();
</script>

YouTube Video

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.css" />
<!-- Adding Css CDN -->


        <video class="op-player__media" id="player3" controls playsinline width="100%">
            <source src="https://www.youtube.com/watch?v=xcJtL7QggTI" type="video/x-youtube" />
        </video>

<hr>

<script src="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/openplayerjs-youtube@2.3.0/dist/openplayerjs-youtube.min.js"></script>

<!-- Adding JavaScript CDNs (YouTube CDN Added) -->

<script>
   // Check the `API and events` link below for more options
    const player3 = new OpenPlayerJS('player3');
    player3.init();
</script>

iframe

<iframe src="https://www.openplayerjs.com/embed.html?file=https%3A%2F%2Farchive.org%2Fdownload%2Fsample-video_202306%2FSampleVideo.mp4&type=video&autoplay=true" style="width:100%;height:700px" frameborder="0" allow="fullscreen"></iframe>

DEV Community

OpenPlayerJS - HTML5 Video/Audio/YouTube Player - Integration

openplayerjs / openplayerjs

Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VMAP/SIMID/OMID/non-linear ads