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

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?
 
Sort by date Sort by votes
KittenKatja said:
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?
Click to expand...


1) it all depends on how you, as the designer, would like the UI to look. You could go 2 main routes:
a) move each control individually,
b) group them together inside a container div and move them as a group.

In either case, you can do this by grabbing the elements by their id and/or class, and giving them the styling and positions desired. It's called CSS, or Cascading Style Sheets :D.

2) You can definitely add the values to the cookie :). All you have to do is use the same getting/setting methods you have been using to get the values from the inputs, and setting the cookie values.

3) It is possible to write a download prompt. This can be done by adding the "download" attribute to the anchor tag. Adding this, will open the save dialog. You can also suggest a download name. This can be done by giving the "download" attribute a value. Examples below:

Code: 
<a href="random.png" download>Save Me!</a>


Code: 
<a href="random.png" download="saveme.png">Save Me!</a>
 
Upvote 0 Downvote
Oh, I think you took it too literally...

I still don't know how to do what you said about the controls part.
I described it as a drag & drop, but I meant in the -IDK the word- sense.
Like, the controls are on the video pseudo-elements, but I want to use JS to have the other input-elements to have that control instead.
The best analogy would be to make a screenshot of a video player, cut the controls out and move them somewhere else. (Patrick Star Move Meme)
 
Upvote 0 Downvote
KittenKatja said:
Oh, I think you took it too literally...

I still don't know how to do what you said about the controls part.
I described it as a drag & drop, but I meant in the -IDK the word- sense.
Like, the controls are on the video pseudo-elements, but I want to use JS to have the other input-elements to have that control instead.
The best analogy would be to make a screenshot of a video player, cut the controls out and move them somewhere else. (Patrick Star Move Meme)
Click to expand...
I've always used jquery ui. They have some nice UI's you can customize, but as far as vanilla js goes... here's something for ya

here's the jquery ui of it

Draggable | jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
jqueryui.com jqueryui.com

also, if I may make a suggestion.. one-liners are great for performance, but a hell to debug ;) don't be afraid to expand your functions lol. It will make it easier for everyone wanting to learn and help out
 
Last edited:
Upvote 0 Downvote
XD ok.. so you want those elements to control the video and audio elements, which is fine lol. So now, let's break it down a bit more. What do you want the input element to control? What would you want the anchor element to control?
 
Upvote 0 Downvote
Is this behavior normal? Why not troll on other websites, like on Yahoo Questions, where you can meet Storm_Surge. (maybe you were even part of Team Avolition to begin with)

I want the <input> to control the sound volume, and the <a> to control the mute button.
I want the cookie (on local) to set the <input> and <a> values, in onload.
If I have an array of <a> elements with setBackground('file:///...'), I want the last clicked <a> to be highlighted with a class "active-bg" using setSelected() and every other element in that array have their "active-bg" class removed.
I want to build proper sentences where every sentence doesn't start with "I want", like you forced me to.
Is it possible to target an element without an ID, but has a specific word inside the onclick attribute? It's cookie and setSelected() combined.
 
Upvote 0 Downvote
KittenKatja said:
Is this behavior normal? Why not troll on other websites, like on Yahoo Questions, where you can meet Storm_Surge. (maybe you were even part of Team Avolition to begin with)

I want the <input> to control the sound volume, and the <a> to control the mute button.
I want the cookie (on local) to set the <input> and <a> values, in onload.
If I have an array of <a> elements with setBackground('file:///...'), I want the last clicked <a> to be highlighted with a class "active-bg" using setSelected() and every other element in that array have their "active-bg" class removed.
I want to build proper sentences where every sentence doesn't start with "I want", like you forced me to.
Is it possible to target an element without an ID, but has a specific word inside the onclick attribute? It's cookie and setSelected() combined.
Click to expand...
Please believe me when I tell you I see a lot of ambiguous specs for tasks at work. This is something you will see a lot of, depending on who is writing the specifications. I was merely asking for clarification and wanting you to see that being a bit more specific can come along way :).
 
