openplayerjs
/
openplayerjs
Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads
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 M(PEG)-DASH, and also has the ability to play VMAP, VAST and VPAID ads.
🚨 IMPORTANT 🚨
🔧 This repository is in maintenance at this point. 🔧
No new features or additions will be added, only bug fixes.
Advantages
- Supports all modern browsers.
- No dependencies, since it is written in Typescript.
- Runs a simple but yet powerful algorithm to check the browser's autoplay capabilities across browsers.
- Supports for local and remote captions for both video and audio, even without including the
crossoriginattribute. - Enhance your player adding your own buttons. Check here for more details.
- Provides the ability to use a single VAST/VPAID source or a VAST/VPAID playlist from several different sources (including URLs and valid XML strings).
- Can play ads in infinite…
OpenPlayerJS :- https://www.openplayerjs.com/
See Demo :- https://codexdindia.blogspot.com/2023/06/openplayerjs-html5-videoaudioyoutube.html
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
Top comments (0)