FlowPlayer Example (w/ Ipad)

by dledle2

HTML

<script src="//www.eatingwell.com/videos/FileResource/themes/projects/root/3.8/scripts/player/external/flowplayer/flowplayer-3.2.6.min.js"></script>
<script src="//www.eatingwell.com/videos/FileResource/themes/projects/root/3.8/scripts/player/external/popcorn/popcorn.js"></script>
<script src="//www.eatingwell.com/videos/FileResource/themes/projects/root/3.8/scripts/player/build/metaplayer-complete.js"></script>
<div id=".ez-player-box" id="video">
</div>
<div id="rhi-transcript"></div>

CSS

body{
    padding: 10px;
}
#video {
    width:450px;
    height:300px;
    background: black;
}
#searchbar {
    width:450px;
}
#carousel {
   background: red;
   width: 326px;
   height: 250px;
   margin-top: 10px;
}
.mp-carousel-nav {
    width: 5px;
    height: 5px;
}

JavaScript

player = MetaPlayer(".ez-player-box", {
    selectSource: false,
    sourceTags: false
});

player.ramp("http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on");


player.flowplayer({
    fpConfig: {

        key: '#$a0c94b3512feaf676c0',

        plugins: {


            rtmp: {
                url: "http://www.eatingwell.com/videos//FileResource/themes/projects/root/base_main/scripts/player/external/flowplayer/flowplayer.rtmp-3.2.3.swf",
                netConnectionUrl: 'rtmpt://media.ramp.com/video/streams',
            }

        },
        clip: {
            scaling: 'fit',
            autoPlay: true
        },
        playlist: [

            {
            url: 'http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on',

            ipadUrl: 'http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on',

            mp2Playlist: 'http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on'},

            ],


    },
    swfUrl: 'http://www.eatingwell.com/videos/FileResource/themes/projects/root/3.8/scripts/player/external/flowplayer/flowplayer.commercial-3.2.7.swf'
});



// controls & timeline
player.controls({


    renderTags: true,
    renderMetaq: true,
    annotationSpacing: 2


});

// overlay
player.overlay();


player.video.autoplay = 1;



player.load();