Package Exports

@pdftron/webviewer-video

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@pdftron/webviewer-video) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 loading HTML5 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. It shows how to integrate WebViewer and WebViewer-Video with a server component for the saving of annotations.

Initial setup

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

Install

npm install @pdftron/webviewer-video

How to use

Here is an example of how WebViewer and WebViewer-video could be integrated into your application.

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer, renderControlsToDOM } from '@pdftron/webviewer-video';

const App = () => {
    const viewer = useRef(null);

    useEffect(() => {
        WebViewer({
            path: 'lib',
            css: 'styles.css',
            disabledElements: [
                'searchButton',
                'pageNavOverlay',
                'viewControlsButton',
                'panToolButton',
            ],
        }, document.getElementById('viewer'))
            .then(async(instance) => {
                setInstance(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 = './video.mp4';
                loadVideo(videoUrl);

                const customContainer =
                    instance.iframeWindow.document.querySelector('.custom-container');

                // Inject the video Controls into WebViewer
                renderControlsToDOM(instance, customContainer);
            });
    }, []);

    return (
        <div className="App">
            <div className="webviewer" ref={viewer} />
        </div>
    );
}

Also see the React sample, for a complete solution, with further customizations.

Loading as a Script Tag

If your environment can not import WebViewer Video from the module, you can instead include WebViewer Video as a script tag. Simply, take the file node_modules/@pdftron/webviewer-video/dist/main.js and add it to your project's html page.

    <head>
        ...
        <!-- main.js can be renamed -->
        <script src="./main.js"></script>
    </head>

This will add the object WebViewerVideo to the window. This object contains initializeVideoViewer and renderControlsToDOM. So the previous code can be changed to:

    ...
    const {
        loadVideo,
    } = await window.WebViewerVideo.initializeVideoViewer(
        instance,
        '---- Insert commercial license key here after purchase ----',
    );
    ...
    window.WebViewerVideo.renderControlsToDOM(instance, customContainer);

Documentation

See the docs folder provided in the package.

License

WebViewer Video will run in trial mode until a license is provided. For more information on licensing, please visit our website.