Archive of Our Own ^beta

We're excited to announce we've recently added support for the <audio> and <video> HTML elements! With this change, you'll be able to use these tags to embed your self-hosted audio or video fanworks on AO3.

Unlike the Flash-based audio player we already offer, these new elements will work in all modern browsers, and they will continue to work even after Adobe ends support for Flash in 2020. (While we have no plans to remove Dewplayer at this time, we strongly recommend updating to the <audio> tag.)

Basics

There's still a lot of design, policy, and coding work to do before we can host audio and video files, so for now you'll need to upload your files to your own web space. Once you've done that, you can embed the file in your work with a small bit of HTML:

• <audio src="AUDIO URL"></audio>
• <video src="VIDEO URL"></video>

That's all it takes! Exactly how the resulting media player looks depends on the browser being used to access the work. We do, however, make sure that playback controls are available and adjust the width of videos using CSS to ensure big videos will fit on everyone's screens. We also make sure autoplay can't be enabled, and we add the preload attribute to gently suggest browsers save bandwidth by not loading the full file until you press play.

Complex examples

If you'd like to do something more complex, we support that as well. For example, you can include a poster for your video using the poster attribute (poster doesn't work for audio, but you can still include an image above your audio player):

<video src="VIDEO URL" poster="IMAGE URL"></video>

Because some older browsers don't support these elements, you can also include fallback text on either element to provide a download link:

  
<audio src="AUDIO URL">
  <p>Your browser doesn't support streaming with the HTML5 audio tag, but you can still <a href="URL">download this podfic</a>.</p>
</audio>

Because different browsers support different file formats, you might want to use the <source> element to include multiple formats.

  
<video>
  <source src="WEBM VIDEO URL" type="video/webm">
  <source src="MP4 VIDEO URL" type="video/mp4">
</video>

If you'd like to include captions or subtitles to improve the accessibility of your media file, you can do that with the <track> element:

  
<video>
  <source src="VIDEO URL" type="video/mp4">
  <track src="SPANISH SUBTITLE URL" kind="subtitles" srclang="es" label="Spanish" default>
  <track src="ENGLISH SUBTITLE URL" kind="subtitles" srclang="en" label="English">
</video>

List of allowed tags and attributes

Here is a full list of the tags we've added support for and which attributes you can use on them.

<video> element

• class attribute
• dir attribute
• height attribute
• loop attribute
• muted attribute
• poster attribute
• src attribute
• title attribute
• width attribute

<audio> element

• class attribute
• dir attribute
• loop attribute
• muted attribute
• src attribute
• title attribute

<track> element

• default attribute
• kind attribute
• label attribute
• src attribute
• srclang attribute

<source> element

• src attribute
• type attribute

You can get more information on using these elements and their attributes in these articles from MDN:

• Video and audio content
• The Video Embed element
• The Embed Audio element
• The Media or Image Source element
• The Embed Text Track element

Edit November 8 at 07:53 UTC: If your audio or video file isn't loading on the Archive, you probably need to enable Cross-Origin Resource Sharing (CORS) on your website. Your web host's documentation or support department should be able to help.