Origin

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

Usage

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://domain.edu/avalon/mp4:path_to_dir/filename1?token=insert-token-here" data-quality="low" data-plugin-type="flash" type="video/rtmp"/>
  <source src="rtmp://domain.edu/avalon/mp4:path_to_dir/filename2?token=insert-token-here" data-quality="medium" data-plugin-type="flash" type="video/rtmp"/>
  <source src="rtmp://domain.edu/avalon/mp4:path_to_dir/filename3?token=insert-token-here" data-quality="high" data-plugin-type="flash" type="video/rtmp"/>
  <source src="http://domain.edu/avalon/mp4:path_to_dir/filename4?token=insert-token-here" data-quality="low" data-plugin-type="native" type="application/vnd.apple.mpegURL"/>
  <source src="http://domain.edu/avalon/mp4:path_to_dir/filename5?token=insert-token-here" data-quality="medium" data-plugin-type="native" type="application/vnd.apple.mpegURL"/>
  <source src="http://domain.edu/avalon/mp4:path_to_dir/filename6?token=insert-token-here" data-quality="high" data-plugin-type="native" type="application/vnd.apple.mpegURL"/>
</video>

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

<script>
  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"]
    });
</script>

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.

Wishlists

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

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.

Prototypes

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.