Some test text!

Loading...
Guides
Open video files

Open Videos using JavaScript

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

Install

npm install @pdftron/webviewer-video

Below is a sample setup of the video package with webviewer.

initializeVideoViewer is called to give WebViewer the ability to handle the loading of video files. Afterwards, a video can be loaded with loadVideo. Lastly settings to customize the behavior of the controls can be passed in when calling initializeVideoViewer.

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

WebViewer({
    path: '/webviewer/lib',
    selectAnnotationOnCreation: true,
  },
  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.Core.documentViewer.addEventListener('documentLoaded', () => {
    const customContainer =
        instance.UI.iframeWindow.document.querySelector('.custom-container');
    // Inject the video Controls into WebViewer
    // Needs to be called after the document is loaded
    renderControlsToDOM(instance, customContainer);
  });
});

Get the answers you need: Support