Module: @pdftron/webviewer-video

Methods

---

<async, static> initializeVideoViewer(instance, options, documentViewerNumber)

Initializes the video viewer so that webviewer can load videos.

Parameters:

Name	Type	Argument	Default	Description
instance	Object			The WebViewer instance
options	Object			Options object.
documentViewerNumber	number		1	The document viewer number
options.license	string	<optional>	''	The WebViewer Video license or file url.
options.showFrames	boolean	<optional>	true	Shows or hides video timeline reel.
options.showTooltipPreview	boolean	<optional>	true	Shows or hides tooltip preview.
options.renderControls	boolean	<optional>	true	Shows or hides the video controls.
options.AudioComponent	React.Component	<optional>	null	The Webviewer-Audio component
options.cacheAudioWaveform	boolean	<optional>	true	Caches audio waveform on initial load
options.defaultLoadAudio	boolean	<optional>	true	Loads audio on initial load
options.showFullscreenButton	boolean	<optional>	true	Shows or hides the fullscreen button on the video
options.showSubtitlesButton	boolean	<optional>	true	Shows or hides the subtitles button on the video controls
options.showAspectRatioGuideButton	boolean	<optional>	true	Shows or hides the aspect ratio guide button on the video controls
options.showPlaybackSpeedButton	boolean	<optional>	true	Shows or hides the playback speed button on the video controls
options.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.
options.openNotesPanelOnDocumentLoaded	boolean	<optional>	true	Notes panel will be open on document loaded
options.showMobileStyling	boolean	<optional>	false	Shows or hides mobile styling
options.libPath	Object	<optional>		The path to the video lib files. Only ffprobe files for now.
options.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/
options.showFrameNumbersByDefault	boolean	<optional>	false	Shows frame numbering by default on the video controls

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 fps number <optional> null Sets the frames per second of the video. Usually retrieved automatically, but this option may be used incase that fails.

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);
    });