Is there a way to play html video only for few seconds?
Currently when a user clicks on a table row the video seeks to a predefined time (highlighted below). So in the below example the video would seek to 7 seconds.
Is there a way to play the video from seconds onwards for just 10 seconds? i.e seek to 00:07 and play to 00:17 and stop?
Thanks
You can use timeupdate event along with currentTime attrribute
function playVideo() {
var starttime = 7; // start at 7 seconds
var endtime = 17; // stop at 17 seconds
var video = document.getElementById('yourVideoId');
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.pause();
}
}, false);
//suppose that video src has been already set properly
video.load();
video.play(); //must call this otherwise can't seek on some browsers, e.g. Firefox 4
try {
video.currentTime = starttime;
} catch (ex) {
//handle exceptions here
}
}
You could create a timer so after you "seek" the video, it will stop the video in 10 seconds.
so inside you seek function you would place.
var Video = $('Video Element')[0];
// After getting the video element play it.
Video.play();
// Now create a timer so in 10 second (1s = 1000 so 10s = 10000 ms) it will pause the video.
setTimeout(function(){
Video.pause();
},10000);
I made a small script which might help with this.
https://github.com/demux/jquery-video-cuepoints
Usage:
$(document).ready(function() {
var $v = $('#video');
$v.cuepoints({
17: function() {
$v[0].stop();
}
});
$('button').click(function(){
$v[0].play();
try {$v[0].currentTime = 7;} catch(e) {}
});
});
Related
function playVideo() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'none';
var starttime = 7; // start at 7 seconds
var endtime = 10; // stop at 17 seconds
var video = document.getElementById('yourVideoId');
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.pause();
}
}, false);
//suppose that video src has been already set properly
video.load();
video.play(); //must call this otherwise can't seek on some browsers, e.g. Firefox 4
try {
video.currentTime = starttime;
} catch (ex) {
//handle exceptions here
}
}
function showThumbnail() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'inherit';
}
<video id="yourVideoId" width="240" height="320" onmouseover="playVideo()" onmouseout="showThumbnail()">
<source src="assets/video/sample.mp4" type="video/mp4">
</video>
<img src="assets/images/banner.png" width="240" height="320">
this the code i have written. when on hover the video plays, but on releasing the hover the video doesn't stop and on hover the video plays and stops at the last frame and doesn't show he thumbnail after ending.
Your code doesn't feature video.pause(); in the showThumbnail() function, which would effectively stop your video. You can furthermore add video.load(); in the aforementioned function to reset it to its initial state.
I have content in French, Nederland, English (on same topic example: "global warming" )
But its in one large file, how can i tell the video element to please play from duration 00:00:00 till 00:05:00 only do not play the whole 02:00:00 ?
function video_play_onetime_withcut(input) {
$('#mediaplayer').prop('loop', false);
$('#mediaplayer').attr('src', filename).show();
mediaplay_video= document.getElementById('mediaplayer');
mediaplay_video.play();
mediaplay_video.onended = function(e) {
console.log('>>> Playing finished: ', e);
};
}
Use timeupdate event.
mediaplay_video.ontimeupdate = function(event) {
if( mediaplay_video.currentTime === 5 * 60 ) {
mediaplay_video.pause();
// Just so we don't stop the player multiple times if the user
// wants to see the whole thing...
mediaplay_video.ontimeupdate = false;
// Do whatever you want.
}
};
If you plan to hide the player afterwards, you can use this:
mediaplay_video.ontimeupdate = function(event) {
if( mediaplay_video.currentTime >= 5 * 60 ) {
mediaplay_video.pause();
// #TODO: Remove player element...
}
};
More information can be found here.
You should be able to use a timeout function.
var clipLength = 10000; //milliseconds
window.setTimeout(function(){
mediaplay_video.stop();
}, clipLength);
I've been messing with video.js whilst learning javascript but can't seem to figure out how to make the video pause after a certain time has passed.
myPlayer.play(function(){
whereYouAt = myPlayer.currentTime();
if (whereYouAt == 10) {
myPlayer.pause();
}
})
That is my pause code.
Check the currentTime in the timeupdate event callback:
var pausetime = 2; // stop at 2 seconds
var myPlayer = videojs('example_video_1');
myPlayer.on('timeupdate', function(e) {
if (myPlayer.currentTime() >= pausetime) {
myPlayer.pause();
}
});
myPlayer.play();
JSFiddle demo: http://jsfiddle.net/EdjxN/17/
I can't figure how to add a listener to a video playback.
I want it eventually to stop when it reaches to a specific play time (i.e 10 sec).
I've tried:
while( video.currentTime != timeToStop){
video.play();
}
But it cause the browser to hang, probably since I initiate video.play() all the time.
do while
Cause the same issue.
What should I use then?
To track the progress of a video, you can use the timeupdate event and check whether the currentTime property of the video has passed the max. Here's an example:
window.addEventListener("load", function () {
var video = document.getElementById("video1"),
timeToStop = 2;
video.addEventListener("timeupdate", function () {
if (this.currentTime >= timeToStop) {
this.pause();
}
}, false);
}, false);
DEMO: http://jsfiddle.net/eGw52/
(where the example uses 2 seconds, not 10)
Video plays nicely with promises. Here is a routine which pauses at a particular point in time and returns a promise which is fulfilled when that happens (or the video pauses for some other reason, or ends).
function pause_at (video, t) {
var promise=new Promise ();
function reached() {
promise.fulfill (video.currentTime);
video.removeEventListener ("timeupdate", timeupdate);
video.removeEventListener ("pause", reached);
}
function timeupdate () {
if (video.currentTime >= t) {
reached ();
video.pause ();
}
}
video.addEventListener ("timeupdate", timeupdate);
video.addEventListener ("pause", reached);
return promise;
}
Usage:
pause_at (video,60).then (function () {alert ("At 60-second mark!");});
video.play ();
Note that the video ending is also considered to be the video "pausing" (with the pause event fired), so the promise will fulfill also when the video ends.
Tweak as you wish to work with your favorite promises library. You'll need to fix this if you like to run videos backwards (negative playbackRate). :-)
So I have a jquery mobile page with an html 5 video in it and that I want to be able to either stop playing and reset its self or just automatically pause the video. Would this be the correct javascript?
<script>
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;}
if ($.mobile.activePage.attr('id') != 'a28') { "restart"}
</script>
have you tried the pagehide , it gets called when the current active page gets hide / changed.
$(function(){
$('#a28').live('pagehide',function(){
//stop the video
});
});
Make use of a loop, to check if the user is on the webpage. Store the time.
var lastSeen;
var loop = function (){
lastSeen = Date.now();
setTimeout(loop, 50);
};
loop();
var video = document.getElementById('Video1');
video.addEventListener('timeupdate', function (){
if(Date.now() - lastSeen > 100){
this.pause();
}
}, false);