AO3 News

Post Header

Adobe is ending support for the Flash plugin next year. As a result, the AO3 will no longer be supporting the Dewplayer MP3 player to present audio playback. In the near future, we will convert the code in existing works to use the HTML5 <audio> tag.

While we can automatically make this change for works using Dewplayer, other works may also be affected by the end of Flash. If you have works with audio or video content, we strongly encourage you to change your existing works to use the <audio> or <video> tags as well, or to use updated code from your audio or video hosting site.

What is "Flash" and when does support end?

Flash is an Adobe program that was used to play audio and video on websites across many platforms since the late 1990s. However, it has a history of security vulnerabilities, and technology has provided new ways to do many things that once required Flash.

Many mobile browsers have not supported Flash for several years now, and Adobe has announced they will stop updating and distributing the software after December 31, 2020. They will also block it from playing any content after January 12, 2021.

For more information, please refer to Adobe's Flash Player End-of-Life Information Page.

How does that affect the AO3?

The Dewplayer plugin, a Flash-based mp3 player that we have used for podfic and other audio fanworks, will no longer function. Some older embed codes provided by other audio or video hosting sites will also stop working. For example, YouTube videos embedded before they switched to <iframe> tags in 2017 may stop working.

If you have any works with embedded audio or video, we recommend checking to make sure the audio or video still plays after January 12, 2021. If it doesn't, please make sure you are using the latest embed code from your hosting site, or consider switching to the audio or video HTML tags.

What happens to existing works using Dewplayer?

We will in the near future run a process on the AO3 to find works posted using the Dewplayer plugin and automatically convert the relevant HTML to use the <audio> tag.

Can I still use Dewplayer after December 31?

No, Adobe expects that major browsers will disable Flash after this date, so Dewplayer will be non-functional. We will eventually be removing our copy of the Dewplayer code entirely. We are also developing a change to the HTML sanitizer that will strip out any new attempts to use Dewplayer and replace it with HTML <audio> tags.

Can I fix my works myself?

You can manually edit the code yourself.

  1. Navigate to the work and select Edit.
  2. In the HTML view, look for the section of code that says
    <embed type="application/x-shockwave-flash" flashvars="mp3=AUDIO_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer.swf" width="200" height="27" allowscriptaccess="never" allownetworking="internal"></embed>
  3. Copy the AUDIO_URL part. This will be a full URL that ends in ".mp3".
  4. Delete the code and paste in
    <audio src="AUDIO_URL"></audio>
  5. Replace the AUDIO_URL with the link you copied in step 3.
  6. Repeat this for any other embedded audio tracks in the work and select Update at the bottom of the page.

You can also use more complicated attributes and settings that are listed in the Embedding with the Audio and Video Tags news post.

How do I post new audio or video content now?

If you are using embed code from your video or audio hosting site, you should be able to paste it in using the HTML editor. If your embed code comes from a site not listed at "What sites can I use for hosting multimedia files?", please contact Support regarding getting your site added to the permitted list.

If you would like to use HTML <audio> or <video> tags, you can do so using the information and settings listed in the Embedding with the Audio and Video Tags news post.

If I have any questions?

You can get more information on using these elements and their attributes in these articles from Mozilla Developer's Network:

If you need more help, please submit a Support request.

Comment

Post Header

In the next few days, we'll be making a small change to the way images are displayed in fanworks. To make the Archive friendlier for smaller screens, we're updating the default display of images to ensure they won't be any wider than the full width of your screen.

Before and after: A work with the AO3 logo partially cut off on the right side, and with image resized so the full image fits on screen.

This change will apply to both new and existing works, and it's being done using CSS. That means it only affects how the image is displayed on the Archive -- the image files themselves are not being modified.

If you're an artist and you'd like to make it easier for others to view your art in a larger size, we recommend providing a link to the full size image. Our FAQ describes how to make a link with HTML, or you can use the link button on our rich text editor.

Art lovers who'd like to view an image at full size, your browser can probably help! The directions will vary depending on your device and browser, but generally, you can right-click (or your device's equivalent) on an image to open a menu, which should have an option for opening the image in another tab or copying the image's web address, which you can then visit. For more detailed instructions, we recommend going to your favorite search engine and searching for "open image in another window" and the name and version of your browser, operating system, or device.

Comment

Post Header

Published:
2019-11-07 03:36:14 -0500
Tags:

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:

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.

Comment

Post Header

If you have podfic, fanvids, or other works with embedded media, users who currently opt to browse the Archive over HTTPS (e.g. via a browser extension) may be unable to access your work. Before we move the Archive to HTTPS, we'll be making some changes to existing audio and video embeds to prevent more widespread issues, but there are also steps you can take now to ensure your content loads for everyone.

The problem

Many of the media players in AO3 works use HTTP links to embed Flash files for playing back audio or video. For example, here's the code for an audio player that uses an HTTP URL as its src:

<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="http://archiveofourown.org/system/dewplayer/dewplayer.swf" width="200" height="27" allowscriptaccess="never" allownetworking="internal"> </embed>

