Video Viewer not loading video and throwing JS error

Technical Support
1

Product:

@pdftron/webviewer-video

Product Version:

Please give a brief summary of your issue:
(Think of this as an email subject)
Trying to view video through VideoViewer library but getting JS issue and not loading video in frame.

webviewer-core.min.js:296 ERROR TypeError: Cannot read properties of undefined (reading 'dispatchEvent')
    at webviewer-core.min.js:839:143

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Simple load any online video through URL will throw error.

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hi there,

We have a sample video application available here:
https://webviewer-video.web.app/

This sample uses a url of a hosted mp4 file like this:

  const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
  const thumbnail = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/thumbnail.jpg';
  WebViewer.Video.loadDocument(videoUrl, thumbnail);

Please note that at this time, only formats listed here are supported:

You can see the full code snippet when you download our package here:

best regards,
Kevin

1 Like
3

Hey Kevin,

Thanks for your reply with docs. I m following same docs

and there its not loading video with Video Library.

Below is the code I implemented.

loadVideoInWebViewer() {
        WebViewer({
            path: 'assets/lib/webviewer',
            selectAnnotationOnCreation: true,
          },
          this.viewer.nativeElement,
        ).then(async instance => {
          // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
          console.log('WebViewer is ready');

          const {
              loadVideo,
          } = await initializeVideoViewer(
              instance,
              {
                license: '---- Insert commercial license key here after purchase ----',
              }
          );
          console.log('VideoViewer is ready');

          // 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 = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';

          loadVideo(videoUrl, <LoadVideoOptions>{
            fileName: 'video.mp4',
          });
        }).catch(err => console.error(err));
    }

But still its throwing above error which I mention in my issue.

Thanks & regards,
Dgosai

1 Like
4

Thank you for the snippet,

Can you try the code snippet from our samples github here:

This is the specific file for loading the video:

best regards,
Kevin

1 Like
5

I think its working now.

What I am doing wrong is I am using
WebViewer without iFrame and like below

WebViewer({
            path: 'assets/lib/webviewer',
            selectAnnotationOnCreation: true,
          },
          this.viewer.nativeElement,
        ).then(async instance => {

But after adding iFrame its working fine :slight_smile:

WebViewer.Iframe({
            path: 'assets/lib/webviewer',
            selectAnnotationOnCreation: true,
          },
          this.viewer.nativeElement,
        ).then(async instance => {

Thanks for the help and guidance.

1 Like