Page History

Table of Contents

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>

• 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.

Wishlists

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

• Do not hide controls when they're being hovered over https://github.com/avalonmediasystem/mediaelement/commit/9b4612528d2c29d3472e85fa1af9273dda3d5551
• Use HTML5 fullscreen API for plugin player when possible https://github.com/avalonmediasystem/mediaelement/commit/5535639257303fef80c2d1300c43a3441971056d
• Supports passing query string to server connection https://github.com/avalonmediasystem/mediaelement/commit/425f20b9e0a7fb2c5c7b68091486c73652d80916
• Being able to switch video streams through Javascript (various commits)
• Maybe some other hacks, bugfixes and enhancements https://github.com/avalonmediasystem/mediaelement/commits/avalon

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

   Code Block
   thor mediaelement_rails:update

4. commit and push up the mediaelement_rails changes.

5. Run

   Code Block
   bundle update mediaelement_rails

   Push up the changes to the gemfile.lock.