Přidání ovládání hlasitosi

closes #1
David Zálešák 4 years ago
parent b3836d47a6
commit 426fd2bf96

@ -51,10 +51,10 @@ article img {
max-width: 25vh; max-width: 25vh;
max-height: 100%; max-height: 100%;
margin: 0.5em 1em; margin: 0.5em 1em;
padding: .2em; padding: 0.2em;
clear: both; clear: both;
border: 1px solid #bbb; border: 1px solid #bbb;
border-radius: .2rem; border-radius: 0.2rem;
float: left; float: left;
clear: left; clear: left;
} }
@ -245,3 +245,59 @@ progress::-webkit-progress-bar {
margin-left: min(-14px, -0.5vh); margin-left: min(-14px, -0.5vh);
cursor: pointer; cursor: pointer;
} }
#video-volume {
position: absolute;
left: -7.5vh;
bottom: -0.5em;
margin-left: 1.5em;
margin-bottom: 7.5vh;
width: 15vh;
height: 1em;
-webkit-transform: rotate(-90deg);
}
#volume {
position: absolute;
left: 1em;
z-index: 20;
width: 100%;
height: 100%;
margin: 0;
appearance: none;
background: transparent;
cursor: pointer;
}
#volume::-moz-range-thumb {
height: 100%;
width: 0;
appearance: none;
border: none;
border-radius: 0;
}
#volume::-webkit-slider-thumb {
height: 100%;
width: 0;
appearance: none;
border: none;
border-radius: 0;
}
#volume-bar {
position: absolute;
left: 1em;
background-color: #616161;
width: 100%;
height: 100%;
z-index: 10;
}
#volume-bar-value {
position: absolute;
bottom: 0;
background-color: #ffa800;
width: 100%;
height: 100%;
z-index: 15;
}

@ -34,10 +34,17 @@
<progress id="progress-bar" value="0" min="0"></progress> <progress id="progress-bar" value="0" min="0"></progress>
<input class="seek" id="seek" value="0" min="0" type="range" step="1"> <input class="seek" id="seek" value="0" min="0" type="range" step="1">
</div> </div>
<div id="video-volume">
<div id="volume-bar">
<div id="volume-bar-value"></div>
</div>
<input class="" id="volume" value="100" min="0" max="100" type="range" step="1">
</div>
</div> </div>
</main> </main>
<article> <article>
</article> </article>
</body> </body>
<script src="./js/main.js"></script> <script src="./js/main.js"></script>

@ -70,6 +70,9 @@ class Controller {
}.bind(this) }.bind(this)
); );
const volume = document.getElementById("volume");
volume.addEventListener("input", this.view.videoPlayer.updateVolume);
document.addEventListener( document.addEventListener(
"keyup", "keyup",
function (e) { function (e) {

@ -46,6 +46,17 @@ class VideoPlayer {
console.log("here"); console.log("here");
} }
} }
updateVolume() {
const volume = document.getElementById("volume");
const volumeBar = document.getElementById("volume-bar-value");
if (video.muted) {
video.muted = false;
}
video.volume = volume.value / 100;
volumeBar.style.width = volume.value + "%";
}
// Play pause // Play pause
togglePlay() { togglePlay() {
if (this.video.paused || this.video.ended) { if (this.video.paused || this.video.ended) {

Loading…
Cancel
Save