Spaces:
Running
Running
Add a Go Fullscreen button
#3
by
fffiloni
- opened
- public/index.html +25 -0
public/index.html
CHANGED
|
@@ -4,17 +4,42 @@
|
|
| 4 |
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
|
| 5 |
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
|
| 6 |
<script src="/mpegts.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
</head>
|
| 8 |
<body
|
| 9 |
x-data="app()" x-init="init()"
|
| 10 |
class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
|
| 11 |
<div class="flex w-full">
|
|
|
|
| 12 |
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
|
| 13 |
<!--
|
| 14 |
We probably want to display a nice logo or decoration somewhere
|
| 15 |
<img src="/hf-logo.png" class="absolute mt-2 w-[16%]" />
|
| 16 |
-->
|
| 17 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
<script>
|
| 19 |
// disable analytics (we don't use VideoJS yet anyway)
|
| 20 |
window.HELP_IMPROVE_VIDEOJS = false
|
|
|
|
| 4 |
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
|
| 5 |
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
|
| 6 |
<script src="/mpegts.js"></script>
|
| 7 |
+
<style>
|
| 8 |
+
button#fullscreen-button {
|
| 9 |
+
position: absolute;
|
| 10 |
+
right: 10px;
|
| 11 |
+
z-index: 9999;
|
| 12 |
+
margin-top: 10px;
|
| 13 |
+
}
|
| 14 |
+
</style>
|
| 15 |
</head>
|
| 16 |
<body
|
| 17 |
x-data="app()" x-init="init()"
|
| 18 |
class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
|
| 19 |
<div class="flex w-full">
|
| 20 |
+
<button id="fullscreen-button">Go Fullscreen</button>
|
| 21 |
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
|
| 22 |
<!--
|
| 23 |
We probably want to display a nice logo or decoration somewhere
|
| 24 |
<img src="/hf-logo.png" class="absolute mt-2 w-[16%]" />
|
| 25 |
-->
|
| 26 |
</div>
|
| 27 |
+
<script>
|
| 28 |
+
var video = document.getElementById('videoElement');
|
| 29 |
+
var fullscreenButton = document.getElementById('fullscreen-button');
|
| 30 |
+
|
| 31 |
+
fullscreenButton.addEventListener('click', function() {
|
| 32 |
+
if (video.requestFullscreen) {
|
| 33 |
+
video.requestFullscreen();
|
| 34 |
+
} else if (video.mozRequestFullScreen) {
|
| 35 |
+
video.mozRequestFullScreen();
|
| 36 |
+
} else if (video.webkitRequestFullscreen) {
|
| 37 |
+
video.webkitRequestFullscreen();
|
| 38 |
+
} else if (video.msRequestFullscreen) {
|
| 39 |
+
video.msRequestFullscreen();
|
| 40 |
+
}
|
| 41 |
+
});
|
| 42 |
+
</script>
|
| 43 |
<script>
|
| 44 |
// disable analytics (we don't use VideoJS yet anyway)
|
| 45 |
window.HELP_IMPROVE_VIDEOJS = false
|