Develop Reference

Save a css display value in Local Storage

I have a page with some videos showing like a web course: so after the first one finishes, the second one appears and so on.
The code used is very simple, with a display none/block function.
**What I want to do is to save in localStorage when a video changes from display "none" to "block", and retrieve it on Page Load** (because I don't want to start again from video 1 every time I load or refresh the page).
Some conditions:
I must use a specific internal platform, very old, to load my code. Is customized by the place where I work
I can't use external libraries or tag too new
I search for the simpliest, pure solution code
the code down is a part of the one I used, I assure this is the only working way, I tried better ways but nothing
Here the code with 2 videos:
html
<script type="text/javascript">
document.getElementById('Video1').addEventListener('ended',myHandler,false);
function myHandler(e) {
var video2 = document.getElementById("Video2");
if ( video2.style.display === "none") {
video2.style.display = "block";
} else {
}
}
</script>
<video id="Video1" controls="" width="320" height="240">
<source src="https://www.tdblog.it/wp-content/uploads/2020/07/Video_aruba_200721_04.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="Video2" controls="" style="display:none; float:right;" width="320" height="240">
<source src="https://www.tdblog.it/wp-content/uploads/2020/06/1160438711001_6017851885001_6017852130001.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Thanks for the help!
Here the new code:
<script type="text/javascript">
document.getElementById('Video1').addEventListener('ended',myHandler,false);
function myHandler(e) {
var video2 = document.getElementById("Video2");
if ( video2.style.display === "none") {
video2.style.display = "block";
localStorage.setItem('video1Completed', 'true');
} else {
}
}
window.onload = function(){
localStorage.getItem('video1Completed')=='true' {
Video2.style.display = "block";
} else {
Video2.style.display = "none";
}
}
</script>
<video id="Video1" controls="" width="320" height="240">
<source src="https://www.tdblog.it/wp-
content/uploads/2020/07/Video_aruba_200721_04.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="Video2" controls="" style="display:none; float:right;"
width="320" height="240">
<source src="https://www.tdblog.it/wp-
content/uploads/2020/06/1160438711001_6017851885001_6017852130001.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>

You forgot the if statement plus you need to get the video2 element.
document.getElementById('Video1').addEventListener('ended', myHandler, false);
function myHandler(e) {
var video2 = document.getElementById("Video2");
if (video2.style.display === "none") {
video2.style.display = "block";
localStorage.setItem('video1Completed', 'true');
} else {
}
}
window.onload = function() {
var video2 = document.getElementById("Video2");
if (localStorage.getItem('video1Completed') == 'true') {
video2.style.display = "block";
} else {
video2.style.display = "none";
}
}

Extract controls from HTML video

I was wondering if it is possible to extract the controls of a video. I mean that instead of being the controls on top of the video, that these were separate and that the video could be controlled from there. Thank you in advance.

I know you can disable your browser's controls by not setting the attribute controls. see https://www.w3schools.com/TAgs/att_video_controls.asp
Then you can define your own custom controls by adding event handlers to the UI elements you wish to use for controlling playback.
function playBtnHandler(event) {
myVideo.play();
}
myBtn.addEventListener("click", playBtnHandler);

U can try this...............
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" autoplay>
// Replace these with your own video files.
<source src="1.mp4" type="video/mp4" />
Download the video file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>

Video Onclick function for playing a video

I have designed a video question using Html and i have removed controls for video using Jquery, so i need to have onclick functionality like when we click on the video it should be played and if am clicking again it should be paused .

Below your html code
<video id="video" width="1180" height="664" poster="put here your poster url" preload="auto">
<source src="put here your video url" type="video/mp4">
</video>
Below jquery code
var video = document.getElementById("video");
video.addEventListener("click", function(event) {
if (video.paused == true) {
video.play();
}
else{
video.pause();
}
});

You can play or pause a vide like this. This should be able to toggle:
$(document).ready(function(){
$('YOUR_VIDEO_ID_OR_CLASS').click(function(){
$(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
});
});

An easy way could be like this:
$(function() {
var video = $('video')[0];
$('button').click(function() {
if( video.paused ) {
video.play();
}
else {
video.pause();
}
});
});
Fiddle Example
You can change 'button' to another element as trigger for the play/pause.
You can also change it to the video it self, if you want just to click on the video to play and pause it.

This is what you need:
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
}
else
{
video.pause();
button.textContent = ">";
}
}
</script>

Toggle mute audio of video on click

I'am trying to mute the audio of a video on click, but for some reason it won't mute..
html:
<video src="background/background1.mp4" autoplay="autoplay" loop="loop" id="background"> </video>
<img src="button/audio_on.png" id="audio"/>
jquery/javascript solutions I have tried:
$('#audio').click(function() {
if( $("#background").prop('muted', true) ) {
$("#background").prop('muted', false);
alert('music paused');
} else {
$("#background").prop('muted', true);
alert('music playing');
}
});
Note: It does alert 'music paused' but never alerts 'music playing'
second method I've tried (note: it does change the img source):
//change music icon
$("#audio").on('dblclick', function(){
$("#audio").attr("src","button/audio_on");
document.getElementById("#background").volume = 1;
});
$("#audio").on('click', function(){
$("#audio").attr("src","button/audio_off");
document.getElementById("#background").volume = 0;
});
Does anyone know why it won't mute the audio of my video?

Try using the following code to toggle the audio of your video:
$("#audio").click( function (){
$("#background").prop('muted', !$("#background").prop('muted'));
});

How do I use Javascript to toggle play/pause for multiple videos when I click on the video?

When I add onclick="playPause()" to just one video it works great. I click the video and it'll play or pause just like I want it to. If I have more than one video, even if the videos have different IDs (for example: video id="v1" and video id="v2") whenever I click on one video it'll always play one specific video. Using this script on multiple videos seems to only allow play/pause toggling on one video. Here's the html and script I'm using:
<video id="v1" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v2" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v2");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v3" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v3");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
BTW: not a big deal, but I've noticed the original Play button doesn't work anymore when I use this script. Is there a way to fix that?

You can pass the clicked element as an argument to the function like onclick="playPause(this)", then you just have a single definition:
function playPause (video) {
if (video.paused)
video.play();
else
video.pause();
}
Or alternatively you can find all videos and bind event listeners to them iteratively using document.getElementsByTagName() or document.querySelectorAll():
document.querySelectorAll('video').forEach((video) => {
video.addEventListener('click', function (event) {
if (this.paused)
this.play();
else
this.pause();
});
});