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

linkInitial setup

  1. 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.js

linkHow to run

  1. Navigate to the extracted sample folder and install the required dependencies to run the samples by executing:
npm install
  1. Next run the sample by executing:
npm start

You should see a message that reads:

...
Server is listening at http://localhost:3000/client/index.html
  1. Navigate to http://localhost:3000/client/index.html and 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.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close