Flowplayer Demo

by dledle2

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flowplayer/7.0.4/flowplayer.min.js"></script>
<div id="player" class="fixed-controls"  style="width:600px; height:338px;"></div>

<h3>MetaPlayer &raquo; Examples &raquo; FlowPlayer with v3 UI</h3>
<!-- 
http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/popcorn/popcorn.js
http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/metaplayer-complete.js
-->
<div class="container">
    <div id='target'></div>
    <div id='searchbar'></div>
    <div id='transcript'></div>
</div>

CSS

/* http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/mp2/theme.mp2.css */

h3 {
    color: #101010;
    font-family: Helvetica, Arial, sans-serif;
    margin: 20px;
    font-size: 20px;
}
.container {
    position: relative;
}
#target {
    width: 600px;
    height: 300px;
    background: #333;
}
#transcript {
    margin-top: 10px;
    outline: 1px solid black;
    width: 600px;
    height: 100px;
}
#searchbar {
    outline: 1px solid black;
    width: 600px;
}

JavaScript

var api = flowplayer("#player", {
    live: true,
    splash: true,
    clip: {
        sources: [
            {
                type: "application/x-mpegurl",
                src: "http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on"
            }
        ],
        title: "LiveStream"
    },
    embed: {
        skin: "ZZZhttp://releases.flowplayer.org/6.0.1/skin/bauhaus.css"
    }
});