Upvote 0 Downvote
KittenKatja said:
Is this behavior normal? Why not troll on other websites, like on Yahoo Questions, where you can meet Storm_Surge. (maybe you were even part of Team Avolition to begin with)

I want the <input> to control the sound volume, and the <a> to control the mute button.
I want the cookie (on local) to set the <input> and <a> values, in onload.
If I have an array of <a> elements with setBackground('file:///...'), I want the last clicked <a> to be highlighted with a class "active-bg" using setSelected() and every other element in that array have their "active-bg" class removed.
I want to build proper sentences where every sentence doesn't start with "I want", like you forced me to.
Is it possible to target an element without an ID, but has a specific word inside the onclick attribute? It's cookie and setSelected() combined.
Click to expand...
In regards to your bonus lol, it is possible. So you can target an element in several ways...
a) if you want to be straight forward with it and only target 1 element, an id
b) if you want to straight forward with it, and target multiple elements, a css class name
c) if you want to ruin your life, you can use the attributes of the elements. Something to the tune of...
HTML: 
<input type="text" id="myInput" class="form-input" data-foo="myFoo" />
JavaScript: 
var element = document.querySelector('input[data-foo="myFoo"]');
 
Last edited by a moderator:
Upvote 0 Downvote
OK, this could go on for a lot longer, so Kitten are you talking about the three controls labeled Background, Media, and Master
or the two controls under the video screen, the play/pause, and the volume?

If it's the first group of three then what do they control?
 
Upvote 0 Downvote
When it comes to your specification
Code: 
If I have an array of <a> elements with setBackground('file:///...'), I want the last clicked <a> to be highlighted with a class "active-bg" using setSelected() and every other element in that array have their "active-bg" class removed.
You can go a few ways with it.

a) If you are never removing items from the array, or swapping items in the array, what you can do is get the selected element, iterate through the array, and for each element that doesn't match the selected element, remove the desired css class.

b) going along with the thought of never changing the array, you could also save off the index of the selected element, iterate through the array, and remove the class for the elements not in the index.

c) if you are changing the array, then safest bet is to use similar functionality as (a)

in all cases, you're going to have to iterate through the array
 
Upvote 0 Downvote
Maybe "array" wasn't the correct word to be used; ["item1","item2"] wasn't meant.
HTML: 
<div id="array">
<a onclick="setBackground('file:///...')">Item1</a>
<a onclick="setBackground('file:///...')">item2</a>
</div>

Antero360 said:
As far as the volume control is concerned, you can give the input a type of range, and it will act as a slider.
Code: 
  <input type="range" id="volumeSlider" name="volume-slider" min="0" max="100" value="90" step="10">
see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
Click to expand...
This is giving me the tools to actually get a value out of the range input, but I still don't know how to apply it to the <video>/<audio> audio volume controls.
HTML: 
<input id="bg_volume" type="range" min="0" max="100" step="1" value="100" oninput="setVolume('background')">
JavaScript: 
function setVolume(ele) {let v = this.value * (document.getElementById('mst_volume').value / 100);document.getElementById(ele)/*idk what to write here*/ = v}
 
Upvote 0 Downvote
You can use the play() and pause() functions to play and pause a video. To change the volume, use the volume property.
HTML: 
<video id="video">
  <source src="video.mp4" type="video/mp4">
</video>

<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="mute()">Mute</button>
<input type="range" min="0" max="1" step="0.1" onchange="changeVolume()">
JavaScript: 
function play() {
  document.getElementById("video").play();
}

function pause() {
  document.getElementById("video").pause();
}

function mute() {
  document.getElementById("video").volume = 0;
}

function changeVolume() {
  document.getElementById("video").volume = document.getElementById("volume").value;
}

Check this link: https://edutechwiki.unige.ch/en/HTML5_video_and_JavaScript
 
Last edited:
Upvote 0 Downvote
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)"
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom