Add volume controller
This commit is contained in:
parent
6d44cba179
commit
7ff06e549a
|
@ -12,8 +12,9 @@ import {
|
|||
Enlarge,
|
||||
ForwardSolid,
|
||||
PlaySolid,
|
||||
Refresh
|
||||
} from "@iconoir/vue";
|
||||
Refresh,
|
||||
SoundHighSolid
|
||||
} from "@iconoir/vue"
|
||||
---
|
||||
|
||||
<div class="video-controls">
|
||||
|
@ -30,6 +31,13 @@ import {
|
|||
<button id="vc-backwards"><RewindSolid /></button>
|
||||
<button id="vc-forwards"><ForwardSolid /></button>
|
||||
}
|
||||
<div class="vc-volume-controller">
|
||||
<button><SoundHighSolid/></button>
|
||||
<div class="vc-volume-controller-input">
|
||||
<span style={`background: lightblue`} class="vc-volume-bar"></span>
|
||||
<input type="range" min="0" max="1.0" step="0.01"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vc-center">
|
||||
{Live ?
|
||||
|
@ -58,7 +66,6 @@ import {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- HLS Script -->
|
||||
<!-- Required to support live streaming -->
|
||||
<!-- Script is not loaded if the video player is not set for a stream -->
|
||||
|
|
|
@ -81,6 +81,24 @@
|
|||
width: max-content;
|
||||
}
|
||||
}
|
||||
.vc-volume-controller, .vc-volume-controller-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.vc-volume-controller:hover {
|
||||
.vc-volume-controller-input {
|
||||
width: auto;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transition: 0.3s opacity, 0.4s width;
|
||||
}
|
||||
}
|
||||
.vc-volume-controller-input {
|
||||
width: 0px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.3s opacity, 0.4s width;
|
||||
}
|
||||
.vc-seek {
|
||||
background: rgb(255 255 255 / 10%);
|
||||
width: 100%;
|
||||
|
|
|
@ -24,10 +24,10 @@ import { Settings } from '@iconoir/vue'
|
|||
---
|
||||
|
||||
<div class="video-container">
|
||||
<video class="main-video" {VideoAttributes} src={Video} poster={Poster} preload="auto"></video>
|
||||
<video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
|
||||
{Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
|
||||
{Milieu ? <MilieuEffect/> : null }
|
||||
{Audio ? <Sync/> : null }
|
||||
{Milieu ? <MilieuEffect/> : null }
|
||||
{SettingsMenu ?
|
||||
<Controls Live={Live}>
|
||||
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
|
||||
|
@ -39,3 +39,19 @@ import { Settings } from '@iconoir/vue'
|
|||
<Controller/>
|
||||
<Seek/>
|
||||
</div>
|
||||
|
||||
<!-- Needs control the correct source -->
|
||||
{Audio ?
|
||||
<script is:inline>
|
||||
var ZornAudioSource = document.querySelector('.video-container audio')
|
||||
var VolumeRange = document.querySelector('.vc-volume-controller-input input')
|
||||
VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value})
|
||||
</script>
|
||||
:
|
||||
<script is:inline>
|
||||
var Player = document.querySelector('.video-container video')
|
||||
var VolumeRange = document.querySelector('.vc-volume-controller-input input')
|
||||
VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
|
||||
</script>
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue