colin
/
ShowerLoop-cc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix video player initialization and improve video container styling
ci/woodpecker/push/woodpecker Pipeline failed Details

This commit is contained in:
Leopere 2025-03-10 12:25:16 -04:00
parent 70cf8bf47b
commit 89cda52027
5 changed files with 90 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docker/showerloop/public/static/css/custom-video.css
View File

@ -10,10 +10,19 @@
/* Ensure the video-js player is properly contained */
.video-js {
width: 100%;
height: auto;
height: 0 !important;
padding-top: 56.25% !important; /* 16:9 aspect ratio */
/* Ensure controls are within the container */
position: relative;
aspect-ratio: 16/9;
}
/* Position the video element correctly */
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Fix control bar positioning */
@ -25,11 +34,6 @@
/* Additional responsive adjustments */
@media (max-width: 768px) {
.video-js {
/* Ensure the video fits on smaller screens */
max-height: 300px;
}
.video-container {
/* More bottom space on mobile */
margin-bottom: 15px;

38
docker/showerloop/public/static/js/videojs-player.min.js vendored
View File

@ -1 +1,37 @@
document.addEventListener("DOMContentLoaded",function(){const e=document.querySelectorAll("video:not(.video-js)");e.length&&e.forEach(function(e){const t=e.id||"video-"+Math.floor(1e6*Math.random());e.id=t,e.classList.add("video-js"),e.classList.add("vjs-big-play-centered"),videojs(t,{controls:!0,autoplay:!1,preload:"auto"})});const t=document.querySelectorAll("video.video-js");t.forEach(function(e){const t=e.id;t&&!videojs.getPlayers()[t]&&videojs(t)})});
document.addEventListener("DOMContentLoaded", function() {
// Initialize non-video-js videos
const nonVideoJsVideos = document.querySelectorAll("video:not(.video-js)");
if (nonVideoJsVideos.length) {
nonVideoJsVideos.forEach(function(video) {
const videoId = video.id || "video-" + Math.floor(Math.random() * 1000000);
video.id = videoId;
video.classList.add("video-js");
video.classList.add("vjs-big-play-centered");
// Check if player is already initialized
if (!videojs.getPlayers()[videoId]) {
videojs(videoId, {
controls: true,
autoplay: false,
preload: "auto"
});
}
});
}
// Initialize video-js videos that don't have data-setup attribute
const videoJsVideos = document.querySelectorAll("video.video-js:not([data-setup])");
videoJsVideos.forEach(function(video) {
const videoId = video.id;
// Check if player is already initialized
if (videoId && !videojs.getPlayers()[videoId]) {
videojs(videoId, {
controls: true,
autoplay: false,
preload: "auto"
});
}
});
// Don't re-initialize videos that already have data-setup attribute
// as they will be automatically initialized by Video.js
});

15
docker/showerloop/public/videos/video1.html
View File

@ -35,6 +35,19 @@
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
}
.video-js {
width: 100%;
height: 0 !important;
padding-top: 56.25% !important; /* 16:9 aspect ratio */
}
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-title {
text-align: center;
@ -90,7 +103,7 @@
</div>
<div class="video-container">
<video id="video1" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video1.webp" data-setup="{}">
<video id="video1" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video1.webp">
<source src="/static/videos/hls/video1/master.m3u8" type="application/x-mpegurl">
<source src="/static/videos/video1.mp4" type="video/mp4">
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>

15
docker/showerloop/public/videos/video2.html
View File

@ -35,6 +35,19 @@
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
}
.video-js {
width: 100%;
height: 0 !important;
padding-top: 56.25% !important; /* 16:9 aspect ratio */
}
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-title {
text-align: center;
@ -90,7 +103,7 @@
</div>
<div class="video-container">
<video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video2.webp" data-setup="{}">
<video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video2.webp">
<source src="/static/videos/hls/video2/master.m3u8" type="application/x-mpegurl">
<source src="/static/videos/video2.mp4" type="video/mp4">
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>

15
docker/showerloop/public/videos/video3.html
View File

@ -35,6 +35,19 @@
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
}
.video-js {
width: 100%;
height: 0 !important;
padding-top: 56.25% !important; /* 16:9 aspect ratio */
}
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-title {
text-align: center;
@ -90,7 +103,7 @@
</div>
<div class="video-container">
<video id="video3" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video3.webp" data-setup="{}">
<video id="video3" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video3.webp">
<source src="/static/videos/hls/video3/master.m3u8" type="application/x-mpegurl">
<source src="/static/videos/video3.mp4" type="video/mp4">
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>