Skip to content

Instantly share code, notes, and snippets.

@StoneyEagle

StoneyEagle/NoMercyPlayer.html

Last active April 4, 2023 23:21
Show Gist options
  • Save StoneyEagle/df1ced62122695a3144928e69b241598 to your computer and use it in GitHub Desktop.
Save StoneyEagle/df1ced62122695a3144928e69b241598 to your computer and use it in GitHub Desktop.
Download ZIP
NoMercyPlayer example
Raw
NoMercyPlayer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NoMercyPlayer API</title>
<script src="./dist/app.js?v=kw4n5l2n45" defer></script>
<link href="./dist/nomercyplayer.css?v=kw4n5l2n45" rel="stylesheet">
</head>
<body class="flex flex-col items-center justify-center w-screen h-screen gap-4 text-white bg-zinc-900">
<div id="container" class="flex flex-col justify-center w-full gap-8 px-8 sm:flex-row">
<div id="wrapper2" class="flex flex-col items-center w-full max-w-4xl gap-2 text-center">
<span>JWPlayer</span>
<video id="player2"></video>
</div>
<div id="wrapper1" class="flex flex-col items-center w-full max-w-4xl gap-2 text-center">
<span>VideoJS</span>
<video id="player1" class="video-js"></video>
</div>
</div>
<div class="flex flex-wrap items-center justify-center gap-4">
<button type="button"
class="w-24 text-white bg-gradient-to-r from-purple-700 to-purple-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-3 py-1.5 text-center mr-2 mb-2"
onClick="play()">
Play
</button>
<button type="button"
class="w-24 text-white bg-gradient-to-r from-purple-700 to-purple-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-3 py-1.5 text-center mr-2 mb-2"
onClick="pause()">
Pause
</button>
<button type="button"
class="w-24 text-white bg-gradient-to-r from-purple-700 to-purple-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-3 py-1.5 text-center mr-2 mb-2"
onClick="next()">
Next
</button>
<button type="button"
class="w-24 text-white bg-gradient-to-r from-purple-700 to-purple-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-3 py-1.5 text-center mr-2 mb-2"
onClick="prev()">
Prev
</button>
<button type="button"
class="w-24 text-white bg-gradient-to-r from-purple-700 to-purple-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-3 py-1.5 text-center mr-2 mb-2"
onClick="sync()">
Sync
</button>
</div>
<script type="module">
import VideoPlayer from './dist/nomercyplayer.js?v=kw4n5l2n45';
const config = {
muted: false,
controls: false,
chapters: true,
preload: 'auto',
playlist: 'https://api.nomercy.tv/playlist-jw?v=18',
controlsTimeout: 3000,
doubleClickDelay: 500,
playbackRates: [
0.25,
0.5,
0.75,
1,
1.25,
1.5,
1.75,
2,
],
};
const js = new VideoPlayer('videojs', config, 'player1');
window.js = js;
js.on('theaterMode', (data) => {
// handle resize container
console.log('theaterMode', data);
if (data) {
document.querySelector('body').classList.remove('justify-center');
document.querySelector('#container').classList.remove('sm:flex-row');
document.querySelector('#wrapper1').classList.remove('max-w-4xl');
document.querySelector('#wrapper1').classList.remove('w-full');
document.querySelector('#wrapper1').classList.add('w-2/3');
} else {
document.querySelector('body').classList.add('justify-center');
document.querySelector('#container').classList.add('sm:flex-row');
document.querySelector('#wrapper1').classList.add('max-w-4xl');
document.querySelector('#wrapper1').classList.add('w-full');
document.querySelector('#wrapper1').classList.remove('w-2/3');
}
});
js.on('pip', (data) => {
console.log('pip', data);
if (data) {
document.querySelector('#wrapper1').classList.add('absolute');
document.querySelector('#wrapper1').classList.add('bottom-4');
document.querySelector('#wrapper1').classList.add('right-4');
document.querySelector('#wrapper1').classList.add('max-w-sm');
} else {
document.querySelector('#wrapper1').classList.remove('absolute');
document.querySelector('#wrapper1').classList.remove('bottom-4');
document.querySelector('#wrapper1').classList.remove('right-4');
document.querySelector('#wrapper1').classList.remove('max-w-sm');
}
});
config.key = 'W7zSm81+mmIsg7F+fyHRKhF3ggLkTqtGMhvI92kbqf/ysE99';
const jw = new VideoPlayer('jwplayer', config, 'player2');
window.jw = jw;
jw.on('theaterMode', (data) => {
// handle resize container
console.log('theaterMode', data);
if (data) {
document.querySelector('body').classList.remove('justify-center');
document.querySelector('#container').classList.remove('sm:flex-row');
document.querySelector('#wrapper2').classList.remove('max-w-4xl');
document.querySelector('#wrapper2').classList.remove('w-full');
document.querySelector('#wrapper2').classList.add('w-2/3');
} else {
document.querySelector('body').classList.add('justify-center');
document.querySelector('#container').classList.add('sm:flex-row');
document.querySelector('#wrapper2').classList.add('max-w-4xl');
document.querySelector('#wrapper2').classList.add('w-full');
document.querySelector('#wrapper2').classList.remove('w-2/3');
}
});
jw.on('pip', (data) => {
console.log('pip', data);
if (data) {
document.querySelector('#wrapper2').classList.add('absolute');
document.querySelector('#wrapper2').classList.add('bottom-4');
document.querySelector('#wrapper2').classList.add('right-4');
document.querySelector('#wrapper2').classList.add('max-w-sm');
} else {
document.querySelector('#wrapper2').classList.remove('absolute');
document.querySelector('#wrapper2').classList.remove('bottom-4');
document.querySelector('#wrapper2').classList.remove('right-4');
document.querySelector('#wrapper2').classList.remove('max-w-sm');
}
});
</script>
</body>
</html>
@StoneyEagle
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment