For my application, I am trying to use the YouTube Iframe player API to play videos, and allow the user to change videos without reloading the page.
I accomplish this by using the player.loadVideoById(video_id) method. After loading the video via YouTube video id, I also want to capture all relevant information about the video. However, I notice that none of the get functions work right away, including getDuration(), getCurrentTime() and getVideoData().
I have found a scrappy solution of using a setTimout to get the information about 1-2 seconds after using player.loadVideoById(video_id), however, I do not think this is the proper solution.
It seems to me that loadVideoById(video_id) is asynchronously fetching the data from YouTube. Is there a callback function available to use? I could not find one in the docs. Please help.
Thanks!
There are quite a few Events available that you can utilise I think.
Here is an example of tracking YT.PlayerState.PLAYING state, falling within the onStateChange event, which is basically saying that the video is currently being played.
player.addEventListener(YT.PlayerState.PLAYING, onVideoPlaying, false);
function onVideoPlaying() {
console.log('currentTime:', player.getCurrentTime(), 'duration:', player.getDuration());
}
Hope this helps.
Related
I'm running a projet of video galery. My problem is I want to the use the YouTube system so that when I click on a video in the list of the galery it appears in the main space and start playing (exactly what happens in YouTube). How can I do this please ?
Thanks
firstly, get the youtube api and a fetch method to get the videos,
now loop through the data returned and present it in the manner you want it. write a play method that will open a selected video on a play canvas, this is how I think you can implement what you want in bare design thinking. I dont know what technologies you're using, in my free time I'll write an example implementation in vue.js or react.js
Question:
How can I control the sound output of this embedded video without overly complicating things?
Possible Solution (Complex)
I've looked into the youtube javascript control API, and, correct me if I'm wrong, but that will force me to incorporate a lot of complication into the setup to accomplish what appears to be a very simple task.
Note:
This is all only tested for webkit at this stage
Setup:
I've created an element that simulates an iphone controlling the channel of a tv by swapping youtube videos like so:
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
});
where the #channel-1 id is connected to a specific button on the remote, and the tv id is connected to the video player.
It looks like this:
Edit:
If the API is the only to accomplish this, please include a link to a comprehensive tutorial teaching the youtube web API, because I've looked, and found nothing. The only thing I've found so far is the official API page, and that's like trying to learn PHP from the manual.
For loading videos you would use loadVideoById rather than the rather odd snippet you have in your question and to play without audio you simply mute the player using player.mute() (where player is a reference retrieved from the youtube player element itself like described here). And one last thing, don't forget to add enablejsapi=1 to the url of the player as described here.
I would use
event.target.mute();
I am wondering is there Java Script library or script or any trick which can detect flash video length and show play again and next video after its end.
As YouTube do.
any reference example or tutorial can also help me.
I am here after Google.
What you really want is the flash video player to make an ExternalInterface call to javascript letting it know it has completed. You would need access to the flash file to accomplish this.
You could technically track the video play progress with javascript and load the next video on complet. The problem with this is that it would require you not only to know the length of the video, but also when it plays/stop. The only way to do that is by having flash make ExternalInterface calls. At that point, you might as well just listen for the video's complete event.
I work on a website that embeds videos from many different websites, the number of sources run into the thousands. For YouTube, their JavaScript API allows a way to detect when the video ends and one can execute any function he wants at that time. But this will only work for the youtube videos. What about all the others?
So is there a global all applicable way to detect when the Flash video on a page has stopped playing using either javascript or action script? And by "stopped playing" I mean stopped playing when it reached the end and not just been paused half way.
P.S. There will always be one embedded video inside a <div> with the id video on the page.
Just like YouTube provides an API, those players from those external websites have to provide their own APIs as well. There isn't an easy one-size-fits-all solution that you can implement in JavaScript.
I know that there's a very similar topic for this question, however I'm trying to do something a little different.
all of this is a little new for me... sorry...
Basically I'm trying to play multiple YouTube Videos in one page at the same time (mash up style) using YouTube API and JS
the thing is i want to control each of them separately, while they all playing. i found the code that is close to what i want. the thing is that the videos cannot be played together, once you hit play on a video the other one stops.
how can i control them separately, and still have the other videos playing in the background and not being influenced ?
here's the code i found on another topic
Thanks in advanced,
Maayan
The YouTube code playground has an example for this.