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.

The source code for this project is available in our Git repo.

linkPrerequisites

• Node.js and NPM

linkInitial setup

Clone the repo to a specific directory and then navigate to it:

# command line
git clone https://github.com/PDFTron/webviewer-video-sample.git video
cd video

linkHow to run

1. Navigate to the video directory and isntall the required dependencies to run the samples by executing:

npm install

2. Next run the sample by executing:

npm start

3. Next run the server in another terminal. This is required for annotations to be saved:

npm start-server

4. Navigate to http://localhost:3000/ and you will see the sample WebViewer running with a video, similar to above.

linkHow it works

HTML5 Videos can be loaded into WebViewer with use of the @pdftron/webviewer-video package.

linkInstall

npm install @pdftron/webviewer-video

initializeVideoViewer is called to give WebViewer the ability to handle the loading of video files. Similarly, loadVideoUI is called to supply video player controls to the UI. Afterwards, a video can be loaded with loadVideo.

linkExample Usage

import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer } from '@pdftron/webviewer-video';

WebViewer({
    path: 'lib',
    css: 'styles.css',
    disabledElements: [
        'searchButton',
        'pageNavOverlay',
        'viewControlsButton',
        'panToolButton',
    ],
}, document.getElementById('viewer'))
    .then(async(instance) => {
        // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
        const {
            loadVideo,
            loadVideoUI,
        } = await initializeVideoViewer(
            instance,
            '---- Insert commercial license key here after purchase ----',
        );

        // Attaches the video player UI
        loadVideoUI();

        // Load a video at a specific url
        // Can be a local or public link
        const videoUrl = './video.mp4';
        const thumbnail = './thumbnail.jpg';
        loadVideo(videoUrl, thumbnail);
    });

linkCustomizing UI when viewing a video

To edit the UI, first copy the code from node_modules/@pdftron/webviewer-video/src/loadVideoUI.js instead of calling loadVideoUI, into your project. Then you can make modifications to it.

linkExample

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;

    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
      });
  })

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:

• PHP sample

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.

• ASP.NET (MVC) sample

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

@pdftron/webviewer-video
The video npm package

getVideo
A function on a document to retrieve the Video object

Video
A class representing a video.