Let's make some noise! (Embedding Media at the Archive of Our Own)
Published: 2012-03-01 16:13:59 -0500
One of the Support tickets we're seeing more of is "How do I post my multimedia works?" It's not yet possible to host vids, art or soundfiles on the Archive, but you can embed works hosted elsewhere, so we wanted to let you know more about how to do that.
All information is current as of 1st October 2012, and is subject to change as we move forward.
Tags and Finding Audio-Visual Works
Right now, the best way to help people find your multimedia works is by adding the information in the Additional Tags Field. The current 'canonical' for audio fics (podcasts, audiobooks, and other such works) is the Tag Podfic, which has subtags for most of the file types (canonicals are the tags which show up in our browsing filters - other variants of the tag are hooked up to that so it finds them all). We also have a Podfic Available tag for authors who have audio versions of their work posted by another author or on another site. We also have a tag for Fanart, with many different subtags.
We also already have a lot of video under the Fanvids. Some are links to the works posted off-site, but many are embedded in the Archive and can be commented, kudosed, bookmarked, and shared!
We are discussing behind the scenes how to categorize audio/visual media works as we expand this aspect of the future, and at some stage will ask for public comment, so keep an eye out for that! Until then, find your favorite works in new forms, or tag your own works so others can find them!
Posting a New Multimedia Work
Right now, we don't have on-site hosting, so you'll have to host your file at another site such as Vimeo, YouTube, or your own website. You can always just create a link in your work so a user goes to your hosted site, but where's the fun in that? Here's what you need to know if you want to
just press play!
The HTML Sanitizer we use runs a very tight whitelist on sites we allow to provide media code (this is necessary in order to ensure we don't let malevolent code slip by). If it's not posted to one of these listed sites, the Sanitizer will delete the embed code entirely.
- viddler.com (See Known Issues, below)
- 8tracks.com (for playlists)
- spotify.com (for playlists)
We are currently keeping the whitelist short, evaluating each host site for stability, code vulnerability, content (whether fans are using it), and the size of its user base. (If you know of a site that you think should be on this list, submit a Support ticket and we will submit it for review. This may take a little while, so you may want to use another host.)
Some Notes about HTML Code
There are four ways to embed audio/video in HTML. Currently, we support code starting with the following three tags:
- <object> - this is the older method that YouTube and Vimeo used to embed video until recently. It's reported to be buggy on iDevices, so use with caution.
- <embed> - this tag is mostly used for audio, and occasionally to simplify the mess that <object> generates. It's a lot easier to read and compatible with more platforms, so if you have a choice between <object> and <embed>, choose the latter.
- <iframe> - This is the newest style media embedding tag that we currently support and the most widely accepted for mobile media. Unlike the other tags, <iframe> functions as a separate window within your page to generate the content. This means that a user running NoScript, AdBlock, or similar may have to specifically request to see your media. By default, YouTube, Vimeo, and many other sites will try to give you <iframe>.
We do not actively support:
- <audio> or <video> - These are new HTML5 tags, and while they're great in concept, cross-browser implementation is currently spotty. One of the major problems is you need two different versions of the same file to be guaranteed to play in any browser. The Archive's HTML Parser will remove any <audio> or <video> tags.
If you are writing your own embed code and find a property stripped out that you think should remain, let us know!
Many websites that host your images will provide the code to embed the image in another site. Just remember that the code has to be posted into the HTML Editor, not the Rich Text Editor. Some sites do provide a lot of formatting in their code. The part you absolutely need to keep is the
<img src="... /> portion.
If you prefer to use the Rich Text Editor, you can click on the "Insert Image" icon. You will need the actual link to the image, instead of the whole embed code. It will be something like
http://www.host.com/.../image.png - It has to have the file extension at the end, though!
We currently don't restrict image sources, but if you find a site that isn't working, let us know via Support!
Like images, most websites that host video for you for you will provide you the embed code to place in a post - you can just copy and paste this code into the HTML editor of a new work, tag it and post it! (See Known Issues below)
Embedding video is fairly straightforward if you're using the above sites. Embedding audio, on the other hand, requires passing the data through Google's public audio player.
- Find the direct link to your audio file. The file has to be in the MP3 format - none of the other common audio file types will work consistently.
- In your work, in the HTML editor, copy and paste the following:
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="http://archiveofourown.org/system/dewplayer/dewplayer-vol.swf" width="250" height="27" allowscriptaccess="never" allownetworking="internal"></embed>
MP3_FILE_URLwith the full link to your audio file. Make sure to include the
http://from the address, or the plug-in will be very confused. Also make sure your browser hasn't given you "smart" angled quotes. There are several other player versions available at our post announcing the new player software.
- Once you post the work, make sure to press play to verify all the servers can find each other.
- Pasting with quote marks: Several of the major browsers are converting regular quote marks to angled smart quotes when pasting in code. These smart quotes will be stripped out by the parser, rendering the code unusable and causing the entire embed to be stripped out. You'll need to manually go through the pasted code and replace the "smart" angled quotes with straight double quotes.
- Viddler: There is currently a flaw in Viddler's embed code - it leaves the "http:" off the front of the actual source location. If you are using Viddler, you will need to manually adjust the code to be
In the future, we would like to provide on-site hosting of multimedia (it's likely that fanart will be the first media type we are able to support). If you have particular experience hosting, coding, and streaming multimedia works over the web, and are willing to volunteer, get in touch with the OTW Volunteers and Recruitment Committee and make sure to list your multimedia experience in the Additional Interests section!