JWPlayer Demo

by fredd man

HTML

<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/popcorn/popcorn.js"></script>
<link rel="stylesheet" href="http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/mp2/theme.mp2.css">
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/jquery/jquery.iecors.js"></script>
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/jwplayer/jwplayer.js"></script>
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/metaplayer-complete.js"></script>
<script src="https://embed-ssl.wistia.com/deliveries/8887ff92daefe60fb85c746deebcc367e3149dfe.bin?disposition=attachment&amp;filename=jwplaye.flash.swf"></script>
<script src="https://github.com/dbernar1/JWPlayer-for-WordPress/blob/master/plugins/captions.xml"></script>
<h3>MetaPlayer &raquo; Examples &raquo; JWPlayer with v3 UI</h3>

<div class="container">
    <div class="metaplayer">
        <div id='target'></div>
    </div>
    <div id='searchbar'></div>
    <div id='transcript'></div>
</div>

CSS

h3 {
    color: #101010;
    font-family: Helvetica, Arial, sans-serif;
    margin: 20px;
    font-size: 20px;
}

.container {
    position: relative;
}

.metaplayer {
    width: 600px;
    height: 300px;
    outline: 1px solid red;
}

#transcript {
    margin-top: 10px;
    outline: 1px solid black;
    width: 600px;
    height: 100px;
}

#searchbar {
    outline: 1px solid black;
    width: 600px;
}

JavaScript

var jwp, video, player;
        $(function () {

            jwp = jwplayer('target').setup({
                controls: false, // v6
                controlbar  : "none", //v5
                width: "600",
                height: "300",
                autostart   : true,
                icons      : false, // disable a big play button on the middle of screen
                plugins: { viral: { onpause: false, oncomplete: false, allowmenu: false } }, // disable all viral features.
                flashplayer : "https://embed-ssl.wistia.com/deliveries/8887ff92daefe60fb85c746deebcc367e3149dfe.bin?disposition=attachment&filename=jwplaye.flash.swf",
                file        : "http://kp.cdn.yandex.net.cache-samaramgf05.cdn.yandex.net/647948/kinopoisk.ru-Into-the-Storm-204604.mp4"

            });

            jwp.onReady(function() {
                video = MetaPlayer.jwplayer( jwp );
                video.autoplay = true;

                player = MetaPlayer(video)
                        .controlbar({ fullscreen : true })
                        .captionconfig()
                        .transcript("#transcript")
                        .searchbar("#searchbar")
                        .mrss("")
                        .mrss("")
                        .ramp("http://web-tech.at/wien/player6/t1/video/testfiles/testcaps1.xml")
                        .srt()
                        .load();
            });

        })