I have a video in my html. I would like the video to pause at 5 seconds after playing so I used addEventListener. I also have 2 buttons that call either restart() or jump().
When I play my video, an EventListener is called on my video. It pauses at 5 seconds, but I can't get it to play after 5 seconds (I've tried removing the listener but then the video no longer pauses). When I call jump(), it'll take me to 10 seconds but continue to pause when I try to play it. When I call reset(), the video will play up to 5 seconds again, which makes sense since I have a Listener on it. How do I get it to play after 10 seconds for when I call jump()? At first I thought I would have to remove my Listener but I believe I'll need that still because I would like the video to pause at 15 seconds. Or maybe I need to call removeEventListener somewhere else?
js
var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5) {
this.pause();
}
});
function restart(){
video.currentTime = 0;
}
function jump(){
video.currentTime = 10;
if (video.currentTime >=15){
video.pause
}
}
html
<video id="myvid" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="restart()">restart</button>
<button onclick="jump()">jump</button>
You must keep the pause time in a variable. Then you can use it in the jump function:
var video = document.getElementById( 'myvid' ),
pausedtime = 0;
video.addEventListener( 'timeupdate', function() {
if ( this.currentTime >= pausedtime + 5 ) {
this.pause();
pausedtime = this.currentTime
}
});
function restart(){
video.currentTime = 0;
pausedtime = 0;
video.play()
}
function jump(){
pausedtime += 5;
video.currentTime = pausedtime;
video.play()
}
<video id="myvid" width="320" height="240" controls>
<source src="http://iandevlin.com/html5/media-player/parrots.mp4.mp4" type="video/mp4">
<source src="http://iandevlin.com/html5/media-player/parrots.webm" type="video/webm">
</video>
<br>
<button type="button" onclick="restart()">Restart</button>
<button type="button" onclick="jump()">Jump</button>
Related
I m trying to make my video play only the first 30 secs of the video and return to the starting time going as loop irrespective of video length.
Here's my code so far.
HTML
<video width="100%" height="192px" id="player" controls loop >
<source src="images/videos/<?= $v_video; ?>" type="video/mp4">
<source src="images/videos/<?= $v_video; ?>" type="video/ogg">
</video>
JS
<script>
var playTimeout;
$("#player").on("play", function(e) {
playTimeout = setTimeout(function() {
$("player").pause();
$("player").setCurrentTime(0); // Restarts video
}, 30000); // 30 seconds in ms
});
$("#player").on("pause", function(e) {
clearTimeout(playTimeout);
});
</script>
However, it stills keeps on playing after 30sec.
Any help is appreciated.
$("player").pause();
$("player").setCurrentTime(0); // Restarts video
needs to be
$("#player").get(0).pause();
$("#player").get(0).currentTime = 0; // Restarts video
Also, I would use the timeupdate event so that the video doesn't reset while it is still loading (in your example, with a slow connection, if they spend 10 seconds buffering before playback, it would reset after only 20 seconds of playing).
See example (set to 3 seconds instead of 30 for easier demo):
var playTimeout;
$("#player").on("timeupdate", function(e) {
playTimeout = setTimeout(function() {
$("#player").get(0).pause();
$("#player").get(0).currentTime = 0; // Restarts video
}, 3000); // 3 seconds in ms
});
$("#player").on("pause", function(e) {
clearTimeout(playTimeout);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="player" controls="true" height="200" width="300">
<source type="video/ogg" src="http://media.w3.org/2010/05/bunny/movie.ogv">
<source type="video/mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4">
</video>
I have a HTML5 video element in my page and what I'd like to happen is when it reaches the 3 second mark, it needs to pause for 2 seconds and then continue playback.
The video length is about 8 seconds.
<video id="video" playsinline autoplay muted loop>
<source src="video.mp4" type="video/mp4"/>
<source src="video.webm" type="video/webm"/>
</video>
This does it
const video = document.getElementById('myVideo');
function playVid() {
video.play();
window.setTimeout(pauseVid, 3000);
}
function play() {
video.play();
}
function pauseVid() {
video.pause();
window.setTimeout(play, 5000);
}
setTimeout() .currentTime & timeupdate
Go to the link above to understand why setTimeout() ain't so great.
.currentTime Property
This property is used by <audio> and <video> tags to get/set playback time in seconds. In the following demo it is used to get the time:
var t = this.currentTime;
timeupdate Event
This event fires 4 times a second while an <audio> or <video> tag is playing. In the demo both a <video> and <audio> tag are registered to to the timeupdate event:
video.addEventListener("timeupdate", tick);
timer.addEventListener("timeupdate", tock);
Setup
[controls] Attribute
Added so the time can be reviewed as the demo runs, it's optional and recommended that it not be used in production.
<audio> Tag
An <audio> tag has been added as a timer, The attributes [muted] and [autoplay] are required:
<audio id='timer' src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' muted controls autoplay></audio>
Both tags will start playing and are listening to the timeupdate event and will call a function at a predetermined time:
function tick(e) {
var t = this.currentTime;
if (t >= 3) {
this.pause();
video.removeEventListener("timeupdate", tick);
}
}
function tock(e) {
var t = this.currentTime;
if (t >= 5) {
video.play();
timer.removeEventListener("timeupdate", tock);
}
}
Basically when the <video> and <audio> tags are triggered every 250ms, they are calling those functions:
<video> calls function tick()
if the playback time is 3 or more seconds it pauses.
to avoid constant triggering every 250ms, the eventListener is removed.
<audio> calls function tock()
if the playback time is 5 or more seconds it will play the <video>.
for the same reason as the <video>, the eventListener is removed.
Demo
var video = document.getElementById('video');
var timer = document.getElementById('timer');
video.addEventListener("timeupdate", tick);
timer.addEventListener("timeupdate", tock);
function tick(e) {
var t = this.currentTime;
if (t >= 3) {
this.pause();
video.removeEventListener("timeupdate", tick);
}
}
function tock(e) {
var t = this.currentTime;
if (t >= 5) {
video.play();
timer.removeEventListener("timeupdate", tock);
}
}
<video id="video" playsinline muted loop controls autoplay width='300'>
<source src="https://html5demos.com/assets/dizzy.mp4" type="video/mp4"/>
</video>
<audio id='timer' src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' muted controls autoplay></audio>
I've got two audio elements on a page:
<audio id="voice1" class="voice1 voice" controls>
<source src="1.mp3" type="audio/mpeg">
</audio>
<audio id="voice1" class="voice2 voice" controls>
<source src="2.mp3" type="audio/mpeg">
</audio>
I want to play the first one, pause for 5 seconds, play the second one, pause for a further 5 seconds then repeat the whole process a fixed number of times.
jQuery(document).ready(function(){
for (j = 0; j < 100; ++j) {
var audioArray = document.getElementsByClassName('voice');
var i = 0;
audioArray[i].play();
for (i = 0; i < audioArray.length - 1; ++i) {
audioArray[i].addEventListener('ended', function(e){
// pause here for 5 seconds
var currentSong = e.target;
var next = $(currentSong).nextAll('audio');
if (next.length) $(next[0]).trigger('play');
});
}
});
I have experimented with setInterval and setTimeout but I can't get this pause to work. I have considered just playing a quiet mp3 file for 5 seconds but this seems daft. Can anyone recommend a suitable approach?
how can using php play a sound each 1 or 2 min
when a user enter in the page the first sound play
after 1 min another sound will be played and the first will be stopped of
course all that will be auto play
html5 code:
<audio controls autoplay>
<source src="horse.mp3" type="audio/mpeg">
</audio>
Simply you can merge both sound with your timing and implemented just like this:
<audio controls="controls" onloadeddata="audioSoundFunction()">
<source src="horse.mp3" type="audio/mp3" />
</audio>
Javascript:
function audioSoundFunction() {
var audioSound = this;
setTimeout(function() {
audioSound.play();
}, 10000)
}
<audio id="selecterForAudio" controls autoplay>
<source src="horse.mp3" type="audio/mpeg">
</audio>
javascript/jquery
var myVar = setInterval(myTimer, 60000);
var audio = $("#selecterForAudio")[0];
var counter = 0;
var musicfiles = ["horse.mp3", "lard.mp3"];
function myTimer(){
//stopping the audio
audio.stop();
//setting new source of array of sources
$('#selecterForAudio').find('source').attr('src',musicfiles[counter]);
counter+1;
if(counter>COUNT(musicfiles)){
counter=0;
}
//play sound
audio.play();
}
something like this should fit your needs - it might need a little tweeking though
I have an engine song in autoplay and i want that when i click on my button the sound turn off "progressively" for get a fluid diminution of the volume and finish at 0.1 or 0.2 of the volume, someone have an idea ?
This is my actual code:
<audio autoplay>
<source src="../audio/2445.mp3">
</audio>
<button>turn off</button>
not sure if this is right way to do it, you could do something like:
<audio autoplay id='aud'>
<source src='http://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_Symphonie_5_c-moll_-_1._Allegro_con_brio.ogg'>
</audio>
<button id='btn'>turn off</button>
JS:
var audio = document.getElementById('aud'), interval;
document.getElementById('btn').onclick = turnOff;
function turnOff(){
if(audio && !audio.paused){
interval = setInterval(function(){
console.log('audio volume: ', audio.volume);
if(!audio || audio.paused || audio.volume < 0.1){
clearInterval(interval);
}else{
audio.volume -= .05; // change this value as per your liking
}
}, 200); // change this value as per your liking
}
}
I guess a better way to do it might be with web-audio.
Fiddle Demo