Replacing media source (http with rtmp) in MediaElementsJS based on browser capabilities

Question

First of all, in case John Dyer is reading this, thanks a lot for your player, it's fantastic! :-)

And now, to my problem. I'm trying to provide an MP4 video using HTML5 (iPad, iPhone, Android, Chrome Desktop) with fallback to Flash (Firefox, IE, Opera). MediaElementJS does this OK out-of-the-box, except for the HTML5 solution allows randomly jumping into the video using HTTP while the Flash fallback makes the browser to download the entire file before playing back.

Because of that, I want to use rtmp instead http when Flash fallback is used (besides a conventional webserver, we have a Flash Media Server ready to serve the videos), so I'd like to change the source in those cases. But I don't know if and how MediaElementJS can tell me if Flash is going to be used. I've tried this:

<video autoplay controls width="800" height="600" id="video-tag" preload="auto">
  <source id="media-source-mp4" type="video/mp4" src="http://localhost/video1.mp4" />
  <object width="800" height="600" type="application/x-shockwave-flash" data="js/flashmediaelement.swf">
    <param name="movie" value="js/flashmediaelement.swf" />
    <param name="flashvars" value="controls=true&amp;autostart=true&amp;file=rtmp://localhost/video1.mp4" />
  </object>
</video>
<script type="text/javascript">$("#video-tag").mediaelementplayer({
     success: function(media, node, player) {
         if (media.pluginType != 'native') {
             media.setSrc('rtmp://localhost/video1.mp4');
             media.load();
             media.play();
         }
     }
 });</script>

But it clearly doesn't work. I've browsed through medialement.js code and I think that the media element exposes pluginType attribute, but I may be wrong. The <object> or <embed> element created inside <div class="me-plugin"> still carries the http URL.

Am I doing something wrong, or can't I simply accomplish what I'm trying?

Answer 1

I've just found the answer to my own question through Github issue tracker for MediaElementJS:

https://github.com/johndyer/mediaelement/issues/337

The trick is adding "mp4:" before the name of the media file in the URL. So, in my example, the last lines would be:

if (media.pluginType != 'native') {
    media.setSrc('rtmp://localhost/mp4:video1.mp4'); // NOTE the "mp4:" prefix
    media.load();
    media.play();
}

It works for us on Flash Media Server 3.5. :-)