I have a playlist of videos in html. What i want to do is get the time spent by user on each video. So I am on video one and as soon as it starts you click on video two.
So now how to detect the end time (the last position) of video one.
MY THOUGHT
I was actually thinking of making an interval (may be one second ) that notes the currentTime of the playing video, then on video switch before the new video loads, maybe through loadstart method or loadeddata method store the currenttime value to a variable, sent it to database.
So Is this a good way or are there better ways?
Another question which event fires the moment the video acquires the source I mean the first fired event? Thank you in advance.
You can try this to get the current time when a video is paused/abrupt and calculate the total time as per your requirement.
document.getElementById("myVideo").currentTime
Related
I am looking for help to start a video to play at specific day and time otherwise play 2nd video will play using JavaScript and yes it should be without refresh the file
first thing pops into my head is to use setInterval() to check the current date&time after a specific interval/period of time (like every second/minute).
On my website, I'd like to be able to stop the video loading. Can I do it with jquery? What're my options?
The need is that my website has many videos, when a user with a limited internet connection wanna see a one-hour video then decides that he wants quit the video page (ajax only is performed), the video continues its loading anyway, so if does this with two or three videos his browser will freeze to death. So unless he refreshes the page, the video loading goes on til it's done.
Given that my web's based on apache2, symfony2/php5, projekktor/jquery
Check this answer - HTML5 Video: Force abort of buffering
Apparently removing the value of the src attribute will cause the video to stop loading/buffering
The OP also suggested stopping the video first to prevent any errors in the Browser console
One way would be to split the page into multiple single video pages. It still doesn't solve the problem completely but at least user's resources are used in to a smaller extent.
Another idea that I've had is to set the source of the video to an empty string when the user stops the video. As far as I've read online it frees up the space and leaves the video blank. There should also be a button to set the source to the original path should the user want to play the video once again.
The second idea provokes minor issues such as being unable to continue the video from the moment the user stopped it but I recon it's still better than taking up user's connection to load it.
Why don't you use the API to play&pause the video: API
player.setPlayPause():Boolean
Sets the player to pause if its playing or vis versa.
Ore one of these:
player.setPlay():Boolean
Sets the player to play. If its already playing no changes apply.
player.setPause():Boolean
Sets the player to pause . If its already paused no changes apply.
player.setStop():Boolean
Sets the player to stop . Will cause the playback component to stop immediately and displays the current item´s poster image. Furthermore the start-button shows up.
I'm writing a video player using HTML5 video tags on Google Chrome: I need to show some videos (1), then remove them from the DOM document to show other videos and later create again some video tags pointing to the same files than (1).
I noticed that sometimes the videos are not showing the second time I load them, instead a 'stalled' event is fired...What am I supposed to do to handle this event and be able to show the videos? If I keep a reference to the first video tag then reuse it later it works, but keeping a reference to each video tag could be very memory-consuming!
If you have more than two or three videos that the browser is trying to load at one time, some of them are going to stall. Although HTML5 video provides a way to tell it to start loading videos, there's no way to tell it to stop. Once you start playing it the first time, as long as it's in memory, it's going to keep trying to load more data in case you decide to start playing it again. And it will only load so many videos at a time, so if you're still loading the first three videos, the fourth one will wait for a very, very long time.
Removing the old videos and loading them again later is the right approach, but you need to be very thorough about it to make the browser stop trying to load them. Here's what you need to do.
// 1) Pause the video
oldVideo.pause();
// 2) Clear the video source URL
oldVideo.src = "";
// 3) Tell the video to start loading "nothing"
oldVideo.load();
That last step is crucial. Even once you set src to an empty string, the video will ignore it until you call load. If you want, you can remove it from the DOM and any of your data structures as well so it can be fully garbage collected. But even if you do that, it won't be garbage collected unless you clear the src and call load.
The next time you load the video, either by creating a new element or setting the src on the same one, it should work just fine.
When playing embedded youtube videos, I don't want to display a thumbnail when completed. Instead I'd like to end with last frame. Is this possible?
Either I can pause on the last frame or maybe there's a way to create a high-resolution thumbnail of the last frame?
I am using iframe and I don't mind if video ends with replay button with last frame of video (just like on this page which is done using custom API: http://demo.tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/youtube-player.html, but I am just using iframe.
You could create a function that is invoked at a particular interval, i.e. setInterval, and poll the YouTube player's current time (i.e. player.getCurrentTime()). If the current time happens to be > player.getDuration() - 1 or something, pause the player player.pauseVideo()
As per my knowledge it is not possible, I am also trying to do that but still some glitch is observed in it
Refer the answer : "How to pause embedded youtube video on the last frame?"
I'm not sure this would fulfill all your needs, but did you try adding the &rel=0 option, as in:
<embed src="http://www.youtube.com/v/blabla?whatever...&rel=0" ...>
? Source: YouTube Embedded Players and Player Parameters.
HTH
I already know that you can have an embedded Vimeo video start from a certain point by adding this line of code #t=0m0s to the iframe source, but what I'm trying to achieve is to have the time the viewer is on the page be cookied so it can set the start point when they return.
This way the video picks up where they left off.
I know the values can be passed with cookies so I'm assuming it's possible, I just don't have the javascript knowledge to wrap my head around it.
Any ideas if this is actually possible?
You can use our JavaScript API to listen for the playProgress event to record how far along they are in the video, then use the beforeunload event on window to store the value that you have in a cookie.