@pdftron/webviewer-video
Version:
This is an addon for WebViewer that allows loading HTML5 videos (.mp4, ogg, webm) so that their video frames can be annotated.
2,660 lines (913 loc) • 41.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Documentation Module: @pdftron/webviewer-video</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.simplex.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Documentation</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="UI.html">UI</a></li>
</ul>
</li>
<li class="dropdown">
<a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="module-@pdftron_webviewer-video.html">@pdftron/webviewer-video</a></li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="Video.html">Video</a></li>
</ul>
</li>
<li class="dropdown">
<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="module-@pdftron_webviewer-video.html#~event:videoElementLoaded">event:videoElementLoaded</a></li><li><a href="module-@pdftron_webviewer-video.html#~event:videoPause">event:videoPause</a></li><li><a href="module-@pdftron_webviewer-video.html#~event:videoPlay">event:videoPlay</a></li>
</ul>
</li>
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="global.html#waitForEvents">waitForEvents</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-8">
<div id="main">
<h1 class="page-title">Module: @pdftron/webviewer-video</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<div class="description">This is an addon for WebViewer that allows loading HTML5 videos (.mp4, ogg, webm) so that their video frames can be annotated.
See the npm package on <a href="https://www.npmjs.com/package/@pdftron/webviewer-video">@pdftron/webviewer-video</a> for more information.</div>
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<hr>
<dt>
<h4 class="name" id=".initializeVideoViewer"><span class="type-signature"><async, static> </span>initializeVideoViewer(instance, options, documentViewerNumber)</h4>
</dt>
<dd>
<div class="description">
Initializes the video viewer so that webviewer can load videos.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>instance</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">The WebViewer instance</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">Options object.</td>
</tr>
<tr>
<td class="name"><code>documentViewerNumber</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
1
</td>
<td class="description last">The document viewer number</td>
</tr>
<tr>
<td class="name"><code>options.license</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
''
</td>
<td class="description last">The WebViewer Video license or file url.</td>
</tr>
<tr>
<td class="name"><code>options.showFrames</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Shows or hides video timeline reel.</td>
</tr>
<tr>
<td class="name"><code>options.showTooltipPreview</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Shows or hides tooltip preview.</td>
</tr>
<tr>
<td class="name"><code>options.renderControls</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Shows or hides the video controls.</td>
</tr>
<tr>
<td class="name"><code>options.AudioComponent</code></td>
<td class="type">
<span class="param-type">React.Component</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">The Webviewer-Audio component</td>
</tr>
<tr>
<td class="name"><code>options.cacheAudioWaveform</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Caches audio waveform on initial load</td>
</tr>
<tr>
<td class="name"><code>options.defaultLoadAudio</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Loads audio on initial load</td>
</tr>
<tr>
<td class="name"><code>options.showFullscreenButton</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Shows or hides the fullscreen button on the video</td>
</tr>
<tr>
<td class="name"><code>options.showSubtitlesButton</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Shows or hides the subtitles button on the video controls</td>
</tr>
<tr>
<td class="name"><code>options.showAspectRatioGuideButton</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Shows or hides the aspect ratio guide button on the video controls</td>
</tr>
<tr>
<td class="name"><code>options.showPlaybackSpeedButton</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Shows or hides the playback speed button on the video controls</td>
</tr>
<tr>
<td class="name"><code>options.showAnnotationPreview</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Created annotations will have a preview in the notes panel. Turned on by default for Chromium browsers. Off for other browsers due to preview being, often, of the incorrect frame.</td>
</tr>
<tr>
<td class="name"><code>options.openNotesPanelOnDocumentLoaded</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Notes panel will be open on document loaded</td>
</tr>
<tr>
<td class="name"><code>options.showMobileStyling</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Shows or hides mobile styling</td>
</tr>
<tr>
<td class="name"><code>options.libPath</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">The path to the video lib files. Only ffprobe files for now.</td>
</tr>
<tr>
<td class="name"><code>options.showFrameNumbersByDefault</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">Shows frame numbering by default on the video controls</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A promise that resolves to an object containing the functions needed to load videos in WebViewer.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">VideoFunctions</span>
</dd>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="~dangerouslySetNoteTransformFunction"><span class="type-signature"></span>dangerouslySetNoteTransformFunction(noteTransformFunction)</h4>
</dt>
<dd>
<div class="description">
Accepts a function that will be called every time a note in the left panel is rendered.
This function can be used to add, edit or hide the contents of the note. Use this function instead of
the webviewer one. The webviewer one will be overwritten by video. See WebViewer documentation <a href="https://docs.apryse.com/api/web/UI.html#.dangerouslySetNoteTransformFunction">dangerouslySetNoteTransformFunction</a>.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>noteTransformFunction</code></td>
<td class="type">
<span class="param-type">NoteTransformFunction</span>
</td>
<td class="description last">The function that will be used to transform notes in the left panel. See <a href="https://docs.apryse.com/api/web/UI.html#.NoteTransformFunction">NoteTransformFunction</a>.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const videoInstance = await initializeVideoViewer(instance, { license });
videoInstance.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
// Change the title of every note
wrapper.querySelector('.author-and-time>span').innerHTML = 'My custom note title';
// Add a button that alerts the user when clicked
const button = createElement('button');
button.onmousedown = (e) => {
if(state.isSelected) {
alert('Hello world!');
} else {
alert('Goodbye world!');
}
};
button.innerHTML = 'Alert me'
wrapper.appendChild(button);
// Add a button that makes the annotation blue
const button = createElement('button');
button.onmousedown = (e) => {
state.annotation.StrokeColor = new instance.Core.Annotations.Color(0, 0, 255);
instance.UI.annotManager.redrawAnnotation(state.annotation)
};
button.innerHTML = 'Make me blue'
wrapper.appendChild(button);
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id="~getVideo"><span class="type-signature"></span>getVideo()</h4>
</dt>
<dd>
<div class="description">
Returns the instance of <a href="Video.html">Video</a> associated with the document.
This needs to be called after the 'videoElementLoaded' event. See <a href="module-@pdftron_webviewer-video.html#~event:videoElementLoaded">event:videoElementLoaded</a>
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The instance of <a href="Video.html">Video</a> associated with the document.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~loadVideo"><span class="type-signature"></span>loadVideo(url, options)</h4>
</dt>
<dd>
<div class="description">
Loads a video for the WebViewer instance passed into initializeVideoViewer.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>url</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">Blob</span>
|
<span class="param-type">File</span>
</td>
<td class="description last">The video url or video file or video blob</td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">Optional options object
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fileName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">Name of the file. URLs without an extension need this property set</td>
</tr>
<tr>
<td class="name"><code>headers</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">Custom headers to attach when making http requests to provided URL</td>
</tr>
<tr>
<td class="name"><code>serviceWorkerLocation</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
''
</td>
<td class="description last">The folder location of your service worker. The service worker is used to pass
custom headers to the requested media. You may need to specify where in which folder this file is located on your server if it is
not at the root level.</td>
</tr>
<tr>
<td class="name"><code>withCredentials</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">CORS requests for this element will have the credentials flag set to 'include'</td>
</tr>
<tr>
<td class="name"><code>generatedPeaks</code></td>
<td class="type">
<span class="param-type">Array</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">An array of pre-generated peaks for corresponding video file</td>
</tr>
<tr>
<td class="name"><code>useShakaPlayer</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">Runs shaka player integration instead of HTML video</td>
</tr>
<tr>
<td class="name"><code>fps</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">Sets the frames per second of the video. Usually retrieved automatically, but this option may
be used incase that fails.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h5>Examples</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const license = '---- Insert commercial license key here after purchase ----';
const {
loadVideo,
} = await initializeVideoViewer(instance, { license });
loadVideo('https://www.mydomain.com/my_video_url');
});</pre>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const license = '---- Insert commercial license key here after purchase ----';
const {
loadVideo,
} = await initializeVideoViewer(instance, { license });
loadVideo('https://www.mydomain.com/my_video_url', {
headers: {
'Authorization': 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'
},
serviceWorkerLocation: '/',
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id="~renderControlsToDOM"><span class="type-signature"></span>renderControlsToDOM(customContainer)</h4>
</dt>
<dd>
<div class="description">
Mounts the react component for the video controls into the passed in container.
Useful when renderControls is set to false and you want to render them somewhere else.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>customContainer</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">A container element, e.g. a div.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const license = '---- Insert commercial license key here after purchase ----';
const {
loadVideo
renderControlsToDOM,
} = await initializeVideoViewer(
instance,
{
license,
renderControls: false,
},
);
...
instance.Core.documentViewer.addEventListener'documentLoaded', (e) => {
const customContainer = instance.UI.iframeWindow.document.querySelector('.custom-container');
renderControlsToDOM(customContainer);
});
});</pre>
</dd>
<hr>
<dt class="name" id="~VideoFunctions">
<h4 id="~VideoFunctions">VideoFunctions</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>getVideo</code></td>
<td class="type">
<span class="param-type">getVideo</span>
</td>
<td class="description last">Returns the instance of <a href="Video.html">Video</a> associated with the document.</td>
</tr>
<tr>
<td class="name"><code>loadVideo</code></td>
<td class="type">
<span class="param-type">loadVideo</span>
</td>
<td class="description last">Loads a video for the WebViewer instance passed into initializeVideoViewer.</td>
</tr>
<tr>
<td class="name"><code>renderControlsToDOM</code></td>
<td class="type">
<span class="param-type">renderControlsToDOM</span>
</td>
<td class="description last">Mounts the react component for the video controls into the passed in container.
Useful when renderControls is set to false and you want to render the controls somewhere else.</td>
</tr>
<tr>
<td class="name"><code>dangerouslySetNoteTransformFunction</code></td>
<td class="type">
<span class="param-type">dangerouslySetNoteTransformFunction</span>
</td>
<td class="description last">Accepts a function that will be called every time a note in the left panel is rendered.
This function can be used to add, edit or hide the contents of the note. Use this function instead of
the webviewer one. The webviewer one will be overwritten by video. See WebViewer documentation <a href="https://docs.apryse.com/api/web/UI.html#.dangerouslySetNoteTransformFunctionapi/web/UI.html#.dangerouslySetNoteTransformFunction">dangerouslySetNoteTransformFunction</a>.</td>
</tr>
<tr>
<td class="name"><code>UI</code></td>
<td class="type">
<span class="param-type"><a href="UI.html">UI</a></span>
</td>
<td class="description last">The UI namespace of WebViewer Video, used to update UI elements of WebViewer Video.</td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Events</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="~event:videoElementLoaded">videoElementLoaded</h4>
</dt>
<dd>
<div class="description">
Event emitted when video element gets initialized
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const { docViewer } = instance;
docViewer.addEventListener('videoElementLoaded', listener);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id="~event:videoPause">videoPause</h4>
</dt>
<dd>
<div class="description">
Event emitted when video gets paused
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const { docViewer } = instance;
docViewer.addEventListener('videoPause', listener);
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id="~event:videoPlay">videoPlay</h4>
</dt>
<dd>
<div class="description">
Event emitted when video begins playing
</div>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
const { docViewer } = instance;
docViewer.addEventListener('videoPlay', listener);
});</pre>
</dd>
</dl>
</article>
</section>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-3">
<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
</div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
on 2025-09-04T11:17:19-07:00
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : false,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>