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/8ae8d8059a4316bc6cc37cd897dba17ca83b3260.bin?disposition=attachment&amp;filename=jplayer.playlist.min.js"></script>
<script src=" https://embed-ssl.wistia.com/deliveries/b48b91be60d66081fe6e2b80a8a0830107f23005.bin?disposition=attachment&amp;filename=jquery.jplayer.inspector.js"></script>
<script src="https://embed-ssl.wistia.com/deliveries/84f838aa0b28dac14ab465cc55df437f229f37e6.bin?disposition=attachment&amp;filename=popcorn.jplayer.js"></script>
<script src="https://embed-ssl.wistia.com/deliveries/4976563abe94636a4ae7eab5495832a8a3415edf.bin?disposition=attachment&amp;filename=Jplayer.swf"></script>
<script src="https://embed-ssl.wistia.com/deliveries/84147a0c00ea800103b486f86f0b6d8d54c0a2c1.bin?disposition=attachment&amp;filename=jquery.jplayer.min.js"></script>
<body>
  <script type="text/javascript">
 $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
   ready: function () {
    $(this).jPlayer("setMedia", {
     m4a: "http://std.imhonet.ru/video/trailers/bd/b3/bdb3bd7f435cf6dee70d4ba288c0d16a",
     oga: "/media/mysound.ogg"
    });
   },
   swfPath: "/js",
   supplied: "m4a, oga"
  });
 });
</script>
<div id="jquery_jplayer_1"></div>
<div id="jp_container_1">
 <a href="#" class="jp-play">Play</a>
 <a href="#" class="jp-pause">Pause</a>
</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;
}