- The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Unlike the Flash and JavaScript player APIs, which both involve embedding a Flash object on your web page, the IFrame API posts content to an
<iframe> tag on your page. This approach provides more flexibility than the previously available APIs since it allows YouTube to serve an HTML5 player rather than a Flash player for mobile devices that do not support Flash.
- Using the API's
JavaScript functions, you can queue videos for playback; play, pause,
or stop those videos; adjust the player volume; or retrieve information
about the video being played. You can also add event listeners that will
execute in response to certain player events, such as a player state
change or a video playback quality change.
- It briefs the
different JavaScript functions that you can call to control the video
player as well as the player parameters you can use to further customize
the player.
Any web page that uses the IFrame
API must implement the following JavaScript function:
onYouTubeIframeAPIReady – The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.
Loading a video player
After the
API's JavaScript code loads, the
API will call the
onYouTubeIframeAPIReady function, at which point you can construct a
YT.Player object to insert a video player on your page. The
HTML excerpt below shows the
onYouTubeIframeAPIReady function from the example above:
var player;
var pVars = {
controls : 0,
playsinline : 1,
autohide : 1,
showinfo : 0,
modestbranding : 1,
height : '100%',
width : '100%'
};
var vID = 'M7lc1UVf-VE';
function onYouTubeIframeAPIReady()
{
player = new YT.Player('player', {
playerVars : pVars,
videoId: vID,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
To call the player
API methods, first get a reference to the player object you wish to control. You obtain the reference by creating a
YT.Player object as discussed above.
Playback controls and player settings
Playing a video
player.playVideo():Void- Plays the currently loaded video. The final player state after this function executes will be
playing (1).
Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player.
player.pauseVideo():Void- Pauses the currently playing video. The final player state after this function executes will be
paused (2) unless the player is in the ended (0) state when the function is called, in which case the player state will not change.
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void- Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (
playing, video cued, etc.), the player will play the video.
- The
seconds parameter identifies the time to which the player should advance.
The player will advance to the closest keyframe before that time unless the player has already downloaded the portion of the video to which the user is seeking. In that case, the player will advance to the closest keyframe before or after the specified time as dictated by the seek() method of the Flash player's NetStream object. (See Adobe's documentation for more information.)
- The
allowSeekAhead parameter determines whether the player will make a new request to the server if the seconds parameter specifies a time outside of the currently buffered video data.
Here is a working Android demo
https://github.com/zenith22/YoutubeIFrameAPIDemo
For more details please refer
YouTube IFrame Player API
