OpenPlayerJS - HTML5 Video/Audio/YouTube Player - Integration

GitHub :- https://github.com/openplayerjs/openplayerjs/

OpenPlayerJS :- https://www.openplayerjs.com/

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>

Create Your iframe code Here :- https://www.openplayerjs.com/#try

Checkout the Demo Below :-

OpenPlayerJS Examples

OpenPlayerJS Examples

Video

---

<br>
const player = new OpenPlayerJS(&#39;player&#39;);<br>
player.init();<br>

Audio

---

<br>
const player2 = new OpenPlayerJS(&#39;aud2&#39;);<br>
player2.init();<br>

YouTube Video

---

<br>
const player3 = new OpenPlayerJS(&#39;player2&#39;);<br>
player3.init();<br>

iframe