JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<script src="http://54.210.207.209/flowplayer-3.2.13.min.js"></script>
<h3>F4M Manifest Fails to Parse (content type text/xml)</h3>
 <a class="rtmp test1" href="#" style="display:inline-block;position:relative">
        <img src="http://www.loopnet.com/videosbyloopnet/img/play-overlay.png" style="position:absolute;z-index:1;width:800px;height:450px;top:0;left:0;"/>
            <img src="http://www.loopnet.com/video/poster/N7O6TD35Q.jpg" style="width:800px;height:450px;"/>
    </a>

 <h3>Works Correctly (content type application/octet-stream)</h3>
 <a class="rtmp test2" href="#" style="display:inline-block;position:relative">
        <img src="http://www.loopnet.com/videosbyloopnet/img/play-overlay.png" style="position:absolute;z-index:1;width:800px;height:450px;top:0;left:0;"/>
        <img src="http://www.loopnet.com/video/poster/N7O6TD35Q.jpg" style="width:800px;height:450px;"/>
    </a>

CSS

a.rtmp {
    display: block;
    width: 800px;
    height: 450px;
    margin: 25px 0;
    text-align: center;
    background-color: black;
}

JavaScript

embed('a.test1', 'hds_sample1_manifest.f4m', 'http://54.210.207.209/', 'http://54.210.207.209/vod/');
embed('a.test2', 'sample3_500kbps.f4m', 'http://releases.flowplayer.org/swf/', 'http://stream.flowplayer.org/httpstreaming/');

function embed(element, file, swf, base) {
    $f(element, swf + "flowplayer-3.2.18.swf", {
        clip: {
            // the manifest file
            url: file,

            // we need 2 urlResolvers
            urlResolvers: ['f4m', 'bwcheck'],

            // use the httpstreaming plugin
            provider: 'httpstreaming',

            // directory where the manifest and video fragments are stored
            baseUrl: base,

            autoPlay: true
        },
        plugins: {
            f4m: {
                url: 'flowplayer.f4m-3.2.10.swf'
            },
            httpstreaming: {
                url: 'flowplayer.httpstreaming-3.2.11.swf'
            },
            bwcheck: {
                url: 'flowplayer.bwcheck_httpstreaming-3.2.13.swf',
                dynamic: true,
                //DEMO ONLY: show the selected file in the content box.
                onStreamSwitchBegin: function (newItem, currentItem) {
                    var content = $f('httpstreaming-dynamic').getPlugin('content');
                    var message = 'Will switch to: ' + newItem.streamName + ' from ' + currentItem.streamName;
                    content.setHtml(message);
                },
                onStreamSwitch: function (newItem) {
                    var content = $f('httpstreaming-dynamic').getPlugin('content');
                    var message = 'Switched to: ' + newItem.streamName;
                    content.setHtml(message);
                }
            },
            //DEMO ONLY: a content box so that we can see the selected video dimensions.
            content: {
                url: 'flowplayer.content-3.2.9.swf',
                bottom: 30,
                left: 0,
                width: 400,
                height:...