demos/bootstrap.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SewisePlayer</title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch Player
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
	  <div id="player" class="player">
	  	<script type="text/javascript">	
	  	</script>
	  	<script type="text/javascript" src="../player/sewise.player.min.js"></script>
	  </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	var setuped = false;
	var isFlash = false;
	$('#myModal').on('shown.bs.modal', function(){
		$('.player').css('width', $('.modal-dialog').width() + 'px');
		$('.player').css('height', $('.modal-dialog').width() / 2 +'px');
		
		if(setuped){
		   SewisePlayer.doPlay();
		}else{
			SewisePlayer.setup({
				server : "vod",
				type : "mp4",
				skin : "vodFlowPlayer",
				topbardisplay : 'disable',
				fallbackurls : {
					ogg: "http://jackzhang1204.github.io/materials/mov_bbb.ogg",
					webm: "http://jackzhang1204.github.io/materials/mov_bbb.webm"
				}
			});
			setuped = true;
			try{
				SewisePlayer.toPlay('http://netdisk.foream.cn:8080/netdisk/iface/downloadOpen?fileId=29050&quality=1', 'neurocam wearable camera', 0, true);
			}catch(e){
				isFlash = true;
			};
		}
	});
	$('#myModal').on('hide.bs.modal', function(){
		SewisePlayer.doPause();
	});
	function playerReady(name){
		//console.log("Sewise Player On Ready");
		if(isFlash){
			SewisePlayer.toPlay('http://netdisk.foream.cn:8080/netdisk/iface/downloadOpen?fileId=29050&quality=1', 'neurocam wearable camera', 0, true);
		}
	}
</script>
<div style="float: left; width: 100%; padding: 10px 30px; "><a href="https://github.com/jackzhang1204/sewise-player" target="_blank">Fork it on GitHub</a></div>
</body>
</html>