The fork allows us to seamlessly use both RTMP and HLS streaming in one place.
mode: 'auto_plugin'Flash first and fallback to HTML5
usePluginFullScreen: falseAttempt 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-qualityattribute 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
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.
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
- 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.
- 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
- commit and push up the mediaelement_rails changes.
Push up the changes to the gemfile.lock.