AI-WebTV / public /index.html
matthoffner's picture
Add play button for devices with autoplay restrictions
14bc85b
raw
history blame
2.41 kB
<html>
<head>
<title>AI Web TV 🤗</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
<script src="/mpegts.js"></script>
</head>
<body class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
<div class="flex w-full">
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
</div>
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
<!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
<script>
(() => {
if (mpegts.getFeatureList().mseLivePlayback) {
var videoElement = document.getElementById('videoElement')
var player = mpegts.createPlayer({
type: 'flv', // could also be mpegts, m2ts, flv
isLive: true,
url: 'https://jbilcke-hf-media-server.hf.space/live/webtv.flv'
})
player.attachMediaElement(videoElement)
player.on(mpegts.Events.ERROR, function (err) {
console.log('got an error:', err)
if (err.type === mpegts.ErrorTypes.NETWORK_ERROR) {
console.log('Network error')
}
});
player.load()
videoElement.addEventListener('ended', function() {
console.log('Stream ended, trying to reload...');
setTimeout(() => {
console.log('Reloading the page..')
//Unloading and loading the source again
// player.unload()
// player.load()
window.location.reload()
}, 1200)
}, false);
// Handle autoplay restrictions.
var promise = videoElement.play();
if (promise !== undefined) {
videoElement.addEventListener('click', function() {
videoElement.play();
});
}
player.play()
}
})()
</script>
</body>
</html>