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
Related
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
How can I show the same HTML5 YOUTUBE Video twice on a website without loading it twice?
Here you are taught to display a same html 5 video twice without having to load twice. But I want to know how to do it with a youtube video, using the IFRAME tag. The link is taught using the canvas, but I can not do the same with the iframe. Can you duplicate the video even with the iframe? Or is there a way to "catch" the iframe video tag? (I've tried, but it has an "access denied" error). This might help, too.
This is just an example, but I wanted to do something like this:
Original youtube video.png
My "site" with 1 youtube video and several canvas.png
I wanted to take this video is to post several in my site, enabling multiple simultaneous playbacks. As this would take a lot of the internet, I wanted to get the current frame of the original video simultaneously and place them on several canvases, this link teaches you to do just that, but using videos (< video> tag). I want to do this using youtube videos.
I want all players to play / pause at the same time, as if they were copying each other
You can't.
At least, not legitimately. There is no provision in the YouTube Iframe API for granting you access to the underlying video element.
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.
While browsing a youtube.com page is it possible to control the video player through javascript on that page? E.g. get the embed element and send it a "pause" message.
Could it be possible to use the Youtube JS API?
I have managed to do something similar by browsing the video as HTML 5 (using the &html5=1 query parameter), then getting the video element and calling play() or pause(). However not all youtube videos will show in HTML 5, some load as SWF even when requesting HTML 5.
Any ideas?
Edit:
Okay so given var player is the embed object, the functions such as player.playVideo() work, however I cannot seem to get events to work. E.g. player.addEventListener('onStateChange', myFunc) never calls myFunc. In fact the SWF object seems to swallow all events including 'click'.
Is there any way I can listen for when a user manually plays or pauses, without polling player.getPlayerState()?
The answer is just in the link you posted to the JS API. More precisely, here.
Excerpt:
Playing a video
player.playVideo():Void
Plays the currently cued/loaded video. The final player state after this function executes will be playing (1).
I have a video playing on my page. I want to show and hide some div's when the video reaches a certain point. Lets say hide something on 10th second and show it again on 20th second.
I can easily do it in HTML5 with video tag and currentTime attribute but for IE I have to create the same functionality and I think with flash based videos (from YouTube or something like that).
Is there a way to detect the current time of a video playing on my website, embeded from YouTube, Metacafe or any other video sharing site?
I know I could detect it in flash and make it run some JavaScript function but I don't have flash nor have the skills to do it in AS3.
Is it possible to do it from JavaScript level or does any video sharing website out there provides this kind of functionality for their videos?
You could look into using flowplayer, it exposes events for meta data and timing.
You can use ExternalInterface to communicate between flash and js. So inside the flash app, when the video reaches the defined time, you can trigger a call to js function, doing whatever you need with the divs.
Since you will need to receive a stream and you need to detect a specific point in the video I thing you have read this inside flash.