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.
Code Block | ||||
---|---|---|---|---|
| ||||
<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
Code Block | ||||
---|---|---|---|---|
| ||||
<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 HTML5usePluginFullScreen: false
Attempt to use HTML5 fullscreen APIthumbnailSelectorUpdateURL: '/update-url'
The postback URL used by the thumbnailSelector plugin to send current timestamp to FFMPEG to make a new poster image at this timestampfeatures: "qualities"
This turns on the qualitySelector plugin which looks into thedata-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.
- 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.
- File -> Publish Settings...
- Under Publish, deselect Flash (.swf) and select SWC.
- Change the output file path to wherever you need the new SWC file.
- 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
- Clone mediaelement and mediaelement-rails
- Make your changes to the mediaelement avalon branch (commit and push).
Go to your clone of Mediaelement-rails, make sure thor is installed, review the update script and run
Code Block thor mediaelement_rails:update
- commit and push up the mediaelement_rails changes.
Run
Code Block bundle update mediaelement_rails
Push up the changes to the gemfile.lock.