http-live-streaminglive-streamingflowplayerm3u8

Embed m3u8 with flowplayer using JS


Here is an example how to embed m3u8 with flowplayer.

<div data-live="true" data-ratio="0.5625" class="flowplayer play-button fixed-controls">
    <video>
        <source type="application/x-mpegurl" src="http://wms.shared.streamshow.it/telesanremo/telesanremo/playlist.m3u8" data-title="Live stream">
    </video>
</div>

Embedding RTMP using JS method:

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
    clip: {
        url: 'streamname', 
        live: 'true', 
        provider: 'rtmp' 
    },
    plugins: {
        rtmp: {
            url: 'flowplayer.rtmp-3.2.13.swf', 
            netConnectionUrl: 'rtmp://some_rtmp_link'
        } 
    } 
});

My question: is there a JavaScript or jQuery method to embed m3u8, like in RTMP example?


Solution

  • I found the answer:

    HTML:

    <div id="player" class="fixed-controls"  style="width:600px; height:338px;"></div>
    

    JS:

    var api = flowplayer("#player", {
        live: true,
        splash: true,
        clip: {
            sources: [
                {
                    type: "application/x-mpegurl",
                    src: "http://srv6.zoeweb.tv:1935/z330-live/stream/playlist.m3u8"
                }
            ],
            title: "LiveStream"
        },
        embed: {
            skin: "http://releases.flowplayer.org/6.0.1/skin/bauhaus.css"
        }
    });