Some test text!

menu
Open video fileskeyboard_arrow_down

Open Videos using JavaScript

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

linkInstall

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, renderControlsToDOM is called to append player controls to webviewer. It takes an HTML container element in order to place the controls.

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

WebViewer({
    path: '/webviewer/lib',
    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
    // Needs to be called after the document is loaded
    renderControlsToDOM(instance, customContainer);
  });
});

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