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

Replace VideoJS with native HTML5 video player for dedicated video pages
ci/woodpecker/push/woodpecker Pipeline was successful Details

This commit is contained in:
Leopere 2025-03-10 12:28:24 -04:00
parent 89cda52027
commit 9fc51145eb
3 changed files with 15 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,13 +22,7 @@
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<!-- Video.js CSS and JS --> <!-- Video.js CSS and JS -->
<link rel="stylesheet" href="/static/css/video-js.min.css">
<link rel="stylesheet" href="/static/css/custom-video.css"> <link rel="stylesheet" href="/static/css/custom-video.css">
<link rel="stylesheet" href="/static/css/chrome-video-fallback.css">
<script src="/static/js/vendor/video.min.js"></script>
<script src="/static/js/vendor/videojs-http-streaming.min.js"></script>
<script src="/static/js/videojs-player.min.js"></script>
<script src="/static/js/chrome-video-fallback.min.js"></script>
<style> <style>
.video-container { .video-container {
@ -37,17 +31,11 @@
padding: 20px; padding: 20px;
position: relative; position: relative;
} }
.video-js { video {
width: 100%; width: 100%;
height: 0 !important; height: auto;
padding-top: 56.25% !important; /* 16:9 aspect ratio */ max-height: 80vh;
} background-color: #000;
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.video-title { .video-title {
text-align: center; text-align: center;
@ -103,8 +91,7 @@
</div> </div>
<div class="video-container"> <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"> <video id="video1" controls preload="auto" width="100%" 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"> <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> <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video> </video>

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

@ -22,13 +22,7 @@
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<!-- Video.js CSS and JS --> <!-- Video.js CSS and JS -->
<link rel="stylesheet" href="/static/css/video-js.min.css">
<link rel="stylesheet" href="/static/css/custom-video.css"> <link rel="stylesheet" href="/static/css/custom-video.css">
<link rel="stylesheet" href="/static/css/chrome-video-fallback.css">
<script src="/static/js/vendor/video.min.js"></script>
<script src="/static/js/vendor/videojs-http-streaming.min.js"></script>
<script src="/static/js/videojs-player.min.js"></script>
<script src="/static/js/chrome-video-fallback.min.js"></script>
<style> <style>
.video-container { .video-container {
@ -37,17 +31,11 @@
padding: 20px; padding: 20px;
position: relative; position: relative;
} }
.video-js { video {
width: 100%; width: 100%;
height: 0 !important; height: auto;
padding-top: 56.25% !important; /* 16:9 aspect ratio */ max-height: 80vh;
} background-color: #000;
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.video-title { .video-title {
text-align: center; text-align: center;
@ -103,8 +91,7 @@
</div> </div>
<div class="video-container"> <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"> <video id="video2" controls preload="auto" width="100%" 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"> <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> <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video> </video>

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

@ -22,13 +22,7 @@
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<!-- Video.js CSS and JS --> <!-- Video.js CSS and JS -->
<link rel="stylesheet" href="/static/css/video-js.min.css">
<link rel="stylesheet" href="/static/css/custom-video.css"> <link rel="stylesheet" href="/static/css/custom-video.css">
<link rel="stylesheet" href="/static/css/chrome-video-fallback.css">
<script src="/static/js/vendor/video.min.js"></script>
<script src="/static/js/vendor/videojs-http-streaming.min.js"></script>
<script src="/static/js/videojs-player.min.js"></script>
<script src="/static/js/chrome-video-fallback.min.js"></script>
<style> <style>
.video-container { .video-container {
@ -37,17 +31,11 @@
padding: 20px; padding: 20px;
position: relative; position: relative;
} }
.video-js { video {
width: 100%; width: 100%;
height: 0 !important; height: auto;
padding-top: 56.25% !important; /* 16:9 aspect ratio */ max-height: 80vh;
} background-color: #000;
.video-js .vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.video-title { .video-title {
text-align: center; text-align: center;
@ -103,8 +91,7 @@
</div> </div>
<div class="video-container"> <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"> <video id="video3" controls preload="auto" width="100%" 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"> <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> <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video> </video>