1import WebViewer from '@pdftron/webviewer';
2import { initializeVideoViewer, renderControlsToDOM } from '@pdftron/webviewer-video';
3
4WebViewer({
5 path: '/webviewer/lib',
6 },
7 viewer.current,
8).then(async instance => {
9 // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
10 const {
11 getVideo,
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
25 const docViewer = instance.Core.documentViewer;
26 docViewer.addEventListener('videoElementLoaded', () => {
27 const doc = docViewer.getDocument();
28 const video = getVideo();
29 const videoElement = video.getElement();
30 ...
31 ...
32 const playButton = controls.querySelector('#playButton');
33
34 playButton.addEventListener('click', () => {
35 // play the video
36 if (videoElement.paused || videoElement.ended) {
37 videoElement.play();
38 }
39 });
40
41 videoElement.addEventListener('timeupdate', async () => {
42 const currentFrameNumber = video.getFrameFromTime(videoElement.currentTime);
43 // do something with the frame number
44 });
45 });
46});