The API calls this function when the player's state changes. The API will call this function when the video player is ready. This function creates an (and YouTube player) Var firstScriptTag = document.getElementsByTagName('script') į(tag, firstScriptTag) Var tag = document.createElement('script') This code loads the IFrame Player API code asynchronously. (and video player) will replace this tag. The numbered comments in the HTML are explained in the list below the example. The sample HTML page below creates an embedded player that will load a video, play it for six seconds, and then stop the playback. Thus, this function might create the player objects that you want to display when the page loads. 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. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.Īny web page that uses the IFrame API must also implement the following JavaScript function: If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. Most modern browsers support postMessage.Įmbedded players must have a viewport that is at least 200px by 200px. The user's browser must support the HTML5 postMessage feature. It also details 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. It identifies the different types of events that the API can send and explains how to write event listeners to respond to those events. This guide explains how to use the IFrame API. You can also add event listeners that will execute in response to certain player events, such as a player state change. 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. Here are the notes on my findings, first using a keyboard alone and then a screen reader for the platform.The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. For our case, needing to support multiple platforms, it made sense to only test Plyr as a non-native solution. I did not test either YouTube or Vimeo embedded players on their own. Others did not trap keyboard focus in full-screen mode, leading to a similar situation as an inaccessible modal window allowing content to be accessed "behind" the window. One player in particular featured very awkward keyboard support where controls were visible on the screen but could not be focused. Some lose focus when the video controls receive focus then fade away, forcing the user to re-position themselves to adjust playback. There were a lot of inconsistencies across the board as far as keyboard and screen reader support. This is my opinion stemming from experience, but I found most to have poor keyboard and screen reader support, which may lead to frustrated users. In case you don’t make it all the way to the bottom, I feel, based on the results of testing each player (and comparing to my own Accessible Video Player project), that relying on native video players should be used with caution. The results are pretty much what I expected. This included various operating systems, browsers, and screen readers. To answer this question I set out to conduct a series of tests for native video player accessibility. "How is Plyr more accessible than native players? Isn't HTML video accessible already?" Some folks asked for more details on why we decided to go with Plyr as opposed to the native HTML video player. Other custom accessible video players were considered, but did not support all the features we required.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |