Did you find this helpful?
Some test text!
menu
Videokeyboard_arrow_down
Get started with WebViewer Video
Welcome to WebViewer video. This guide will show you how to get started with a free trial. WebViewer video allows users to annotate video frames. Annotations will be tied to specific frames and will only be rendered, when the video is seeked to the specific frames.
linkPrerequisites
- Node.js and NPM
- WebViewer Video:
linkInitial setup
- Extract
webviewer-video-nodejs-sample.zip. The directory should look something like this:
sample
├── ...
├── package.json
├── README.md
├── client
│ ├── hyperlist.js
│ ├── icons.png
│ ├── lib
│ │ ├── ...
│ ├── index.html
│ ├── lodash.js
│ ├── plyr
│ │ ├── ...
│ ├── styles.css
│ ├── video.build.js
│ └── video.mp4
└── server
├── xfdf
│ ├── ...
├── annotationHandler.js
└── server.jslinkHow to run
- Navigate to the extracted
samplefolder and install the required dependencies to run the samples by executing:
npm install- Next run the sample by executing:
npm startYou should see a message that reads:
...
Server is listening at http://localhost:3000/client/index.html- Navigate to
http://localhost:3000/client/index.htmland you will see the sample WebViewer running with a video, similar to above.
linkHow it works
<html>
<head>
<script src='lib/webviewer.min.js'></script>
<script src='./video.build.js'></script>
</head>
...
</html>To start, the sample includes video.build.js after webviewer.min.js. This will put WebViewer.Video.registerDocument on the window.
Then, it calls registerVideoDocument to extend the document class to support documents of type 'video'.
Afterwards, it uses WebViewer.Video.loadDocument to load a video at a specific url.
<script>
WebViewer({
path: 'lib',
css: 'styles.css',
disabledElements: [
'searchButton',
'pageNavOverlay',
'viewControlsButton',
'panToolButton',
],
}, document.getElementById('viewer'))
.then(async (instance) {
// Extends document class to support documents of type 'video'
await WebViewer.Video.registerVideoDocument(
instance,
'---- Insert commercial license key here after purchase ----',
);
// Load a video at a specific url
const videoUrl = '/client/video.mp4';
const thumbnail = '/client/thumbnail.jpg';
WebViewer.Video.loadDocument(videoUrl, thumbnail);
});
</script>linkCustomizing
linkUI
To add or remove controls open /client/index.js and make your changes there. See the following example on adding a new button:
docViewer.on('pageComplete', (pageIndex, videoContainer) => {
...
const controls = createElementFromHTML(`
<div class="controls">
<svg id="newButton" class="icon" width="18px" height="18px" data-state="hidden">
<use xlink:href="/client/plyr/plyr.svg#plyr-play"></use>
</svg>
...
</div>
`);
videoContainer.appendChild(controls);
const newButton = controls.querySelector('#newButton');
newButton.addEventListener('click', () => {
// do something
});To modify the css for the video controls, open /client/styles.css and make your changes there.
#newButton{
fill: #fff;
padding: 5px;
...
}linkImport and Exporting Annotations
You can use AJAX requests to save and load the XFDF string from a server, and setup the server to write and read XFDF files.
To save annotations to a frame, the sample, uses POST and GET requests. In the sample you will find fetch request that are similar to the following:
// load the annotation data for video123
fetch('/server/annotationHandler.js?documentId=video123', {
method: 'GET'
}).then(function(response) {
if (response.status === 200) {
response.text().then(function(xfdfString) {
// <xfdf>
// <annots>
// <text start-time="452.219753" subject="Comment" color="#FFE6A2" ... />
// </annots>
// </xfdf>
annotManager.importAnnotations(xfdfString);
});
}
});
// later save the annotation data for video123
var xfdfString = annotManager.exportAnnotations({ links: false, widgets: false });
fetch('/server/annotationHandler.js?documentId=video123', {
method: 'POST',
body: xfdfString // written into an XFDF file on server
});The sample uses Node.js as a backend for fulling the POST and GET requests, but other backends can also be used with video annotations.
For samples about saving annotations into XFDF files in different backends, see the Github repos below:
From this sample, take /server/annotationHandler.php and replace /server/annotationHandler.js in the Node.js video annotations sample. Then change the fetch url to something like /server/annotationHandler.php?documentId=video123 in /client/index.js. Afterwards, serve the root directory using the PHP development environment, and navigate to /client/index.html.
The easiest way to get video annotations to work with ASP, is to take the above sample and replace the contents of /server/webviewer-annotations-asp-net-sample/Scripts/webviewer/ with the contents of /client/ from the Node.js video annotations sample. Afterwards, see instructions in the ASP sample on how to run.
linkServer configuration
Make sure your server has byte-range requests enabled to allow video streaming.
linkAPI
WebViewer.Video
A namespace containing video setup functions
getVideo
A function on a document to retrieve the Video object
Video
A class representing a video.
Get the answers you need: Support
close
Free Trial
Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.
Select a platform to get started with your free trial.
Web
Android
iOS
Windows
Linux
Unlimited usage. No email address required.
