videocontext
Version:
A WebGL & HTML5 graph based video composition library
3,925 lines (956 loc) • 70.8 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: SourceNode</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: SourceNode</h1>
<section>
<header>
<h2>SourceNode</h2>
</header>
<article>
<div class="container-overview">
<h4 class="name" id="SourceNode"><span class="type-signature"></span>new SourceNode<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Initialise an instance of a SourceNode.
This is the base class for other Nodes which generate media to be passed into the processing pipeline.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line12">line 12</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="duration"><span class="type-signature"></span>duration<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the duration of the node on a timeline. If no start time is set will return undefiend, if no stop time is set will return Infinity.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line110">line 110</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(5);
videoNode.stop(10);
console.log(videoNode.duration); //will output 10</code></pre>
<h4 class="name" id="duration"><span class="type-signature"></span>duration<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the duration of the node on a timeline. If no start time is set will return undefiend, if no stop time is set will return Infinity.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line110">line 110</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(5);
videoNode.stop(10);
console.log(videoNode.duration); //will output 10</code></pre>
<h4 class="name" id="element"><span class="type-signature"></span>element<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the underlying DOM element which represents this source node.
Note: If a source node is created with a url rather than passing in an existing element then this will return undefined until the source node preloads the element.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line93">line 93</a>
</li></ul></dd>
</dl>
<h5>Examples</h5>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via a URL
var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(0);
videoNode.stop(5);
//When the node starts playing the element should exist so set it's volume to 0
videoNode.regsiterCallback("play", function(){videoNode.element.volume = 0;});</code></pre>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via an already existing element
var ctx = new VideoContext();
var videoElement = document.createElement("video");
var videoNode = ctx.createVideoSourceNode(videoElement);
videoNode.start(0);
videoNode.stop(5);
//The elemnt can be accessed any time because it's lifecycle is managed outside of the VideoContext
videoNode.element.volume = 0;</code></pre>
<h4 class="name" id="element"><span class="type-signature"></span>element<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the underlying DOM element which represents this source node.
Note: If a source node is created with a url rather than passing in an existing element then this will return undefined until the source node preloads the element.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line93">line 93</a>
</li></ul></dd>
</dl>
<h5>Examples</h5>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via a URL
var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(0);
videoNode.stop(5);
//When the node starts playing the element should exist so set it's volume to 0
videoNode.regsiterCallback("play", function(){videoNode.element.volume = 0;});</code></pre>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via an already existing element
var ctx = new VideoContext();
var videoElement = document.createElement("video");
var videoNode = ctx.createVideoSourceNode(videoElement);
videoNode.start(0);
videoNode.stop(5);
//The elemnt can be accessed any time because it's lifecycle is managed outside of the VideoContext
videoNode.element.volume = 0;</code></pre>
<h4 class="name" id="state"><span class="type-signature"></span>state<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the state of the node.
0 - Waiting, start() has not been called on it yet.
1 - Sequenced, start() has been called but it is not playing yet.
2 - Playing, the node is playing.
3 - Paused, the node is paused.
4 - Ended, playback of the node has finished.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line61">line 61</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
console.log(videoNode.state); //will output 0 (for waiting)
videoNode.start(5);
console.log(videoNode.state); //will output 1 (for sequenced)
videoNode.stop(10);
ctx.play();
console.log(videoNode.state); //will output 2 (for playing)
ctx.paused();
console.log(videoNode.state); //will output 3 (for paused)</code></pre>
<h4 class="name" id="state"><span class="type-signature"></span>state<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the state of the node.
0 - Waiting, start() has not been called on it yet.
1 - Sequenced, start() has been called but it is not playing yet.
2 - Playing, the node is playing.
3 - Paused, the node is paused.
4 - Ended, playback of the node has finished.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line61">line 61</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
console.log(videoNode.state); //will output 0 (for waiting)
videoNode.start(5);
console.log(videoNode.state); //will output 1 (for sequenced)
videoNode.stop(10);
ctx.play();
console.log(videoNode.state); //will output 2 (for playing)
ctx.paused();
console.log(videoNode.state); //will output 3 (for paused)</code></pre>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="clearTimelineState"><span class="type-signature"></span>clearTimelineState<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Clear any timeline state the node currently has, this puts the node in the "waiting" state, as if neither start nor stop had been called.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line384">line 384</a>
</li></ul></dd>
</dl>
<h4 class="name" id="clearTimelineState"><span class="type-signature"></span>clearTimelineState<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Clear any timeline state the node currently has, this puts the node in the "waiting" state, as if neither start nor stop had been called.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line384">line 384</a>
</li></ul></dd>
</dl>
<h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Destroy and clean-up the node.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line393">line 393</a>
</li></ul></dd>
</dl>
<h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Destroy and clean-up the node.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line393">line 393</a>
</li></ul></dd>
</dl>
<h4 class="name" id="registerCallback"><span class="type-signature"></span>registerCallback<span class="signature">(type, func)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Register callbacks against one of these events: "load", "destory", "seek", "pause", "play", "ended", "durationchange", "loaded", "error"</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last"><p>the type of event to register the callback against.</p></td>
</tr>
<tr>
<td class="name"><code>func</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last"><p>the function to call.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line151">line 151</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.registerCallback("load", function(){"video is loading"});
videoNode.registerCallback("play", function(){"video is playing"});
videoNode.registerCallback("ended", function(){"video has eneded"});</code></pre>
<h4 class="name" id="registerCallback"><span class="type-signature"></span>registerCallback<span class="signature">(type, func)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Register callbacks against one of these events: "load", "destory", "seek", "pause", "play", "ended", "durationchange", "loaded", "error"</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last"><p>the type of event to register the callback against.</p></td>
</tr>
<tr>
<td class="name"><code>func</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last"><p>the function to call.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line151">line 151</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.registerCallback("load", function(){"video is loading"});
videoNode.registerCallback("play", function(){"video is playing"});
videoNode.registerCallback("ended", function(){"video has eneded"});</code></pre>
<h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Start playback at VideoContext.currentTime plus passed time. If passed time is negative, will play as soon as possible.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time from the currentTime of the VideoContext which to start playing, if negative will play as soon as possible.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line203">line 203</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if it is already sequenced.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Start playback at VideoContext.currentTime plus passed time. If passed time is negative, will play as soon as possible.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time from the currentTime of the VideoContext which to start playing, if negative will play as soon as possible.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line203">line 203</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if it is already sequenced.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="startAt"><span class="type-signature"></span>startAt<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Start playback at an absolute time ont the VideoContext's timeline.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time on the VideoContexts timeline to start playing.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line220">line 220</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if it is already sequenced.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="startAt"><span class="type-signature"></span>startAt<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Start playback at an absolute time ont the VideoContext's timeline.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time on the VideoContexts timeline to start playing.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line220">line 220</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if it is already sequenced.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Stop playback at VideoContext.currentTime plus passed time. If passed time is negative, will play as soon as possible.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time from the currentTime of the video context which to stop playback.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line242">line 242</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if the playback has already ended or if start hasn't been called yet, or if time is less than the start time.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Stop playback at VideoContext.currentTime plus passed time. If passed time is negative, will play as soon as possible.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time from the currentTime of the video context which to stop playback.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line242">line 242</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if the playback has already ended or if start hasn't been called yet, or if time is less than the start time.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="stopAt"><span class="type-signature"></span>stopAt<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Stop playback at an absolute time ont the VideoContext's timeline.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time on the VideoContexts timeline to stop playing.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line266">line 266</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if the playback has already ended or if start hasn't been called yet, or if time is less than the start time.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="stopAt"><span class="type-signature"></span>stopAt<span class="signature">(time)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Stop playback at an absolute time ont the VideoContext's timeline.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>the time on the VideoContexts timeline to stop playing.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line266">line 266</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Will return true is seqeuncing has succeded, or false if the playback has already ended or if start hasn't been called yet, or if time is less than the start time.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="unregisterCallback"><span class="type-signature"></span>unregisterCallback<span class="signature">(func<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Remove callback.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>func</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>the callback to remove, if undefined will remove all callbacks for this node.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line170">line 170</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.registerCallback("load", function(){"video is loading"});
videoNode.registerCallback("play", function(){"video is playing"});
videoNode.registerCallback("ended", function(){"video has eneded"});
videoNode.unregisterCallback(); //remove all of the three callbacks.</code></pre>
<h4 class="name" id="unregisterCallback"><span class="type-signature"></span>unregisterCallback<span class="signature">(func<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Remove callback.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>func</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>the callback to remove, if undefined will remove all callbacks for this node.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line170">line 170</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.registerCallback("load", function(){"video is loading"});
videoNode.registerCallback("play", function(){"video is playing"});
videoNode.registerCallback("ended", function(){"video has eneded"});
videoNode.unregisterCallback(); //remove all of the three callbacks.</code></pre>
</article>
</section>
<section>
<header>
<h2>SourceNode</h2>
</header>
<article>
<div class="container-overview">
<h4 class="name" id="SourceNode"><span class="type-signature"></span>new SourceNode<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Initialise an instance of a SourceNode.
This is the base class for other Nodes which generate media to be passed into the processing pipeline.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line12">line 12</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="duration"><span class="type-signature"></span>duration<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the duration of the node on a timeline. If no start time is set will return undefiend, if no stop time is set will return Infinity.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line110">line 110</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(5);
videoNode.stop(10);
console.log(videoNode.duration); //will output 10</code></pre>
<h4 class="name" id="duration"><span class="type-signature"></span>duration<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the duration of the node on a timeline. If no start time is set will return undefiend, if no stop time is set will return Infinity.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line110">line 110</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(5);
videoNode.stop(10);
console.log(videoNode.duration); //will output 10</code></pre>
<h4 class="name" id="element"><span class="type-signature"></span>element<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the underlying DOM element which represents this source node.
Note: If a source node is created with a url rather than passing in an existing element then this will return undefined until the source node preloads the element.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line93">line 93</a>
</li></ul></dd>
</dl>
<h5>Examples</h5>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via a URL
var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(0);
videoNode.stop(5);
//When the node starts playing the element should exist so set it's volume to 0
videoNode.regsiterCallback("play", function(){videoNode.element.volume = 0;});</code></pre>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via an already existing element
var ctx = new VideoContext();
var videoElement = document.createElement("video");
var videoNode = ctx.createVideoSourceNode(videoElement);
videoNode.start(0);
videoNode.stop(5);
//The elemnt can be accessed any time because it's lifecycle is managed outside of the VideoContext
videoNode.element.volume = 0;</code></pre>
<h4 class="name" id="element"><span class="type-signature"></span>element<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the underlying DOM element which represents this source node.
Note: If a source node is created with a url rather than passing in an existing element then this will return undefined until the source node preloads the element.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line93">line 93</a>
</li></ul></dd>
</dl>
<h5>Examples</h5>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via a URL
var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.start(0);
videoNode.stop(5);
//When the node starts playing the element should exist so set it's volume to 0
videoNode.regsiterCallback("play", function(){videoNode.element.volume = 0;});</code></pre>
<pre class="prettyprint"><code>//Accessing the Element on a VideoNode created via an already existing element
var ctx = new VideoContext();
var videoElement = document.createElement("video");
var videoNode = ctx.createVideoSourceNode(videoElement);
videoNode.start(0);
videoNode.stop(5);
//The elemnt can be accessed any time because it's lifecycle is managed outside of the VideoContext
videoNode.element.volume = 0;</code></pre>
<h4 class="name" id="state"><span class="type-signature"></span>state<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the state of the node.
0 - Waiting, start() has not been called on it yet.
1 - Sequenced, start() has been called but it is not playing yet.
2 - Playing, the node is playing.
3 - Paused, the node is paused.
4 - Ended, playback of the node has finished.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line61">line 61</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
console.log(videoNode.state); //will output 0 (for waiting)
videoNode.start(5);
console.log(videoNode.state); //will output 1 (for sequenced)
videoNode.stop(10);
ctx.play();
console.log(videoNode.state); //will output 2 (for playing)
ctx.paused();
console.log(videoNode.state); //will output 3 (for paused)</code></pre>
<h4 class="name" id="state"><span class="type-signature"></span>state<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the state of the node.
0 - Waiting, start() has not been called on it yet.
1 - Sequenced, start() has been called but it is not playing yet.
2 - Playing, the node is playing.
3 - Paused, the node is paused.
4 - Ended, playback of the node has finished.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line61">line 61</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
console.log(videoNode.state); //will output 0 (for waiting)
videoNode.start(5);
console.log(videoNode.state); //will output 1 (for sequenced)
videoNode.stop(10);
ctx.play();
console.log(videoNode.state); //will output 2 (for playing)
ctx.paused();
console.log(videoNode.state); //will output 3 (for paused)</code></pre>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="clearTimelineState"><span class="type-signature"></span>clearTimelineState<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Clear any timeline state the node currently has, this puts the node in the "waiting" state, as if neither start nor stop had been called.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line384">line 384</a>
</li></ul></dd>
</dl>
<h4 class="name" id="clearTimelineState"><span class="type-signature"></span>clearTimelineState<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Clear any timeline state the node currently has, this puts the node in the "waiting" state, as if neither start nor stop had been called.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line384">line 384</a>
</li></ul></dd>
</dl>
<h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Destroy and clean-up the node.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line393">line 393</a>
</li></ul></dd>
</dl>
<h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Destroy and clean-up the node.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line393">line 393</a>
</li></ul></dd>
</dl>
<h4 class="name" id="registerCallback"><span class="type-signature"></span>registerCallback<span class="signature">(type, func)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Register callbacks against one of these events: "load", "destory", "seek", "pause", "play", "ended", "durationchange", "loaded", "error"</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last"><p>the type of event to register the callback against.</p></td>
</tr>
<tr>
<td class="name"><code>func</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last"><p>the function to call.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="SourceNodes_sourcenode.js.html">SourceNodes/sourcenode.js</a>, <a href="SourceNodes_sourcenode.js.html#line151">line 151</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var ctx = new VideoContext();
var videoNode = ctx.createVideoSourceNode('video.mp4');
videoNode.registerCallback("load", function(){"video is loading"});
videoNode.registerCallback("play", function(){"video is playing"});
videoNode.registerCallback("ended", function(){"video has eneded"});</code></pre>
<h4 class="name" id="registerCallback"><span class="type-signature"></span>registerCallback<span class="signature">(type, func)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Register callbacks against one of these events: "load", "destory", "seek", "pause", "play", "ended", "durationchange", "loaded", "error"</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>