I am working on a site used for mandatory instruction. We have to make sure the student watches the video and doesn't fast forward. I would also like to remember the progress the student made in the video in case they need to leave then return later to complete watching.
I have used this JS to remove the ability to fast forward. I'm just not sure how to get the code to remember the progress, then start at that point if the student returns later.
var iframe = document.querySelector("iframe");
var player = new Vimeo.Player(iframe);
var timeWatched = 0;
player.on("timeupdate", function(data) {
if (data.seconds - 1 < timeWatched && data.seconds > timeWatched) {
timeWatched = data.seconds;
}
});
player.on("seeked", function(data) {
if (timeWatched < data.seconds) {
player.setCurrentTime(timeWatched);
}
});
Thanks for any help on this.
you can store the current time in database for future use and then pass to the js whenever user views the video
Related
I have searched extensively to find a solution to this but have not succeeded.
I have created a 4 second video clip that loops seamlessly in an editor.
However when the clip runs in a page via Safari, Chrome or Firefox there is a small but noticeable pause in the playback from end back to beginning.
I have tried using the loop and preload attributes both together and independently.
I have also tried the following javascript:
loopVid.play();
loopVid.addEventListener("timeupdate", function() {
if (loopVid.currentTime >= 4) {
loopVid.currentTime = 0;
loopVid.play();
}
}
But in all cases the momentary pause remains and spoils the effect.
I'm open to any ideas?
Since this question is a top search result in Google, but doesn't "technically" have an answer yet, I'd like to contribute my solution, which works, but has a drawback. Also, fair warning: my answer uses jQuery.
It seems the slight pause in the video loop is because it takes time for html5 video to seek from one position to another. So it won't help anything to try to tell the video to jump to the beginning when it ends, because the seek will still happen. So here's my idea:
Use javascript to clone the tag, and have the clone sit hidden, paused, and at the beginning. Something like this:
var $video = $("video");
var $clone = $video.clone();
$video.after($clone);
var video = $video[0];
var clone = $clone[0];
clone.hidden = true;
clone.pause();
clone.currentTime = 0;
Yes, I used clone.hidden = true instead of $clone.hide(). Sorry.
Anyway, after this the idea is to detect when the original video ends, and then switch to the clone and play it. That way there is only a change in the DOM as to which video is being shown, but there is actually no seeking that has to happen until after the clone starts playing. So after you hide the original video and play the clone, you seek the original back to the beginning and pause it. And then you add the same functionality to the clone so that it switches to the original video when it's done, etc. Just flip flopping back and forth.
Example:
video.ontimeupdate = function() {
if (video.currentTime >= video.duration - .5) {
clone.play();
video.hidden = true;
clone.hidden = false;
video.pause();
video.currentTime = 0;
}
}
clone.ontimeupdate = function() {
if (clone.currentTime >= clone.duration - .5) {
video.play();
clone.hidden = true;
video.hidden = false;
clone.pause();
clone.currentTime = 0;
}
}
The reason I add the - .5 is because in my experience, currentTime never actually reaches the same value as duration for a video object. It gets pretty close, but never quite there. In my case I can afford to chop half a second off the end, but in your case you might want to tailor that .5 value to be as small as possible while still working.
So here's my entire code that I have on my page:
!function($){
$(document).ready(function() {
$("video").each(function($index) {
var $video = $(this);
var $clone = $video.clone();
$video.after($clone);
var video = $video[0];
var clone = $clone[0];
clone.hidden = true;
clone.pause();
clone.currentTime = 0;
video.ontimeupdate = function() {
if (video.currentTime >= video.duration - .5) {
clone.play();
video.hidden = true;
clone.hidden = false;
video.pause();
video.currentTime = 0;
}
}
clone.ontimeupdate = function() {
if (clone.currentTime >= clone.duration - .5) {
video.play();
clone.hidden = true;
video.hidden = false;
clone.pause();
clone.currentTime = 0;
}
}
});
});
}(jQuery);
I hope this will be useful for somebody. It works really well for my application. The drawback is that .5, so if someone comes up with a better way to detect exactly when the video ends, please comment and I will edit this answer.
I've found that Firefox will stutter while looping if I'm using mp4 or ogv files. I changed the code in my page to try using a webm file first instead, and suddenly the stutter was gone and the video looped seamlessly, or at least close enough that I didn't see an issue. If you haven't given that a shot, it could be worth it to try converting the file to a webm format and loading that instead.
okay So I'm trying to leverage the video.js project as it's seems pretty amazing!
anyways, im writing my first script that interacts with the api which can be found below. it's basically just supposed to output the current play time to the div current_time , the id of video tag is my_stream anyways here's all my javascript ... the problem im having is playLength=0 and current time never updates when video is playing and remains at 0 (ie. is never more then 0 ) im not sure what im doing wrong here ... the api rules i followed can also be found here video.js api docs
function current_time(){
_V_("my_stream").ready(function(){
var myPlayer = this;
// EXAMPLE:
var playLength = myPlayer.duration();
do
{
var position = myPlayer.currentTime();
var myTextArea = document.getElementById('time_count');
myTextArea.innerHTML = position;
}
while(position < playLength);
});
}
window.onload = current_time
anyhelp from any one who's implemented anything with the api or just see something dumb i've done would be greatly appreciated, thanks!
You're assigning the duration to playLength before playback begins. If that's zero when you assign it, it will remain zero. Check the note in the API doc "NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing."
It looks like you're only concerned about the duration to work out when the video is playing. It would be far better just to use the timeupdate event instead.
var myPlayer;
var myTextArea = document.getElementById('time_count');
videojs('my_stream').ready(function(){
myPlayer = this;
myPlayer.addEvent('timeupdate', onProgress);
});
function onProgress() {
myTextArea.innerHTML = myPlayer.currentTime();
}
This should execute after the DOM has loaded (with window.onload, or jQuery's $(document).ready()), or go in a script tag in the body after the video and #time_count elements.
I Have sort-of solved this problem bymyself by modifying the code I Had written so it now works like so
function current_time(){
_V_("my_stream").ready(function(){
var myPlayer = this;
var playLength = myPlayer.duration();
var position = myPlayer.currentTime();
var myTextArea = document.getElementById('time_count');
myTextArea.innerHTML = position + "/" + playLength;
t=setTimeout(function() {current_time()},2000);
});
}
... although it seems stupid to poll duration continuosly, I actually don't need this value going forward in development, however both populate properly now once the video is playing so it's kinda a solution. I'm not going to except my own answer right away to see if anyone can solve this a better way, or if you can explain why video.js changes the id tag and how to properly deal with it i'll give you an up vote and accept your answer if it all makes sense to me.
In our RIA application, created using ExtJs, we need to capture the time consumed by a user action.
For example, user clicked at a button 'Open' which opens a window, then the time consumed in opening of the window needs to be captured.
We have tried using Selenium IDE, but it only records the actions and executes them back and doesn't log the time consumed in the commands.
We have also tried using 'Profiler' feature of browsers (start profiling before action and stop profiling after action is over), but then that is manual.
Thus, could someone guide at - how to capture the time taken by a user action in Javascript in an automated manner?
Thanks for any help in advance.
This is a rough sketch of a global event tracking function:
(function() {
var pairs = {};
eventLogger = function(e) {
var ts = new Date().getTime();
if (pairs[e]) {
var taken = ts - pairs[e],
img = new Image();
img.onload = function() { };
img.src = '/path/to/logger?evt=' + encodeURIComponent(e) + '&t=' + encodeURIComponent(taken);
delete pairs[e];
} else {
pairs[e] = ts;
}
}
}());
It matches pairs of event names; first one starts the timer, second one makes a server request to log the time taken for that event.
Then, you would log events like these:
eventLogger('loadContacts');
// start code that loads contacts
// ...
// later
eventLogger('loadContacts'); // done loading
It doesn't distinguish between start and stop events, so if you may have overlapping start and stop times, you may need to make some tweaks.
I have started learning javascript a couple of days ago and done the codeacadmey stuff and thought i will try make a simple game.
so i came up with the memory game where you have to find pairs of images.
it is all working and i got a score system in place but a few people have said the delay that happens once the cards have been chosen to allowing another chocie is hindering them and i cant figure out how to improve that performance.
here is a bit of code i think is causing the delay, is there any better way to produce the same result, sorry about before i am new to all this.
function check() {
clearInterval(tid);
if(people[secondchocie] === people[firstchocie]) {
cntr++;
(cntr === numOfMatches) {
stop();
score = checkScore(amountGoes);
$('#gameFinished').append('<p>Well done, you managed to complete the game your score is <span>' + score + '</span></p>');
}
turns = 0;
return;
} else {
document.images[firstchocie + numOfImages].src = backcard;
document.images[secondchocie + numOfImages].src = backcard;
turns = 0;
return;
}
}
I can't create comments, so I'll put this in an answer.
Although I agree with lukas.pukenis ...
Changing images can take some time if they aren't preloaded. To test this: Try to get them into the browser cache by adding them somewhere else in the page (i.e. with an IMG tag) before starting the game.
Then you'll be sure they are in the cache.
edit:
I recently used this:
var cache = [];
function preLoadImages(arrImg)
{
var args_len = arrImg.length;
for (var i = args_len; i--;)
{
var cacheImage = document.createElement('img');
cacheImage.src = arrImg[i];
cache.push(cacheImage);
}
}
preLoadImages(['images/img1.png','images/img2.png','images/img3.png',]);
you can add all images needed to the javascript array.
If your a quick study :) you can do the following:
If your page is generated by php you could let php read the entire images directory and write the filenames in the page as javascript code.
Or you could create an ajax request wich returns all paths to the images and sends them to the preload function as a callback.
I'm building an AIR application which loads and plays mp3's from a users computer, I'm using the code pretty much straight out the book to do this:
function startTrack()
{
if (isStarted == 0)
{
theSound = new air.Sound();
urlReq = new air.URLRequest(...dynamicaly generated extension);
theSound.load(urlReq);
soundHandle = theSound.play();
isStarted = 1;
}
else
{
soundHandle.stop();
soundHandle = null;
theSound = null;
urlReq = null;
isStarted = 0;
startTrack();
}
}
There are a series of links on the page of the app which play different mp3's, when you click on one it passes the path of the sound to urlReq and plays it. When you click on a second sound it stops the first playing and plays the next one. What I thought would happen is the old sound would be destroyed by call theSound = null etc but it just seems to stop the sound play the new sound and keep the old one loaded so you eventually run out of system memory after lots of tracks have been started and kept loaded.
So if anyone knows how to unload a sound or how to generally dump things from the system memory the app is using it would be much appreciated.
Thanks all
Will
You call air.System.gc() after deleting all the related elements.