@pdftron/webviewer-video

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

1.0.30
npm

Version published: 5 years ago

Weekly downloads: 6.4K; decreased by-4.21%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

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.

WebViewer

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 } from '@pdftron/webviewer-video';

WebViewer({
    path: 'lib',
    css: 'styles.css',
    disabledElements: [
        'searchButton',
        'pageNavOverlay',
        'viewControlsButton',
        'panToolButton',
    ],
}, document.getElementById('viewer'))
    .then(async(instance) => {
        // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
        const {
            loadVideo,
            loadVideoUI,
        } = await initializeVideoViewer(
            instance,
            '---- Insert commercial license key here after purchase ----',
        );

        // Attaches the video player UI
        loadVideoUI();

        // 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 node_modules/@pdftron/webviewer-video/src/loadVideoUI.js, into your project.

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. So the previous code can be changed to:

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

Documentation

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

License

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

Keywords

FAQs

What is @pdftron/webviewer-video?

Is @pdftron/webviewer-video popular?

Is @pdftron/webviewer-video well maintained?

Package last updated on 09 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install