JSFiddle - React, Tailwind, and code Playground
by fredd man
HTML
<script src="https://ssl.p.jwpcdn.com/6/12/jwplayer.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JW Player Example - With Dynamic Video Changes</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src='./jwplayer.js'></script>
<div id="punn-container" class="punndit" data-punn-uid="http://d3hd7c33w2kwsv.cloudfront.net/aca722ec-2038-4759-98e4-93430910abda_ncaa-cms-mp4-s3.flv">
<div class="pndt-video-screen">
<div class="pndt-video">
<div id="mediaspace"></div>
</div>
</div>
</div>
<script type='text/javascript'>
var punnditLoaded = false;
jwplayer('mediaspace').setup({
wmode: "transparent",
'flashplayer': 'player.swf',
'controlbar': 'bottom',
'width': '640',
'height': '390',
events:{
onPlaylistItem: function(){
var mediaURL = this.getPlaylist()[0]['file'];
$('.punndit').attr('data-punn-uid', mediaURL);
(punnditLoaded) ? pndt.embed.bar.reattach(this.id, 'jwplayer') : ((punnditLoaded = true) && embedPunnditBar(this.id, 'jwplayer'));
}
}
});
$('.alt-video').live('click', function(){
jwplayer().load($(this).attr('data-clip-url'));
});
$(document).ready(function(){
if(window.location.hash.indexOf('campus') != -1) jwplayer().load($('#TMB2').attr('data-clip-url'));
else if(window.location.hash.indexOf('store') != -1) jwplayer().load($('#TMB3').attr('data-clip-url'));
else jwplayer().load($('#TMB1').attr('data-clip-url'));
})
</script>
<!-- Links to switch videos -->
<a id="TMB1" class="galTMB1 rounded shadow alt-video" href="#gameday" data-clip-url="http://d3hd7c33w2kwsv.cloudfront.net/aca722ec-2038-4759-98e4-93430910abda_ncaa-cms-mp4-s3.flv"></a>
<a id="TMB2" class="galTMB2 rounded...