When the currentTime is changed, its value becomes 0
HTML
<audio id="audio" style="display: none">
<source src="" id="audioSource" type="audio/mpeg">
</audio>
<div class="time-control" id="progressBar">
<input id="progress" type="range" style="height: 5px; border-radius: 5px;">
</div>
JavaScript
let audio = document.getElementById('audio');
let progress = document.getElementById('progress');
progress.addEventListener('click', function(e){
audio.currentTime = (e.offsetX / progress.clientWidth) * audio.duration
}
Values of variables
Values of variables
Related
I have two locally hosted videos on the same page. I am trying to stop one once another is clicked, but it does not work.
<div class="banner has-hover has-video is-full-height is-selected" id="banner-1353813713" style="position: absolute; left: 0%;">
<div class="banner-inner fill">
<div class="banner-bg fill">
<div class="bg fill bg-fill "></div>
<div class="video-overlay no-click fill visible"></div>
<video class="video-bg fill visible" preload="" playsinline="" autoplay="" muted="" loop=""> <source src="https://www.exampledomain/video1.mp4" type="video/mp4"></video> </div>
<div class="banner-layers container">
<div class="fill banner-link"></div>
<div id="text-box-585511097" class="text-box banner-layer x10 md-x10 lg-x10 y35 md-y35 lg-y35 res-text">
<div class="text-box-content text dark">
<div class="text-inner text-center">
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>View Video</span> </a>
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>Offers</span></a>
<div class="video-button-wrapper" style="font-size:70%"><i class="icon-play" style="font-size:1.5em;"></i></div>
<p>Click to view full video</p>
</div>
</div>
I have tried listening to the classes onlick, but it has not worked:
<script>
$(".video-bg fill visible").on("click", function() {
// All but not this one - pause
$(".video-bg fill visible").not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
</script>
Here is a simple POC using vannila JS relying on play event. You can also use load() instead of pause() to start the video from beginning (instead of just pausing).
Reference https://www.w3schools.com/tags/ref_av_dom.asp
// assume only one video is playing at a time
var videoPlaying = null;
const onPlay = function() {
if (videoPlaying && videoPlaying != this) {
videoPlaying.pause()
}
videoPlaying = this
}
// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener("play", onPlay)
}
<video id="video-1" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="video-2" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
If you only want that one video should pause when another is played this might help. Note: I am not using any style except for video's height and width . This code rely on onplay call from html and pause()
function playVideo1() {
document.getElementById('video2').pause();
}
function playVideo2() {
document.getElementById('video1').pause();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stop either</title>
<style>
#video1 {
height: 200px;
width: 200px;
float: left;
}
#video2 {
height: 200px;
width: 200px;
float: right;
}
</style>
</head>
<body>
<video controls id="video1" onplay="playVideo1();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></video>
<video controls id="video2" onplay="playVideo2();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"></video>
<script type="text/javascript" src="a.js"></script>
</body>
</html>
Video are from here and here i am not responsible for them.
Hi tested a theory but you'll have to create buttons to play/pause
theory => do a .each on all video tags
this code below : when you click the words PLAY => it will pause the other video if it's playing
like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" ></script>
<script>
function pause_all_videos () { $("video").each(function() { this.pause(); }); }
function playonly (vid) { pause_all_videos(); document.getElementById(vid).play(); }
</script>
<style>
div{padding:3px;margin:3px;}
</style>
<div>
<video id="v1" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" ></video>
<div><span onclick="playonly('v1');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
<hr>
<div>
<video id="v2" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" ></video>
<div><span onclick="playonly('v2');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
You can do this by taking the video tag and the pause method.
function videoone() {
document.getElementById("videotwo").pause();
document.getElementById("videothree").pause();
document.getElementById("videofour").pause();
}
In the code above, the name of the verb related to onplay is in the video tag
// assume only one video is playing at a time
var videoPlaying = null;
const onPlay = function() {
if (videoPlaying && videoPlaying != this) {
videoPlaying.pause()
}
videoPlaying = this
}
// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener("play", onPlay)
}
<video id="video-1" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="video-2" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I want to make an icon that lets you mute or unmute. The icon itself works, but the audio doesn't play. Here's the code:
<audio id="myaudio" controls loop>
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png"
style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
var x = document.getElementById("myAudio");
if (document.getElementById("imgClickAndChange").src == "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png")
{
document.getElementById("imgClickAndChange").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
x.play();
}
else
{
document.getElementById("imgClickAndChange").src = "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
x.pause();
}
}
</script>
Can anyone help me?
(also yes I am using w3schools's sounds)
x.muted is solution:
function changeImage() {
var x = document.getElementById("myaudio");
if (
document.getElementById("imgClickAndChange").src ==
"https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"
) {
document.getElementById("imgClickAndChange").src =
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
x.muted = true;
} else {
document.getElementById("imgClickAndChange").src =
"https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
x.muted = false;
}
}
<audio id="myaudio" controls loop>
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"
style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" />
</p>
I would like to show the duration of my video and the actual time.
For this I use HTMLMediaElement API in JS.
Everything is working (play, pause, restart, ...) but the duration and current time aren't working and I don't know why. I dont usually code in JS so please be fine ^^
This is my code :
<div class="wrap_video">
<video id="video" width="298" height="240">
<source src="videos/windowsill.mp4" type="video/mp4">
Désolé, votre navigateur ne vous permet pas de visualiser cette vidéo.
</video>
</div>
<div class="datas">
<span id="currentTime"><script>document.write(currentTime);</script></span>
<span id="duration"><script>document.write(duration);</script></span>
</div>
<div id="buttonbar">
<button id="restart" class="btn btn-default" onclick="restart();">
<span class="glyphicon glyphicon-repeat"></span>
</button>
<button id="rewind" class="btn btn-default" onclick="skip(-10)">
<span class="glyphicon glyphicon-fast-backward"></span><!--<<-->
</button>
<button id="play" class="btn btn-default" onclick="playPause()">
<span class="glyphicon glyphicon-play"></span><!-->-->
</button>
<button id="fastForward" class="btn btn-default" onclick="skip(10)">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
And my JS :
/**
* Play or Pause the video
*/
function playPause() {
var video = document.getElementById("video");
var button = document.getElementById("play");
var currentTime = 0;
currentTime += document.getElementById("video").currentTime;
var duration = document.getElementById("video").duration;
if (video.paused) {
video.play();
button.innerHTML = "<span class=\"glyphicon glyphicon-pause\"></span>";
} else {
video.pause();
button.innerHTML = "<span class=\"glyphicon glyphicon-play\"></span>";
}
}
/**
* Restart the video
*/
function restart() {
var video = document.getElementById("video");
video.currentTime = 0;
}
/**
* Skip the video to the given value
*
* #param int value The value
*/
function skip(value) {
var video = document.getElementById("video");
video.currentTime += value;
}
Actually I just want to show current time and duration
Edit :
Ok so now I have that :
For the current time
setInterval(function() {
document.getElementById("currentTime").innerHTML = document.getElementById("video").currentTime;
}, 1000);
var duration = document.getElementById("video").duration;
document.getElementById("duration").innerHTML = duration;
BUT now my problem is that I have [ObjectHTMLSpanElement] instead of 0:00 and NaN instead of 20:03 ...
I suggest you initialize your js code in a oncanplay function that will be called as soon as the video can play through.
For the time thing, I would set up a separate timer that checks the video time every second and updates it accordingly:
var vid = document.querySelectorAll("video")[0];
var current = document.getElementById("current");
var total = document.getElementById("total");
vid.oncanplay = function() {
vid.ontimeupdate = function() {
current.innerHTML = Math.floor(vid.currentTime) + "s";
total.innerHTML = Math.floor(vid.duration) + "s";
}
}
.wrapper {
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
border: 2px solid black;
background: white;
margin: 0;
padding: 5px;
}
<div class="wrapper">
<video width="400" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Current time: <span id="current"></span><br />
Total time: <span id="total"></span>
</p>
</div>
I need a javascript code because I want to remove the class w3-spin in this id="imgg" when i pause an audio element...
<div style="width:100%;height:150px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg" style="width:44%;height:149px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;">
</div>
<audio id="audio" controls loop autoplay style="width:100%;" onclick="pause()">
<source src="<?php echo $row['Song']?>" type="audio/mpeg">
</audio>
my javascript..
<script>
var player = document.getElementById("audio");
var imgg1 = document.getElementById("imgg");
function pause() {
player.pause();
imgg1.removeClass("w3-spin");
}
</script>
The event you should be listening to when an audio element is paused is pause.
As with play, it's (you guessed it) play.
Check media events list on MDN for a list of possible event you can listen to for audio element.
Here's an example.
Added red background color to .w3-spin to help illustrate the class name.
var audioPlayer = document.getElementById("audio");
var imgg = document.getElementById("imgg");
audioPlayer.onpause = function() {
imgg.className = imgg.className.replace(/\bw3-spin\b/g, "");
};
audioPlayer.onplay = function() {
if (imgg.className.indexOf("w3-spin") === -1) {
imgg.className = imgg.className + " w3-spin";
}
};
.w3-spin {
background-color: red;
}
<div style="width:100%;height:150px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg" style="width:44%;height:149px;">
<img id="imgg2" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;">
</div>
<audio id="audio" controls loop autoplay style="width:100%;">
<source src="https://upload.wikimedia.org/wikipedia/en/2/26/Europe_-_The_Final_Countdown.ogg" type="audio/ogg">
</audio>
Hi I used HTML5 audio player and linked a mp3 file and autoplay functionality did . But it's time duration 37 minutes but it stop after 1 minute.
Here is my code jsfiddle
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio loop id="player1" autoplay="true" src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
I have changed your code to the following and it's working now at least at my end.
if you don't want control please remove controls from audio tag
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio autoplay="true" controls id="player1">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/ogg">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>