basilesimon/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>test popcorn player</title>
  <meta charset="utf-8">
  <script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.js"></script>
  <script src="https://raw.github.com/rwaldron/popcorn.sequence/master/popcorn.sequence.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
  <!-- <script src="popcorn-chain.js"></script> -->
  <!-- <script src="script1.js"></script> -->
<style>
  content{
    width:400px;
    height: 300px;
    position: absolute;
  }
</style>

<script>
var sequence = Popcorn.sequence(
  "container-id",
  [
      {
          src: "http://videos.mozilla.org/serv/webmademovies/atultroll.webm",
          in: 0,
          out: 3
      },
      {
          src: "http://videos.mozilla.org/serv/webmademovies/justintime.ogv",
          in: 174,
          out: 180
      },
      {
          src: "http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv",
          in: 0,
          out: 6
      }
  ]);

// play popcorn
sequence.play();

sequence.footnote({
    start: 0,
    end: 2,
    text: "footnote",
    target: "foo"
});

// get popcorn object of first video
console.log( sequence.eq( 0 ) );

//exec something at 4 seconds
sequence.exec( 4, function() {
    console.log( "AT 4 SECONDS" );
});

</script>

</head>

<body>
<div>
  <div id="container-id"></div>
</div>
<div id="foo"></div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>test popcorn player</title>
	<meta charset="utf-8">
	<script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.js"></script>
	<script src="https://raw.github.com/rwaldron/popcorn.sequence/master/popcorn.sequence.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
	<!-- <script src="popcorn-chain.js"></script> -->
	<!-- <script src="script1.js"></script> -->
	<style>
	content{
	width:400px;
	height: 300px;
	position: absolute;
	}
	</style>

	<script>
	var sequence = Popcorn.sequence(
	"container-id",
	[
	{
	src: "http://videos.mozilla.org/serv/webmademovies/atultroll.webm",
	in: 0,
	out: 3
	},
	{
	src: "http://videos.mozilla.org/serv/webmademovies/justintime.ogv",
	in: 174,
	out: 180
	},
	{
	src: "http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv",
	in: 0,
	out: 6
	}
	]);

	// play popcorn
	sequence.play();

	sequence.footnote({
	start: 0,
	end: 2,
	text: "footnote",
	target: "foo"
	});

	// get popcorn object of first video
	console.log( sequence.eq( 0 ) );

	//exec something at 4 seconds
	sequence.exec( 4, function() {
	console.log( "AT 4 SECONDS" );
	});

	</script>

	</head>

	<body>
	<div>
	<div id="container-id"></div>
	</div>
	<div id="foo"></div>

	</body>
	</html>