Im exploring a use case related to multiple view ports, that is multiple videos playing on one page at a time.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
html,body,.container-fluid,.row,.col-sm-9,.col-sm-3
{
height: 100%;
}
.col-sm-12
{
height: 30%;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container-fluid">
<script src="lib/three.js/three.r83.custom.min.js"></script>
<!-- Include the Hammer.js library -->
<script src="lib/hammer.js/hammer.js"></script>
<!-- Include the ForgeJS library -->
<script type="text/javascript" src="lib/forge/forge.min.js" ></script>
<!-- Start ForgeJS -->
<div class="row">
<div id="container" class="col-sm-9">
</div>
<div class="col-sm-3">
<div id="container2" class="col-sm-12"/>
<div id="container3" class="col-sm-12"/>
<div id="container4" class="col-sm-12"/>
</div>
</div>
<script type="text/javascript">
// Create a viewer
var viewer = new FORGE.Viewer("container", "config1.json");
var viewer1 = new FORGE.Viewer("container2", "config2.json");
var viewer2= new FORGE.Viewer("container3", "config3.json");
var viewer3 = new FORGE.Viewer("container4", "config4.json");
</script>
</div>
</body>
</html>The config Im using is a standard videocontrols config file I pulled from the samples. Please let me know of any tutorials or projects that are working on the same.
Regards
Aditya