If someone uses HTTPS to access a work with code like that, their browser will notice a mismatch between the page they're on (HTTPS! secure!) and the content it's being asked to display (HTTP! not secure!). When this happens, many browsers will err on the side of security: they won't load or display the embedded media.

Most browsers do allow users to override this behavior and display insecure content, but how easy that is varies a lot from browser to browser, and the process can change from one browser version to the next. (A web search for "display mixed content" plus the name and version of your browser should provide the information you need.) Whenever possible, it's easier -- and safer -- to tell the browser to load the file over HTTPS.

What you can do

To help the browser out, you can simply add that little "s" to the relevant bit of your embed, which will create a secure connection to the file in question. The vast majority of our whitelisted multimedia players already offer HTTPS support. If you only have a few works with audio, video, or even image content which link to external media, you can edit your works, look for the src part and turn the http bit into an https. That's it!

This will ensure that everyone can access your podfic, fanvid, art, or other media, even if they're browsing the Archive in HTTP mode. (Browsers are cool with that mismatch.)

What we will do

Since we can't expect all our users to edit all their multimedia works by hand, we will ensure that all embeds use the correct linkage by doing one big find-and-replace on our end. Because we only allow embeds from a few sites, we can easily find the affected works by searching our database for specific HTML. Then we can run a few simple commands to update the embed code's src from http to https.

This will not touch the content of your work in any way, or alter anything about your work that isn't neatly bracketed by a pair of very specific quote marks. When it's all done, your content will be accessible to users browsing the Archive in secure mode, if it wasn't before. \o/

We are planning to do this on October 4th, right before we switch to HTTPS mode on the AO3.

To make sure that works posted from now on won't run into this problem, we've updated our code to ensure embeds use https links where available, and edited our documentation for audio player embeds.

Edit 09:24 UTC on 05 October, 2017: The update to embedded media files has been completed, but attempts to move the Archive to HTTPS were unsuccessful. HTTP will remain the default for a little while longer, and we'll update you via our Twitter account when we're ready to try again.

Edit 19:16 UTC on 12 October 2017: We successfully made the switch to HTTPS for a few days; however, the extra strain from encrypting all traffic proved too much for our servers at peak times. Until we have installed additional servers (coming soon!), HTTP will remain the default protocol. (Of course, you can still elect to use a secure connection, e.g. via a browser extension like HTTPS Everywhere.) Please follow @AO3_Status on Twitter for futher updates.

Edit 22:15 UTC on 14 October 2017: We have implemented the caching needed to reduce server strain and are currently back on the secure protocol by default. We believe we'll be able to remain on HTTPS, but if it proves too much, we will switch back until our new frontend servers arrive.

Edit 18:28 UTC on 19 March 2018: We have successfully installed our new frontend servers and are now permanently enforcing HTTPS on the Archive. \o/ We still provide HTTP access via insecure.archiveofourown.org.

Comment

Post Header

Published:
2014-10-07 13:23:45 -0400
Tags:

OTW Announcement Banner by Diane'

The OTW's Fan Video & Multimedia Committee and Legal Committee are once again working to petition for a DMCA exemption granting vidders, AMV makers, and other creators of noncommercial remix video the right to break copy protection on media files. In 2010, we won the right to rip DVDs; in 2012, we got that exemption renewed and expanded to include digital downloads (iTunes, Amazon Unbox, etc.).

This year, we'll not only be pushing to renew the exemptions we've already won in the last two rounds of DMCA rulemaking, but also pushing to add Blu-Ray and streaming services.

And we need your help to do it! If you make or watch vids, AMVs, or other forms of fan video, we need you to tell us:

1. Why making fan videos is a transformative and creative act;

2. Why video makers need high-quality source;

3. Why video makers need to be able to manipulate source (change speed and color, add effects, etc.);

4. Why video makers need fast access to source (such as using iTunes downloads rather than waiting for DVDs);

5. Why video makers need to be able to use Blu-Ray;

6. Why video makers need to be able to use streaming sources; and

7. Anything else you think we should keep in mind as we work on the exemption proposal.

We're also looking for vids that we should add to the Fair Use Test Suite, and we'd love to have your suggestions.

If you have thoughts about any or all of these topics, please send them by e-mail to the Legal Committee at legal at transformativeworks dot org or the Fan Video & Multimedia Committee at fanvideo-chair at transformativeworks dot org. You don't have to use your real name; we can use your name or pseudonym or describe you anonymously as "a vidder" or "a fan video artist."

The DMCA is U.S. copyright law and only directly affects U.S. vidders, but it does potentially have ripple effects outside the U.S.: Strong DMCA exemptions help send the message that fan creativity should be protected everywhere. With that in mind, please feel free to send your thoughts even if you don't live in the U.S.

Also, please help us signal-boost! This info is being posted to all the OTW and AO3 News sites; if you can think of other places the OTW should post, please let us know—and if you can spread the word in your own networks, on streaming sites, etc., please do.

Comment

Post Header

