Some test text!

menu
UI customizationkeyboard_arrow_down

Customizing UI when viewing a video

To edit the UI, first copy the code from node_modules/@pdftron/webviewer-video/src/loadVideoUI.js instead of calling loadVideoUI, into your project. Then you can make modifications to it.

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

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;

    docViewer.on('pageComplete', (pageNumber, videoContainer) => {
      const controls = createElementFromHTML(`
        <div class="controls">
          <svg id="newButton" class="icon" width="18px" height="18px" data-state="hidden">
            <use xlink:href="/client/plyr/plyr.svg#plyr-play"></use>
          </svg>
          ...
        </div>
      `);
      videoContainer.appendChild(controls);

      const newButton = controls.querySelector('#newButton');
      newButton.addEventListener('click', () => {
        // do something
      });
  });

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close