JSFiddle - React, Tailwind, and code Playground
HTML
<!-- the player.js library must be loaded before the iframe is loaded -->
<script type="text/javascript" src="//cdn.embed.ly/player-0.1.0.min.js"></script>
<iframe id="omny-embed" src="https://omny.fm/shows/omny-website/hot-content/embed?size=square" width="400" height="400" frameborder="0" allow="autoplay"></iframe>
<div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="seek">Seek to 3s</button>
</div>
<textarea id="log" cols="100" rows="30"></textarea>
JavaScript
const player = new playerjs.Player(document.getElementById("omny-embed"));
// when the player is ready
player.on('ready', () => {
log("ready");
});
// when the player is played
player.on('play', () => {
log("play");
});
// when the player is paused
player.on('pause', () => {
log("pause");
});
// when the player is playing, receive progress events
player.on('timeupdate', (data) => {
log("timeupdate (seconds: " + data.seconds + " duration: " + data.duration + ")");
});
// when the player is paused
player.on('ended', () => {
log("ended");
});
// play button
document.getElementById('play').addEventListener('click', () => {
player.play();
})
// pause button
document.getElementById('pause').addEventListener('click', () => {
player.pause();
})
// seek to 3 seconds button
document.getElementById('seek').addEventListener('click', () => {
player.setCurrentTime(3);
})
const logTextArea = document.getElementById('log');
function log(message) {
console.log(message);
logTextArea.value += `${message}\n`
}