I'm trying to pause a video and then resume the playback. But I presume I somehow need to clear the pause function? I've tried iterations of myVideo.play() and I can get it to play but only for short bursts. Any help would be much welcome.
<!DOCTYPE html>
<html>
<head>
<title> Html5 Video Test </title>
<meta charset="UTF-8">
</head>
<body> <
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<video id="video1" width="420" autoplay>
<source src="test.mov" type="video/mov">
<source src="test.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
myVideo.addEventListener("timeupdate", function(){
if(this.currentTime >= 1 * 2) {
this.pause();
}
});
</script>
</body>
</html>
If I understand correctly, you want your event listener to only fire once (so when you next play the video, it doesn't just immediately get paused again). If so, give this a shot:
var myVideo = document.getElementById("video1");
// Give this function a name so we can refer to it later.
function pauseOnce() {
if (this.currentTime >= 1 * 2) {
this.pause();
// Our work is done. Remove the event listener. (We need a reference to
// the function here.)
this.removeEventListener("timeupdate", pauseOnce);
}
}
myVideo.addEventListener("timeupdate", pauseOnce);
Related
I am currently trying to play another audio if the current audio is finished but I am not getting any success results would be appreciated if any suggestions is given,here is the below code :-
document.addEventListener('DOMContentLoaded', () => {
ms();
});
function ms() {
var btns = document.getElementsByClassName("pas");
for (var j = 0; j < btns.length; j++) {
document.addEventListener('play', function(e) {
var songs = document.getElementsByClassName("pas");
for (var i = 0; i < songs.length; i++) {
if (songs[i] != e.target) {
songs[i].pause();
}
}
}, true);
}
}
<audio class="pas" controls loop autoplay>
<source src="https://www.mboxdrive.com/Drake_-_One_Dance_(Lyrics)_ft._Wizkid_&_Kyla(128k).m4a" type="audio/mp3">
Your browser dose not Support the audio Tag
</audio>
<audio class="pas" controls loop autoplay>
<source src="https://www.mboxdrive.com/Coobie_-_Miss_You_(Official_Lyric_Video)(256k).mp3" type="audio/mp3">
Your browser dose not Support the audio Tag
</audio>
The above js is to allow only one audio to be played once. Anyway possible way to add any function to play another audio if the first one is finished?
You can try code demo here https://jsfiddle.net/mt1koznd/2/
Use the timeupdate event, and the .duration and .currentTime properties. If you intend to switch players, you need to remove the loop attribute and remove the autoplay attribute on all but one or all players will play at the same time. The example will work for an unlimited amount of players and will loop back to the starting player if the current player is the last one.
Details are commented in example
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style></style>
</head>
<body>
<audio class="song" controls>
<source src="https://www.mboxdrive.com/Drake_-_One_Dance_(Lyrics)_ft._Wizkid_&_Kyla(128k).m4a" type="audio/mp3">
</audio>
<audio class="song" controls>
<source src="https://www.mboxdrive.com/Coobie_-_Miss_You_(Official_Lyric_Video)(256k).mp3" type="audio/mp3">
</audio>
<script>
// Collect all .song into a NodeList then convert it into a real array
const songs = [...document.querySelectorAll('.song')];
// Bind the timeupdate event to each .song
songs.forEach(song => song.ontimeupdate = nextSong);
// Event handler
function nextSong(e) {
// Get player's full duration in seconds
const end = this.duration;
// Get the current time spent playing in seconds
let now = this.currentTime;
// If the time playing reaches the duration...
if (end <= now) {
// Get the index position of player
const position = songs.indexOf(this);
// If the player is the last one start play on the first player
if (position === songs.length - 1) {
songs[0].play();
// Otherwise start ply on the next player
} else {
songs[position + 1].play();
}
}
}
</script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm trying to have a <video> autoplay on page load then pause 6 seconds into the video and stay like that.
I have the video playing fine, I'm just having a hard time with JavaScript to make the video pause automatically after 6 seconds of the DOM time.Anyone have code for how to do so?
You will have to use the onload event to do that here is an exemple:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h1>Hello World!</h1>
<script>
const video = document.getElementById('myVideo');
video.onplay = function() {
window.setTimeout(()=>{
const video = document.getElementById('myVideo');
video.pause()
}, 6000)//6000ms = 6sec
}
</script>
</body>
</html>
Here you go, once the video is started the interval keeps firing that function which verify if the current time of the video is higher or equal to 6seconds and then does what you need.
;(function(){
if( !video ) return;
var videoInterval = null;
video.onplay = function() {
videoInterval = setInterval(_ => {
if( video.currentTime >= 6 /* 6 seconds */ ) video.pause();
else console.log( video.currentTime );
}, 1);
}
video.onpause = function() {
clearInterval(videoInterval);
videoInterval = null;
}
video.onend = video.onpause;
}());
<!DOCTYPE html>
<html>
<body>
<video id="video" muted controls autoplay>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
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>
I would like for an HTML5 video of mine to loop back to the first frame and pause after playback.
I found this page here and am using the code near the bottom of the page by "Offbeatmammal" which is:
<div id="vOverlay" style="position:relative; width:600px; height:300px; z-index:2;"></div>
<video style="position:relative; top:-300px; z-index:1;width:600px;height:340px;" width="600" height="409" id=videoPlayer controls="controls">
<source src="video.mp4" type="video/mp4">
</video>
<script>
var v = document.getElementById('videoPlayer');
var vv = document.getElementById('vOverlay');
<!-- Play, Pause -->
vv.addEventListener('click',function(e){
if (!v.paused) {
console.log("pause playback");
v.pause();
v.firstChild.nodeValue = 'Pause';
} else {
console.log("start playback")
v.play();
v.firstChild.nodeValue = 'Play';
}
});
</script>
I have found a few threads that seem to indicate i need to use this.currentTime = 0; but I have no clue where to add this to the code above. I tried several different places and it just isn't working. Any help is much appreciated.
Thanks!
When the video is finished. WHEN is key here. You need to search for the "playback finish" event.
seach google for "html5 video events" and you'll find this:
http://www.w3schools.com/tags/ref_av_dom.asp
then the code you need to write is:
v.addEventListener("ended", function(){
this.currentTime = 0;
});
I want to be able to reload the video into the HTML5 video without having to reset the currentTime when it is loaded. The way I am currently doing it is the following:
<button onclick="getCurTime()" type="button">Get current time position</button>
<button onclick="setCurTime()" type="button">Set time position to 5 seconds</button><br>
<div style="width:800px; height:445px;">
<video id="myVideo" width="100%" height="100%" controls="controls">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");
function setCurTime() {
vid.currentTime=100;
}
$(document).ready(function ()
{
$('#myVideo').videocontrols(
{
preview:
{
sprites: ['big_bunny_108p_preview.jpg'],
step: 10,
width: 200
},
theme:
{
progressbar: 'blue',
range: 'pink',
volume: 'pink'
}
});
vid.play();
});
setInterval(function(){
if(vid.currentTime > vid.duration-1)
{
myVideo.src = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4";
myVideo.load();
myVideo.play();
vid.currentTime = vid.duration-60*5
}
}, 1);
</script>
</div>
How would I go about doing this? Is there even a way to just update the data in the video player without having to reload the video? I want to be able to do this so if someone makes a modification to the video, it will just update the data in the video player so the user doesn't have to reload the whole video again.
per discussion in comment thread above, I'm still not 100% sure why you're reloading the same video so I may be missing some context, but the following code will let you change the video source but preserve the current time. It does assume jQuery for the event handler (though you can easily use the regular javascript event handler on the same event to do the same thing)
<video id="v" width="320" height="240" controls="controls" mute>
<source src="Video.mp4" />
</video>
<button onclick="reload()">Reload</button>
<script>
function reload() {
vid=document.getElementById("v")
// record the current time for the video that is playing
curTime = vid.currentTime
// set the source for the replacement video...
vid.src = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4";
// ... and load it
vid.load();
// add event handler for "canplay" to set the time, and then start the video
$("#v").on("canplay",function() {
vid.currentTime = curTime
vid.play();
// remove the event to stop it triggering multiple times
$("#v").off("canplay")
})
}
</script>