JWPlayer Demo

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/build/metaplayer-complete.js"></script>
<script src="https://embed-ssl.wistia.com/deliveries/9b0ed3b4fd7a2eb3049b51cd26b48b9c0300e7b9.bin?disposition=attachment&amp;filename=jwplayer6.10.js"></script>
  <title></title>
    <script type="text/javascript" src="https://embed-ssl.wistia.com/deliveries/9b0ed3b4fd7a2eb3049b51cd26b48b9c0300e7b9.bin?disposition=attachment&filename=jwplayer6.10.js"></script>
    <script type="text/javascript">jwplayer.key = "2U/m9jOYEC49U1j3cNoou7IjxvGS5j03XTpetE5wCVBAwRqhG9pSYWQIMW0=";</script>

	
	

			<div class="content">
				<div class="title">How to use the JW Player with Streaming Wizard's hosting services</div>

<p>This demonstrates the JW Player's ability to overlay a video with captions.</p>


<div id='mediaplayer'></div>
<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    playlist: [{
      file: 'rtmp://185.208.175.230:1935/nahai_dastani/1.mp4',
      image: 'vtts/bbb-splash.png',
      height: '270',
      width: '480',
      tracks: [
        {file:'https://embed-ssl.wistia.com/deliveries/32274c74b0cc4e436ce4242dd173f824101e5125.bin?disposition=attachment&filename=Hercules.2014.CAM.XviD.SBT+%281%29.vtt', label: 'Version 1', kind:'subtitles'},
        {file:'vtts/captions_v2.vtt', label: 'Version 2', kind:'subtitles'},
        {file:'vtts/captions_v3.vtt', label: 'Version 3', kind:'subtitles'}
      ]
    }]
  });
</script>

  <p><i>*This example uses the JW Player version 6.7</i></p>

<textarea cols='57' rows='22'>
<div id='mediaplayer'></div>
<script type="text/javascript">
 ...

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;
}