The API will pass an event object to the event listener function. onError: This event fires if an error occurs in the player.The data property value of the event object that the API passes to the event listener function will be a number that identifies the new playback rate. onPlaybackRateChange: This event fires whenever the video playback rate changes.The data property value of the event object that the API passes to the event listener function will be a string that identifies the new playback quality. onPlaybackQualit圜hange: This event fires whenever the video playback quality changes.The data property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. onStateChange: This event fires whenever the player’s state changes.Your application should implement this function if you want to perform some action as soon as the player is ready. onReady: This event fires whenever a player has finished loading and is ready to begin receiving API calls.The following list defines the events that the API fires: The Youtube IFrame API fires events to notify your application of changes to the embedded player. You can also customize the play by using the player parameters (the same as the ones used in the embedded video URLs) Reacting to Events To get notified of other video events, you have to create the event handlers yourself and add them to the “events” property of the YT.player constructor call. Normally, this function is used to create the player objects that you want to display when the page loads. The API will call only this function once, when the page finishes downloading the JavaScript for the player API, which enables you to then use it on your page. See the Pen Simple YouTube Video Loading by Iván Melgrati ( on CodePen.
Any web page that uses the Youtube IFrame API must also implement this JavaScript function. Getting StartedĪs soon as the API finishes loading and ready to receive calls it invokes a JavaScript function named onYouTubePlayerReady(). 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. Using the Youtube IFrame API’s JavaScript functions you can control video playback (play, pause, or stop videos adjust the player volume or retrieve information about the video being played. Youtube makes use of postMessage() to enable cross-domain, event-driven communication between a Web page and the video players embedded in it. The postMessage() method safely enables cross-origin communication between window objects e.g., between a page and a pop-up that it spawned, or between a page and an IFrame embedded within it. The postMessage() method lifts this restriction by providing a way to securely pass messages across domains.Īll modern browsers support postMessage(), though (very) old Internet Explorer versions (older than IE 8) did not support the communication feature.
#Javascript embedded video windows
So, if we cannot use external scripts, how can we communicate with embedded video players hosted on YouTube’s external servers? Enter postMessage()įor a long time sending messages between windows was only possible if the windows used the same protocol, port, and host (known as the “ same-origin policy” or CORS policy) to prevent malicious cross-site scripting ( XSS) attacks. Usually, scripts on different pages are allowed to access each other if and only if the scripts originate from the same website (protocol, port number and host) as the pages they’ll run on. This way, you are no longer constrained to delegating video control to YouTube or play videos locally (by loading heavy video files onto your website). The Youtube IFrame API allows you to embed a YouTube video player (using an IFrame to contain the video) on your website and control the player using their JavaScript API that works across IFrames.
0 kommentar(er)
