@pdftron/webviewer-video

WebViewer Video

WebViewer is a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. It allows you to view and annotate PDF files on your web app with a fully customizable UI.

This is an addon for WebViewer that allows to load HTML videos (.mp4, ogg, webm) so that their video frames can be annotated.

For more information, see this guide.

Also, try out the react sample here. This is a good starting point. It shows how to integrate WebViewer and video with react and server component for saving of annoations.

Initial setup

Before you begin, make sure your development environment includes Node.js and npm.

Install

npm install @pdftron/webviewer-video

How to use

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

WebViewer({
    path: 'lib',
    css: 'styles.css',
    disabledElements: [
        'searchButton',
        'pageNavOverlay',
        'viewControlsButton',
        'panToolButton',
    ],
}, document.getElementById('viewer'))
    .then(async (instance) {
        // Extends document class to support documents of type 'video'
        await initializeVideoViewer(
            instance,
            '---- Insert commercial license key here after purchase ----',
        );

        // Attaches the video player UI
        loadVideoUI(instance);

        // Load a video at a specific url
        // Can be a local or public link
        const videoUrl = './video.mp4';
        const thumbnail = './thumbnail.jpg';
        loadVideo(videoUrl, thumbnail);
    });

loadVideoUI attaches the video player UI to WebViewer. If you would like to modify this UI then copy the code from link, into your project.

Documentation

See @pdftron/webviewer-video API documentation.
See Video Class API documentation.

Contributing

See contributing.

License

See license.