Module: @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. See the npm package on @pdftron/webviewer-video for more information.

Methods


<async, static> initializeVideoViewer(instance, options)

Initializes the video viewer so that webviewer can load videos.
Parameters:
Name Type Description
instance Object The WebViewer instance
options Object Options object.
Properties
Name Type Argument Default Description
license string <optional>
'' The WebViewer Video license or file url.
showFrames boolean <optional>
true Shows or hides video timeline reel.
showTooltipPreview boolean <optional>
true Shows or hides tooltip preview.
renderControls boolean <optional>
true Shows or hides the video controls.
AudioComponent React.Component <optional>
null The Webviewer-Audio component
cacheAudioWaveform boolean <optional>
true Caches audio waveform on initial load
defaultLoadAudio boolean <optional>
true Loads audio on initial load
showFullscreenButton boolean <optional>
true Shows or hides the fullscreen button on the video
showSubtitlesButton boolean <optional>
true Shows or hides the subtitles button on the video controls
showAspectRatioGuideButton boolean <optional>
true Shows or hides the aspect ratio guide button on the video controls
showPlaybackSpeedButton boolean <optional>
true Shows or hides the playback speed button on the video controls
showAnnotationPreview boolean <optional>
true Created annotations will have a preview in the notes panel. Turned on by default for Chromium browsers. Off for other browsers due to preview being, often, of the incorrect frame.
openNotesPanelOnDocumentLoaded boolean <optional>
true Notes panel will be open on document loaded
showMobileStyling boolean <optional>
true Shows or hides mobile styling
libPath Object <optional>
The path to the video lib files. Only ffprobe files for now.
enableRedaction Object <optional>
Enables Redaction tools. Requires a server component to run ffmpeg commands. See: https://www.pdftron.com/documentation/web/guides/video/server-component/
Returns:
A promise that resolves to an object containing the functions needed to load videos in WebViewer.
Type
VideoFunctions

Type Definitions


dangerouslySetNoteTransformFunction(noteTransformFunction)

Accepts a function that will be called every time a note in the left panel is rendered. This function can be used to add, edit or hide the contents of the note. Use this function instead of the webviewer one. The webviewer one will be overwritten by video. See WebViewer documentation dangerouslySetNoteTransformFunction.
Parameters:
Name Type Description
noteTransformFunction NoteTransformFunction The function that will be used to transform notes in the left panel. See NoteTransformFunction.
Returns:
Type
void
Example
WebViewer(...)
    .then(function(instance) {
      const videoInstance = await initializeVideoViewer(instance, { license });
      videoInstance.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
        // Change the title of every note
        wrapper.querySelector('.author-and-time>span').innerHTML = 'My custom note title';

        // Add a button that alerts the user when clicked
        const button = createElement('button');
        button.onmousedown = (e) => {
          if(state.isSelected) {
            alert('Hello world!');
          } else {
            alert('Goodbye world!');
          }
        };
        button.innerHTML = 'Alert me'
        wrapper.appendChild(button);

        // Add a button that makes the annotation blue
        const button = createElement('button');
        button.onmousedown = (e) => {
          state.annotation.StrokeColor = new instance.Annotations.Color(0, 0, 255);
          instance.UI.annotManager.redrawAnnotation(state.annotation)
        };
        button.innerHTML = 'Make me blue'
        wrapper.appendChild(button);
      });
    });

getVideo()

Returns the instance of Video associated with the document. This needs to be called after the 'videoElementLoaded' event. See event:videoElementLoaded
Returns:
The instance of Video associated with the document.
Type
object

loadVideo(url, options)

Loads a video for the WebViewer instance passed into initializeVideoViewer.
Parameters:
Name Type Description
url string | Blob | File The video url or video file or video blob
options Object Optional options object
Properties
Name Type Argument Default Description
fileName string <optional>
Name of the file. URLs without an extension need this property set
headers Object <optional>
Custom headers to attach when making http requests to provided URL
withCredentials Object <optional>
false CORS requests for this element will have the credentials flag set to 'include'
generatedPeaks Array <optional>
null An array of pre-generated peaks for corresponding video file
useShakaPlayer boolean <optional>
true Runs shaka player integration instead of HTML video
Returns:
Type
void
Examples
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const {
        loadVideo,
      } = await initializeVideoViewer(instance, { license });

      loadVideo('https://www.mydomain.com/my_video_url');
    });
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const {
        loadVideo,
      } = await initializeVideoViewer(instance, { license });

      loadVideo('https://www.mydomain.com/my_video_url', {
        headers: {
          'Authorization': 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'
        },
      });
    });

renderControlsToDOM(customContainer)

Mounts the react component for the video controls into the passed in container. Useful when renderControls is set to false and you want to render them somewhere else.
Parameters:
Name Type Description
customContainer Object A container element, e.g. a div.
Returns:
Type
void
Example
WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const {
        loadVideo
        renderControlsToDOM,
      } = await initializeVideoViewer(
        instance,
        {
          license,
          renderControls: false,
        },
      );

      ...
      instance.docViewer.addEventListener'documentLoaded', (e) => {
        const customContainer = instance.iframeWindow.document.querySelector('.custom-container');
        renderControlsToDOM(customContainer);
      });
    });

VideoFunctions

Type:
  • Object
Properties:
Name Type Description
getVideo getVideo Returns the instance of Video associated with the document.
loadVideo loadVideo Loads a video for the WebViewer instance passed into initializeVideoViewer.
renderControlsToDOM renderControlsToDOM Mounts the react component for the video controls into the passed in container. Useful when renderControls is set to false and you want to render the controls somewhere else.
dangerouslySetNoteTransformFunction dangerouslySetNoteTransformFunction Accepts a function that will be called every time a note in the left panel is rendered. This function can be used to add, edit or hide the contents of the note. Use this function instead of the webviewer one. The webviewer one will be overwritten by video. See WebViewer documentation dangerouslySetNoteTransformFunction.
UI UI The UI namespace of WebViewer Video, used to update UI elements of WebViewer Video.

Events


videoElementLoaded

Event emitted when video element gets initialized
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.addEventListener('videoElementLoaded', listener);
    });

videoPause

Event emitted when video gets paused
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.addEventListener('videoPause', listener);
    });

videoPlay

Event emitted when video begins playing
Example
WebViewer(...)
    .then(function(instance) {
      const { docViewer } = instance;
      docViewer.addEventListener('videoPlay', listener);
    });