Section:

Open Videos using JavaScript

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

Install

sh

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

1import WebViewer from '@pdftron/webviewer';
2import { initializeVideoViewer, renderControlsToDOM } from '@pdftron/webviewer-video';
3
4WebViewer({
5    path: '/webviewer/lib',
6    selectAnnotationOnCreation: true,
7  },
8  viewer.current,
9).then(async instance => {
10  // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
11  const {
12      loadVideo,
13  } = await initializeVideoViewer(
14      instance,
15      {
16        license: '---- Insert commercial license key here after purchase ----',
17      }
18  );
19  // Load a video at a specific url. Can be a local or public link
20  // If local it needs to be relative to lib/ui/index.html.
21  // Or at the root. (eg '/video.mp4')
22  const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
23  loadVideo(videoUrl);
24});

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales