- 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.
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 theended
(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 theseek()
method of the Flash player'sNetStream
object. (See Adobe's documentation for more information.) - The
allowSeekAhead
parameter determines whether the player will make a new request to the server if theseconds
parameter specifies a time outside of the currently buffered video data.
- The
For more details please refer YouTube IFrame Player API
Is there a way to get rid of the black screen that shows before the video starts? To be more specific it is black with a grey circle and a grey play button in the middle.
ReplyDeleteThx
This comment has been removed by the author.
ReplyDelete