@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.
3,272 lines (928 loc) • 31.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Documentation Class: 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">Class: Video</h1>
<section>
<header>
<h2>
Video
</h2>
</header>
<article>
<div class="container-overview">
<hr>
<dt>
<h4 class="name" id="Video"><span class="type-signature"><async> </span>new Video()</h4>
</dt>
<dd>
<div class="description">
Represents a Video. Constructor is private. Use <a href="module-@pdftron_webviewer-video.html#~getVideo">module:@pdftron/webviewer-video~getVideo</a> to retrieve the instance.
</div>
<dl class="details">
</dl>
</dd>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<hr>
<dt>
<h4 class="name" id=".getTimeFromFrame"><span class="type-signature"><static> </span>getTimeFromFrame(frame)</h4>
</dt>
<dd>
<div class="description">
Returns the conversion of a frame number to a time stamp (in milliseconds).
</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>frame</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The frame number to convert.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The resulting time.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getAllAnnotations"><span class="type-signature"><inner> </span>getAllAnnotations()</h4>
</dt>
<dd>
<div class="description">
Returns all annotations for all frames in the video.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
An array of all annotations.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getAnnotationCanvasesWithIntervals"><span class="type-signature"><async, inner> </span>getAnnotationCanvasesWithIntervals()</h4>
</dt>
<dd>
<div class="description">
Retrieves intervals and images for annotations on video canvas
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.<<a href="global.html#CanvasWithInterval">CanvasWithInterval</a>></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getDuration"><span class="type-signature"><inner> </span>getDuration()</h4>
</dt>
<dd>
<div class="description">
Returns the duration of the video. Guaranteed to be correct when the readyState
of the video is greater than 0.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getElement"><span class="type-signature"><inner> </span>getElement()</h4>
</dt>
<dd>
<div class="description">
Returns the underlying HTML5 video element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getFormattedAndTrimmedTime"><span class="type-signature"><inner> </span>getFormattedAndTrimmedTime(seconds [, format])</h4>
</dt>
<dd>
<div class="description">
Returns a string representing the passed in seconds. Trims unnecessary data
</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>seconds</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>format</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">Time format to return</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
An object containing the trimmed time and the format
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="global.html#FormattedTime">FormattedTime</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getFormattedCurrentTime"><span class="type-signature"><inner> </span>getFormattedCurrentTime()</h4>
</dt>
<dd>
<div class="description">
Returns a string representing the current seeked to time. Formatted as hh:mm:ss.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A string representing the curretn seeked to time. Formatted as hh:mm:ss.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getFormattedTime"><span class="type-signature"><inner> </span>getFormattedTime(seconds, showFrameNumber)</h4>
</dt>
<dd>
<div class="description">
Returns a string representing the passed in seconds. Formatted as hh:mm:ss.
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>seconds</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>showFrameNumber</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
false
</td>
<td class="description last">Determines if we show the frame number in the time</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A string representing the time passed in seconds. Formatted as hh:mm:ss.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getFPS"><span class="type-signature"><inner> </span>getFPS()</h4>
</dt>
<dd>
<div class="description">
Returns the fps of the video video.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The fps of the video
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getFrameFromTime"><span class="type-signature"><inner> </span>getFrameFromTime(time)</h4>
</dt>
<dd>
<div class="description">
Returns the conversion of a time stamp to a frame number.
</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>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">A number representing a specific time in the video. The value must be in milliseconds.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The resulting frame number.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getReadyState"><span class="type-signature"><inner> </span>getReadyState()</h4>
</dt>
<dd>
<div class="description">
Returns the video readystate
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getSubtitleTrackElement"><span class="type-signature"><inner> </span>getSubtitleTrackElement()</h4>
</dt>
<dd>
<div class="description">
Returns the underlying HTML track element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getTimeFromFrame"><span class="type-signature"><inner> </span>getTimeFromFrame(frame)</h4>
</dt>
<dd>
<div class="description">
Returns the conversion of a frame number to a time stamp (in milliseconds).
</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>frame</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The frame number to convert.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The resulting time.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getTotalFrames"><span class="type-signature"><inner> </span>getTotalFrames()</h4>
</dt>
<dd>
<div class="description">
Returns the total number of frames in the video.
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The total number of frames in the video.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~getVerifiedStatus"><span class="type-signature"><inner> </span>getVerifiedStatus()</h4>
</dt>
<dd>
<div class="description">
Returns the verified status of license key
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~goToTime"><span class="type-signature"><inner> </span>goToTime(time)</h4>
</dt>
<dd>
<div class="description">
Jump to time in video
</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>time</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">The unformatted time to jump the video to</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~hasAnnotation"><span class="type-signature"><inner> </span>hasAnnotation(frameNumber)</h4>
</dt>
<dd>
<div class="description">
Returns true if the frame number passed in has at least one annotation associated with it. Returns false otherwise.
</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>frameNumber</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The frame number to check that annotations are associated with</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~loadSubtitles"><span class="type-signature"><inner> </span>loadSubtitles(file)</h4>
</dt>
<dd>
<div class="description">
Loads subtitles in the HTML video element.
</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>file</code></td>
<td class="type">
<span class="param-type">File</span>
</td>
<td class="description last">The subtitles file. Can be an srt file or vtt file. https://developer.mozilla.org/en-US/docs/Web/API/File</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Example</h5>
<pre class="sunlight-highlight-javascript">WebViewer(...)
.then(function(instance) {
...
const {
getVideo,
loadVideo,
} = await initializeVideoViewer(
instance,
{ license },
);
....
docViewer.addEventListener('documentLoaded', () => {
const video = getVideo();
...
video.loadSubtitles(file);
...
});
});</pre>
</dd>
<hr>
<dt>
<h4 class="name" id="~setElement"><span class="type-signature"><async, inner> </span>setElement()</h4>
</dt>
<dd>
<div class="description">
Sets the underlying HTML5 video element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~setMuted"><span class="type-signature"><inner> </span>setMuted(mutedStatus)</h4>
</dt>
<dd>
<div class="description">
Sets video muted status
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
</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>mutedStatus</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">the new muted status of video</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~setUnmuted"><span class="type-signature"><inner> </span>setUnmuted()</h4>
</dt>
<dd>
<div class="description">
Sets video to be unmuted
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~setVolume"><span class="type-signature"><inner> </span>setVolume(volume)</h4>
</dt>
<dd>
<div class="description">
Sets video volume
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
</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>volume</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">the new volume of video between 0 and 1</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~updateAnnotationsToTime"><span class="type-signature"><inner> </span>updateAnnotationsToTime(newTime)</h4>
</dt>
<dd>
<div class="description">
Renders the saved annotations on the annotation canvas at the passed in time
</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>newTime</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">A number representing a specific time in the video. The value must be in milliseconds.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
</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>