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.

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

WebViewer({
    path: '/webviewer/lib',
    css: '/styles.css',
    selectAnnotationOnCreation: true,
    disabledElements: [
      'searchButton',
      'pageNavOverlay',
      'viewControlsButton',
      'panToolButton',
    ],
  },
  viewer.current,
).then(async instance => {
  // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
  const {
      loadVideo,
  } = await initializeVideoViewer(
      instance,
      '---- Insert commercial license key here after purchase ----',
  );
  // Load a video at a specific url. Can be a local or public link
  // If local it needs to be relative to lib/ui/index.html.
  // Or at the root. (eg '/video.mp4')
  const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
  loadVideo(videoUrl);
  instance.docViewer.on('documentLoaded', () => {
    const customContainer =
        instance.iframeWindow.document.querySelector('.custom-container');
    // Inject the video Controls into WebViewer
    renderControlsToDOM(instance, customContainer);
  });
});

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.

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

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

    docViewer.on('pageComplete', (pageNumber, 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

Importing and exporting annotations works the exact same way as it does on WebViewer, with the video annotations having additional the properties start-time and end-time.

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.