Banner by Diane with the outlines of a man and woman speaking with word bubbles, one of which has the OTW logo and the other which says 'OTW Announcement'

The OTW released a video in April that provides an overview of our work and gives non-fans an introduction to fannish works. Our translation volunteers have now produced captions for the video in the following languages: Arabic, Catalan, Chinese, Dutch, Finnish, French, German, Hungarian, Indonesian, Italian, Polish, Portuguese, Russian, Spanish, Swedish and Turkish.

To enable subtitles in your language of choice on the video below, click on the "CC" button next to the volume and HD options.

All these subtitles are also available on the video we have hosted on YouTube. Just click on the rectangular Captions/CC button in the lower right hand corner of the video and select the language.

If you wish to download a copy of the video with your preferred subtitles, use the links below:

Special thanks to all the volunteer translators who worked on this project!

Our Translation team would also love to have this video narrated in as many languages as possible! Can you help? If you're fluent in a language (or more!) other than English and are willing to help record the voiceover track, please contact us. We'd be thrilled to work with you!

Comment

Post Header

Banner by Diane with the outlines of a man and woman speaking with word bubbles, one of which has the OTW logo and the other which says 'OTW Announcement'

The OTW's April membership drive has officially ended, and we'd like to thank everyone who came out to support it. Your generosity and efforts in spreading the word have made this our most successful drive ever! Since April 3 we've received more than 2,800 individual donations totaling over US$63,000. We've also raised the OTW's membership to at least 4,869 people!

Thank you to all our members, donors, and to everyone who helped spread the word to make this drive such a spectacular success. We’re very grateful for your support! We’d also like to thank all the OTW staffers and volunteers who supported the drive by creating, translating and posting content, responding to donor inquiries, designing graphics, sending e-mail blasts, monitoring donation receipts, and myriad other tasks. Thank you for making the drive possible.

Although this drive is over, we gratefully accept donations throughout the year. This year we also have a very special project to share with you, that you may want to use when telling others why you support the OTW.

Thanks to the amazing vidding skills of Ash48, and the fanwork contributions of dozens of fans, we are proud to present a video introduction to the OTW.

The OTW video explains to people unfamiliar with fandoms and fanworks what it is that the OTW does. It defines transformative works, and provides an overview of our projects as well as an insight into what fans create.

We hope that you'll share the video with fans and non-fans alike. You can find it on YouTube, Vimeo, and Critical Commons, as well as on the OTW website.

The OTW's volunteer translators are currently working on subtitles for Arabic, Catalan, Chinese, Dutch, Finnish, French, German, Indonesian, Italian, Polish, Portuguese, Spanish, Swedish and Turkish. As each translation is completed, we will be sending out tweets and tumblr posts promoting it.

We would also love to have this video narrated in as many languages as possible! Can you help? If you're fluent in a language (or more!) other than English and are willing to help record the voiceover track, please contact us. We'd be thrilled to work with you!

The participation and collaboration of fans everywhere is what keeps the OTW and all its projects going. Thank you for being a part of it!

Comment

Post Header

Published:
2012-09-21 04:57:31 -0400
Tags:

While we're not yet able to host media types other than text, we're working on making the site more welcoming to multimedia works. As part of this, we encourage users to embed podfics and vids. In 2012, Google implemented server restrictions on their media player embedding solution that many of our users had used to post podfic, causing the works to not play any more. As a stopgap, we looked at several solutions, including continuing to expand our whitelist and locally hosting a copy of the Google code. We wanted, however, to have a more open-source solution that we will be able to fully support going forward, and preferably one without too much adjustment for the users.

After some debate and discussion, we have installed locally on the Archive a copy of Dewplayer, a Flash-based CC BY-ND 2.0 MP3 player. By hosting the player on the Archive, we have better confidence in the safety and security of the code, and because it is licensed under the Creative Commons, we're more confident we can provide this solution for the future.

One of the nice features of Dewplayer is that it by default comes with several different player skins. We recommend the Classic and Bubble skins, and the Volume variations of each. You will still need to have your files hosted on another server for now, though. Once you have the file hosted, just replace MP3_FILE_URL in the code for your favorite player below. (We should also note that several users have reported their browser pasting smart quotes again, so be sure to convert any of those back to normal double quotes!)

Classic

the Dewplayer Classic skin
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer.swf" width="200" height="27" allowscriptaccess="never" allownetworking="internal"></embed>

Classic with Volume control

the Dewplayer Classic skin with volume control
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer-vol.swf" width="250" height="27" allowscriptaccess="never" allownetworking="internal"></embed>

Bubble

the Dewplayer Bubble skin
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer-bubble.swf" width="250" height="65" allowscriptaccess="never" allownetworking="internal"></embed>

Bubble with Volume controls

the Dewplayer Bubble skin with volume control
<embed type="application/x-shockwave-flash" flashvars="mp3=MP3_FILE_URL" src="https://archiveofourown.org/system/dewplayer/dewplayer-bubble-vol.swf" width="250" height="65" allowscriptaccess="never" allownetworking="internal"></embed>

Comment


Pages Navigation