Page tree
Skip to end of metadata
Go to start of metadata


The Avalon media player of choice is a fork off of RealGravity's fork of John Dyer's popular player.


The fork allows us to seamlessly use both RTMP and HLS streaming in one place. 

<video controls width="450" height="309" style="width: 100%; height: 100%" id="video-tag" poster="/master_files/avalon:123/poster" preload="true">
  <source src="rtmp://" data-quality="low" data-plugin-type="flash" type="video/rtmp"/>
  <source src="rtmp://" data-quality="medium" data-plugin-type="flash" type="video/rtmp"/>
  <source src="rtmp://" data-quality="high" data-plugin-type="flash" type="video/rtmp"/>
  <source src="" data-quality="low" data-plugin-type="native" type="application/"/>
  <source src="" data-quality="medium" data-plugin-type="native" type="application/"/>
  <source src="" data-quality="high" data-plugin-type="native" type="application/"/>

To turn this HTML5 video placeholder into a MediaElement.js player, use the following javascript

  currentPlayer = new MediaElementPlayer('#video-tag', 
    { mode: 'auto_plugin',
      pluginPath: "/assets/mediaelement_rails/",
      usePluginFullScreen: false,
      thumbnailSelectorUpdateURL: '/update-url',
      thumbnailSelectorEnabled: true,
      features: ["playpause", "current", "progress", "duration", "qualities", "volume", "fullscreen", "thumbnailSelector"]
  • mode: 'auto_plugin' Flash first and fallback to HTML5
  • usePluginFullScreen: false Attempt to use HTML5 fullscreen API
  • thumbnailSelectorUpdateURL: '/update-url' The postback URL used by the thumbnailSelector plugin to send current timestamp to FFMPEG to make a new poster image at this timestamp
  • features: "qualities" This turns on the qualitySelector plugin which looks into the data-quality attribute of the sources and make a list of selectable streaming qualities

Swapping media streams

To see how we swap videos within the player look into app/assets/javascripts/switch_streams.js

Converting .fla to .swc

We will use Flash Pro to create the .swc file, which can then be used by Flex SDK to build the .swf file. 

  1. Download the fla along with the associated .as files. For example, I just downloaded this entire folder and opened the .fla file from that folder. 
  2. File -> Publish Settings...
  3. Under Publish, deselect Flash (.swf) and select SWC.
  4. Change the output file path to wherever you need the new SWC file.
  5. Click Publish.

If you run into trouble in this step or get errors, click on the wrench icon next to the Script drop-down menu. There are more extensive options availbale there, such as what resources should be external or included in the code on publishing.


Things we would like to see improved with mediaelement.js:

  • An interface that better supports touch devices. Current interface seems to target desktop browsers only, as the buttons are too small, and some don't work on the iPhone.
  • Better build process
  • Better tests

Things we would like to send upstream

Responsive & mobile-friendly UI

Current MediaElement.js default interface does not work very well on the mobile devices. We are investigating a better interface for it.

To support touch interface, buttons should be at least 44x44 points. Source: Apple's iOS HCI guidelines

On the iPad, it should not show volume button (which doesn't work). Fullscreen button only shown after clicking play, or not shown at all.

On the iPhone, the followings do not work and thus should not be displayed: volume + fullscreen + poster buttons, progress bar, elapsed time.


Desktop browser:

iPad browser:

iPhone browser:

Updating Mediaelement

  1. Clone mediaelement and mediaelement-rails
  2. Make your changes to the mediaelement avalon branch (commit and push).
  3. Go to your clone of Mediaelement-rails, make sure thor is installed, review the update script and run

    thor mediaelement_rails:update
  4. commit and push up the mediaelement_rails changes.
  5. Run

    bundle update mediaelement_rails

    Push up the changes to the gemfile.lock.

  • No labels