The onYouTubeIframeAPIReady() Event: Where It All BeginsĪs soon as the API is done loading and ready to receive calls it invokes a JavaScript function named onYouTubePlayerReady. Include a script tag in your document and point the src to “the ” and you’re done. You’ll also need to reference the API script itself. Note that the last part before the question mark is the VIDEO_ID: Here’s a URL that loads an embedded video player. Setting it to 1 turns on the JavaScript API.įor example, to enable the API in a chromeless player so that you can build your own custom player controls, modify the URL as follows: The solution they came up with was to add a query parameter to the URL called “enablejsapi”. The designers of the API faced the challenge of making the API player agnostic so that it would work for any player type and generation style (markup vs. ![]() In today’s article we’ll learn how to configure a video to use the API to respond to events. For more fine-grained control over events and all aspects concerning playback you can’t do better than the YouTube JavaScript Player API. There’s only so much you can do using an embed URL or the YouTube Video Editor. In that case, obtain its video ID from the event.There are certain video events that you can respond to such as when the video starts, stops, is paused, or is buffering. Then, if and when the video enters the “unstarted” state, if the flag contains a value of true, you’ll know that it’s a new video that just started playing. When a video starts playing, set your flag to true. In JavaScript, omitting the “var” keyword will append it to the global window namespace. Declare a global variable to act as a flag. Perhaps you’d like to change the page in which the video is embedded in order to display some pertinent information about the video. Replacing the Page Based on Video SelectionĪt the end of a video, the YouTube player displays related videos within the embed iFrame. Meanwhile, event names like “onYouTubeIframeAPIReady” help identify it as part of the IFrame API. For one thing, the presence of an SWFObject would be a dead give-away to the JavaScript API. It’s easy to think that the JavaScript API is alive and well because the IFrame API also uses JavaScript! However, the two APIs do differ in syntax. 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. …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 tag on your page. Flash and JavaScriptĪccording to YouTube, the prevailing factor in their decision to go with the IFrame API was that, ![]() In today’s follow-up, well take a look at some of the ways in which developers commonly respond to various events. ![]() In the Respond to Embedded YouTube Video Events tutorial, we learned what events the API exposes. That leaves the IFrame Player API as the goto approach for achieving a more granular control over a video’s playback and events. Well, guess what as of January 27, 2015, both the YouTube JavaScript and ActionScript 3.0 Player API (also known as the YouTube Flash API), were officially deprecated. In that tutorial, I made a passing reference to the Flash player. In the There’s More than One Way to Play Embedded YouTube Videos! article, I described several different ways to go about embedding YouTube videos in a web page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |