In exploring the HTML language in more detail I came across the
crossorigin attribute that can be used on media elements such as
audio. The specification of this seems pretty foggy to me so I went in search of some answers. Below is where I am currently at in my understanding of the use and purpose of this attribute.
When a video resource is loaded by the user agent it goes through a multitude of steps before the video is loaded and played. One of these steps is called the resource selection algorithm. As the name suggests, this is where the user agent will select which of the specififed media elements it will play, based on outcomes such as whether the media type can be played by the user agent or, whether loading of the media resource was successfull or failed.
It can also be specified using the
src attribute of the video element or, specifying one or more resource locations using nested
Once the user agent has selected the media resource to load, it calls the resource fetch algorithm. This algorithm has one of two paths it can follow and, for all but when called with an object, as defined above, this will be called with a URL and follow the "mode is remote" path.
In general a user of the video element will not be overly concerned about this process. However, if you wish to do more with video data that is loaded via a cross-origin request, you need to be aware of this process and in particular, the
crossorigin attribute and it's role.
crossorigin attribute has one of two possible values:
It is important to note that what follows relates to the Fetch standard which is in the process of being integrated into HTML. When you use the
crossorigin attribute it sets the "use-URL-credentials" flag and maps
anonymous to "same-origin" and
use-credentails to "include" for the crendentials mode. If you omit the
crossorigin attribute, "use-URL-credentials" is unset and, the default for credentials mode is assumed, which is omit.
The use, or omission of the
crossorigin attribute then also plays a role in the
Access-Control-Allow-Credentials header in determining whether access to a resource should be allowed if credentials mode is set to "include"[
crossorigin when loading data from third parties is especially important if you want to use the data obtained for anything more than basic interactions. If a video has associated metadata related to subtitle tracks or chapter titles for example, it will not be loaded if a CORS resource sharing check is not passed. As such, if you require access to this metadata and it is protected you will need to set
crossorigin to "use-credentials".
Another example where the use of this attribute is important is when painting video data to a
canvas. If the CORS resource sharing check fails in this scenario, the
origin-clean flag of the canvas will be set to false, tainting the
canvas, and subsequent calls to the element's
getImageData() functions will result in a
SecurityError to prevent leaking cross-origin data.
This post could not have written without the generous help from the folks on the #whatwg IRC channel and in particular annevk [Anne van Kesteren] /