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";
}
}
Related
I have added an audio to my website, which is playing when site is opened. Now I want add play/pause button to toggle the audio.
This is how I tried it:
<audio id="myAudio" autoplay >
<source src="mp3/background-music.mp4" type='audio/mp4'>
Your user agent does not support the HTML5 Audio element.
</audio>
<a type="button" class="play-pause" title="play/pause"><i class="fa fa-pause"></i></a>
<script type="text/javascript">
$(document).ready(function() {
var playing = false;
$('a.audio-btn').click(function() {
if (playing == false) {
document.getElementById('myAudio').play();
playing = true;
$(this).text("stop sound");
} else {
document.getElementById('myAudio').pause();
playing = false;
$(this).text("restart sound");
}
});
});
</script>
But its not working for me. Can anybody tell me where I have gone wrong?
For demo purpose, i add video tag, to work with audio you can replace video to audio tag and Use
$('.play-pause')
Instead of
$('a.audio-btn')
For audio use this at the place of video tag :
<audio id="myAudio" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='audio/mp4'>
Your user agent does not support the HTML5 Audio element.
</audio>
$(document).ready(function () {
var playing = true;
$('.play-pause').click(function () {
if (playing == false) {
document.getElementById('myAudio').play();
playing = true;
$(this).text("Sop Sound");
} else {
document.getElementById('myAudio').pause();
playing = false;
$(this).text("Restart Sound");
}
});
});
a {
background: #000;
color: #fff;
cursor: pointer;
padding: 10px;
}
video {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myAudio" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4'>
Your user agent does not support the HTML5 Audio element.
</video>
<a type="button" class="play-pause" title="play/pause">Play / Pause</a>
Change your $('a.audio-btn') into $('a.play-pause').
What exactly is not working? Does the button not appear, does it not function?
I would suggest using something like the following:
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause()
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
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>
I've an html5 video player with my own video.
I'd like that when I click on a button, or an image (anything), my player show() and enlarge fullscreen like when I click on the control button.
I've tried this and other common stuff :
$(function () {
$("h1").click(function () {
$("#video-test").requestFullscreen();
$("#video-test").msRequestFullscreen();
$("#video-test").mozRequestFullscreen();
$("#video-test").webkitRequestFullscreen();
$("#video-test").addClass('fullscreen').html("");
$("i").addClass('fullscreen').html("");
});
});
But it doesn't return me anything. "$(....).requestFullscreen() is not a function"
Any idea ?
<video id="videoplay" controls="controls" autoplay="autoplay">
<source src=small.mp4 type=video/mp4>
<source src=small.3gp type=video/3gp>
<source src=small.webm type=video/webm>
<source src=small.ogv type=video/ogg>
</video>
<script type="text/javascript">
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.paused) {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}
else {
myVideo.pause();
}
}, false);
</script>
I have an audio file that plays when an anchor tag is clicked. If the anchor tag is clicked again, I want the audio to pause, I just don't know enough about javascript to pull this second half off. I don't want to change the content of the anchor tag they click, I just want the audio file to start and pause whenever they click the tag.
This is what I have so far, which at least makes the sound file playable:
<audio id="audio" src="/Demo.mp3"></audio>
<a onClick="document.getElementById('audio').play()">Click here to hear.</a>
A Vanilla Javascript way to do what you required.
Note: I've noticed comments on other question with multiple upvotes for a native js approach and saw the OP has no jquery tag.
So WORKING EXAMPLE:
SOLN 1: (my initial soln using events)
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
function togglePlay() {
isPlaying ? myAudio.pause() : myAudio.play();
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>
SOLN 2: (using myAudio.paused property based on dandavi's comment)
var myAudio = document.getElementById("myAudio");
function togglePlay() {
return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>
var audioElement= document.getElementById("audio-player");
function togglePlay() {
if (audioElement.paused) {
audioElement.play();
}
else {
audioElement.pause();
}
};
You could use jQuery to make a toggle for this.
<a id="music-button" style="cursor:pointer;">
<img src="http://i.stack.imgur.com/LT3WE.png"></a>
<audio id="playMusic" autoplay>
<source src="sound.mp3">
</audio>
<script type="text/javascript">
$('#music-button').toggle(
function () {
document.getElementById('playMusic').play();
},
function () {
document.getElementById('playMusic').pause();
}
);
</script>
the myAudio variable has to be inside the function call...It works fine
function togglePlay() {
var myAudio = document.getElementById("myAudio");
return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio
id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto">
</audio>
<input type="button" value="sound" onclick="togglePlay()" />
var Sample-Audio = document.getElementById("Sample");
function togglePlay() {
return Sample-Audio.paused ? Sample-Audio.play() : Sample-Audio.pause();
};
<audio id="Sample" preload="auto">
<source src="./sounds/rain.mp4" type="audio/mp4">
<source src="./sounds/rain.ogg" type="video/ogg">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>
HTML
<audio controls autoplay class="bgsound">
<source src="audio/motivational-day-112790.mp3" type="audio/wav" />
<source src="audio/motivational-day-112790.mp3" type="audio/wav" />
<source src="audio/motivational-day-112790.mp3" type="audio/wav" />
Your browser does not support the audio element.
</audio>
Javascript
var audioClass = document.querySelector(".bgsound");
document.querySelector(".play-pause").addEventListener("click",
function () {
if (audioClass.paused) {
audioClass.play();
} else {
audioClass.pause();
}
});
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();
});
});