Fix video playback issues by using H.264 codec for video2 and standardizing video elements
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
This commit is contained in:
parent
9fc51145eb
commit
e7b9755069
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue