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

Fix video playback issues by using H.264 codec for video2 and standardizing video elements
ci/woodpecker/push/woodpecker Pipeline was successful Details

This commit is contained in:
Leopere 2025-03-10 12:55:21 -04:00
parent 9fc51145eb
commit e7b9755069
7 changed files with 85 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docker/showerloop/public/index.html
View File

@ -14,8 +14,8 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<a class=mdl-navigation__link href=/posts/ title=Posts tabindex=0>Posts</a>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><div class=chocolate-hero-section style=background-image:url(/images/material-bg.webp)><div class=hero-row-group><div class=hero-row><div class="hero-row-item hero-text-info"><h1 class=mdl-typography--display-3>Shower Loop</h1><h2>Open Source - Open Hardware - Ecological - Economical.</h2><p>Real-time filtration, purification, recycling & heat recovery system for showers. Made in Finland, for Earth.</p></div><div class="hero-row-item hero-video"><div class=video-container>
<a href="/videos/video1.html" class="video-link" title="View full ShowerLoop Introduction video">
<video id=video-hero-1741619071 controls preload=none 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
<video id="video-hero-1741619071" controls preload="none" width="100%" height="auto" poster="/static/videos/posters/video1.webp">
<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></video>
<div class="video-overlay">
<span class="video-overlay-text">Click to view full video page</span>
@ -23,8 +23,8 @@ web browser that supports HTML5 video</p></video>
</a>
</div></div></div></div></div><div class=cta><div class=cta-row-group><div class=cta-row><div class=cta-row-item><p class="mdl-typography--headline mdl-typography--font-thin">Looking to make a change? Want to support the project?</p><a href=/components class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Check Out our Components</a></div></div></div></div><main><div class=homepage-content><div class=home-introduction><div class=chocolate-container><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class=mdl-typography--display-2>Shower Loop vs Normal Shower</h2><p class=intro-description>90% reduction in water usage and 70-90% in energy reduction for a 10 minute shower with a flow rate of 10 l/min. Savings are dependant on user behaviour and can vary. Use Just one bucket of water for a shower of any length. See the savings section for more information.</p><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save Water</h3><p>Capture, Filter, Reuse</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Saving Energy</h3><p>By reusing warm water.</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save The Planet</h3><p>Save Money</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Open Hardware</h3><p>Copy, improve, adapt, share</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Assemble It Yourself</h3><p>With manufactured and off-shell components</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Enjoy Better Showers</h3><p>The single pump provides stable water pressure and the thermostat and heater keep water nice and warm</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Off - Grid Ready</h3><p>The entire system can run on a 12V DC</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>No Plumber Needed</h3><p>Shower Loop is like a standalone appliance without connecting to water mains</p></div></div></div></div></div></div></div><div class=home-works><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class="mdl-typography--display-2 section-title">How It Works</h2><p class=intro-description>Showers are great, but pouring hot and almost drinkable water down the drain is not. Besides the obvious costs to the environment and your bills, there is also a conscious on unconscious psychological cost any time you create waste. To solve this problem we created Showerloop. It's a shower that collects, cleans and reuses the water in real time while you are showering. So now you can shower for as long as you like but with a reduced ecological impact.</p><div class="mdl-grid videos" style=justify-content:center><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=video-container>
<a href="/videos/video2.html" class="video-link" title="View full How ShowerLoop Works video">
<video id=video2 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
<video id="video2" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video2.webp">
<source src="/static/videos/video2_h264.mp4" type="video/mp4"><p>To view this video please enable JavaScript, and consider upgrading to a
web browser that supports HTML5 video</p></video>
<div class="video-overlay">
<span class="video-overlay-text">Click to view full video page</span>
@ -32,8 +32,8 @@ web browser that supports HTML5 video</p></video>
</a>
</div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=video-container>
<a href="/videos/video3.html" class="video-link" title="View full ShowerLoop Installation Guide video">
<video id=video3 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
<video id="video3" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video3.webp">
<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></video>
<div class="video-overlay">
<span class="video-overlay-text">Click to view full video page</span>

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

@ -2,27 +2,34 @@
.video-container {
position: relative;
width: 100%;
/* Add some bottom padding to ensure controls are visible */
margin-bottom: 10px;
margin-bottom: 20px;
overflow: hidden;
min-height: 300px; /* Ensure minimum height */
background-color: #000;
}
/* Ensure the video-js player is properly contained */
/* Home page video containers */
.hero-video .video-container,
.videos .video-container {
height: 300px; /* Fixed height for homepage videos */
}
/* Ensure the video player is properly contained */
.video-js {
width: 100%;
height: 0 !important;
padding-top: 56.25% !important; /* 16:9 aspect ratio */
/* Ensure controls are within the container */
height: 100% !important;
position: relative;
}
/* Position the video element correctly */
.video-js .vjs-tech {
.video-js .vjs-tech,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Fix control bar positioning */
@ -37,6 +44,12 @@
.video-container {
/* More bottom space on mobile */
margin-bottom: 15px;
min-height: 200px;
}
.hero-video .video-container,
.videos .video-container {
height: 200px;
}
}
@ -46,6 +59,7 @@
position: relative;
text-decoration: none;
color: inherit;
height: 100%;
}
.video-overlay {

BIN
docker/showerloop/public/static/videos/video2_h264.mp4 Normal file
View File

Binary file not shown.

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

@ -27,15 +27,19 @@
<style>
.video-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 20px;
padding: 0;
position: relative;
height: 70vh; /* 70% of viewport height */
min-height: 500px; /* Minimum height to ensure visibility */
background-color: #000;
}
video {
width: 100%;
height: auto;
max-height: 80vh;
background-color: #000;
height: 100%;
display: block;
object-fit: contain;
}
.video-title {
text-align: center;
@ -44,11 +48,21 @@
.video-description {
margin-top: 30px;
padding: 0 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.back-link {
margin: 20px;
display: inline-block;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.video-container {
height: 50vh;
min-height: 350px;
}
}
</style>
</head>
<body class="page">
@ -91,7 +105,7 @@
</div>
<div class="video-container">
<video id="video1" controls preload="auto" width="100%" poster="/static/videos/posters/video1.webp">
<video id="video1" controls autoplay muted preload="auto" width="100%" poster="/static/videos/posters/video1.webp">
<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>
</video>

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

@ -27,15 +27,19 @@
<style>
.video-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 20px;
padding: 0;
position: relative;
height: 70vh; /* 70% of viewport height */
min-height: 500px; /* Minimum height to ensure visibility */
background-color: #000;
}
video {
width: 100%;
height: auto;
max-height: 80vh;
background-color: #000;
height: 100%;
display: block;
object-fit: contain;
}
.video-title {
text-align: center;
@ -44,11 +48,21 @@
.video-description {
margin-top: 30px;
padding: 0 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.back-link {
margin: 20px;
display: inline-block;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.video-container {
height: 50vh;
min-height: 350px;
}
}
</style>
</head>
<body class="page">
@ -91,8 +105,8 @@
</div>
<div class="video-container">
<video id="video2" controls preload="auto" width="100%" poster="/static/videos/posters/video2.webp">
<source src="/static/videos/video2.mp4" type="video/mp4">
<video id="video2" controls autoplay muted preload="auto" width="100%" poster="/static/videos/posters/video2.webp">
<source src="/static/videos/video2_h264.mp4" type="video/mp4">
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>

BIN
docker/showerloop/public/videos/video2_h264.mp4 Normal file
View File

Binary file not shown.

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

@ -27,15 +27,19 @@
<style>
.video-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 20px;
padding: 0;
position: relative;
height: 70vh; /* 70% of viewport height */
min-height: 500px; /* Minimum height to ensure visibility */
background-color: #000;
}
video {
width: 100%;
height: auto;
max-height: 80vh;
background-color: #000;
height: 100%;
display: block;
object-fit: contain;
}
.video-title {
text-align: center;
@ -44,11 +48,21 @@
.video-description {
margin-top: 30px;
padding: 0 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.back-link {
margin: 20px;
display: inline-block;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.video-container {
height: 50vh;
min-height: 350px;
}
}
</style>
</head>
<body class="page">
@ -91,7 +105,7 @@
</div>
<div class="video-container">
<video id="video3" controls preload="auto" width="100%" poster="/static/videos/posters/video3.webp">
<video id="video3" controls autoplay muted preload="auto" width="100%" poster="/static/videos/posters/video3.webp">
<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>
</video>