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>
Related
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 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 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>
I saw some examples of defaultPlaybackRate and they say it work on Chrome. So I use their example codes and run on Chrome, it doesn't change the speed to 3.0x when I click the button. Anyone can tell me why?
Here my javascript code,
$(document).ready(function(){
var video = document.getElementById('video');
$("#speed").click(function() { // button function for 3x fast speed
video.defaultPlaybackRate=3.0;
});
});
The HTML codes,
<button id="speed" type="button">3.0x</button>
and
<video id="video" width="930" height="500" controls>
<source src="caption.mp4" type="video/mp4">
<source src="caption.ogg" type="video/ogg" >
<source src="caption.webm" type="video/webm" >
</video>
Because once you change the defaultPlaybackRate you have to load the video again using video.load(); (or set it before the video has loaded). If you want to change the rate while the video plays, use playbackRate instead.
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.defaultPlaybackRate = 3.0;
video.load();
});
or
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.playbackRate = 3.0;
});
jsFiddle example
Can I make a countdown to the end of the HTML5 video?
<video id="video" width="400" height="225" preload="auto">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<div id="countdown">Video ends after <span>XX</span> seconds.</div>
I understand that a have to wait for the video load, and then if the video is loaded, need to know the length and run video and coundown.
Listen to the timeupdate event fired by the video object and update the time remaining.
Something like this should work:
var video = document.getElementById('video');
video.addEventListener('timeupdate', updateCountdown);
function updateCountdown() {
var timeSpan = document.querySelector('#countdown span');
timeSpan.innerText = video.duration - video.currentTime;
}
This should do the trick for you
countdown = video.duration - video.currentTime
See here for more details