Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Video controls

KittenKatja

Well-Known Coder
These questions are related to one overarching topic (the title) and I'd like them all to be answered. (not hand-picked like my previous topics)
HTML:
<html>
    <body>
        <span>Background: <input id="bg_volume" type="range" style="width: 300px;" onchange="setCookie('bg_volume',this.value,3)"> <a onclick="toggleSound('background')">Off</a></span>
        <span>Media: <input id="md_volume" type="range" style="width: 300px;" onchange="setCookie('md_volume',this.value,3)"> <a onclick="toggleSound('media')">Off</a></span>
        <span>Master: <input id="mst_volume" type="range" style="width: 300px;" onchange="setCookie('mst_volume',this.value,3)"> <a onclick="toggleSound('master')">Off</a></span>
        <audio id="media" loop controls></audio>
        <video id="background" loop muted></video>
    </body onload="loadSetup()">
</html>
JavaScript:
function setBackground(url) {document.getElementById("background").src=url;setCookie("background", url, 3);setSelected()}
function setCookie(cname, cvalue, exdays) {const d = new Date();d.setTime(d.getTime() + (exdays*24*60*60*1000));let expire = "expires="+ d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expire + ";path=/";}
function getCookie(cname, cfallback) {let n = cname + "=";let dc = decodeURIComponent(document.cookie);let ca = dc.split(';');for(let i = 0; i <ca.length; i++) {let c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(i);} if (c.indexOf(n) == 0) {return c.substring(n.length, c.length);}} return cfallback;}
function loadSetup() {setBackground(getCookie("background","file:///..."))}
How do I take the video/audio controls from the video/audio elements and put them somewhere else?
I'd also like to write their values into a cookie, so I can fetch the last selected option, or the last set volume settings, and apply them on reload.
If it's possible to write a download prompt, can I also set a suggestion file name?
 
My head is breaking from the code not working and rewriting until it does something at all.
HTML:
<html>
    <body>
        <video id="background_blur"></video>
        <video id="background"></video>
        <video id="view_video" class="media"></video>
        <audio id="view_audio" class="media" style="height: 54px;"></audio>
        <image id="view_pic" class="media"></image>
        <div id="div">
            <span title="Background"><input id="bg_volume" type="range" min="0" max="1" step="0.05" value="1" onchange="setVolume('background',this.value)"><a id="bg_sound" onclick="toggleSound('background','bg_volume')">On</a></span>
            <span title="Media"><input id="md_volume" type="range" min="0" max="1" step="0.05" value="1" onchange="let a = this.value * document.getElementById('mst_volume').value;setVolume('view_video',a);setVolume('view_audio',a)"><a id="md_sound" onclick="toggleSound('view_video');toggleSound('view_audio')">Off</a></span>
            <span title="Master"><input id="mst_volume" type="range" min="0" max="1" step="0.05" value="1"><a id="mst_sound">On</a></span>
        </div>
    </body>
</html>
CSS:
body>[id*="background"] {position: fixed;transform: translate(-50%, -50%);left: 50%;top: 50%;height: 100%;width: auto;}
#background_blur {height: auto;width: 100%;filter: blur(20px);}
#div {width: fit-content;height: fit-content;display: flex;flex-direction: row;gap: 10px;justify-content: space-between;position: fixed;overflow-y: scroll}
.media {display: none;position: absolute;width: 300px;height: auto;left: calc(100% - 300px);margin-left: -5px;margin-top: 5px;opacity: .5;transition: opacity .3s cubic-bezier(.5,.5,.5,.5);}
.media:hover {opacity: 1;}
JavaScript:
function setVolume(a,b) {if(document.getElementById('mst_sound').innerHTML == "On"){document.getElementById(a).volume = b}}
function toggleSound(a,b) {switch(document.getElementById(a).volume == 0){case false:setVolume(a,0);this.innerHTML = "Off";break;case true:let c = b * document.getElementById('mst_volume').value;setVolume(a,c);this.innerHTML = "On"}}
Error: "Uncaught TypeError: Failed to set the 'volume' property on 'HTMLMediaElement': The provided double value is non-finite. at setVolume (redacted.js:15:119) at toggleSound (redacted.js:16:220) at HTMLAnchorElement.onclick (redacted.htm:367:221)"
First question, why are you going from 0 to 1, in .05 increments? If I'm not mistaken, those have to be incremented in whole integers. Makes no sense, at least for the volumes. Your UI has to be something a regular user can easily recognize

Also literally tells you where the error is coming from
`The provided double value is non-finite. at setVolume (redacted.js:15:119) at toggleSound (redacted.js:16:220) at HTMLAnchorElement.onclick (redacted.htm:367:221)`

Update:
I stand corrected, you can use doubles, you just have to parse
see:
 
Last edited:

Latest posts

Buy us a coffee!

Back
Top Bottom