Getting error 'loadVideo function is not defined' when integrate 'Webviewer video' with my jQuery application

Technical Support WebViewer
, ,
1

I am trying to integrate your ‘WebViewer Video’ in my Jquery application. I have made some changes in the below as per your documentation (Documentation Index) . Please review it and let me know if I am missing something.

1- I have installed Node.js and NPM
2- Run command ‘npm install’ on cmd at root level of my application
C:\My application>npm install

3- Run command ‘npm install @pdftron/webviewer-video’ like :-

  C:\My application>npm install @pdftron/webviewer-video

4- Since my application is Jquery based and it is not supporting module so I have added scripted tab like :-

   <script src="/js/main.js"></script>
  <script type="text/javascript" src="/js/webviewer.min.js"></script>

5- I have written the code to load video in the web viewer like this :-
WebViewer({

        path: "/PdfTronWebViewer/",
        enableMeasurement: true,
        licenseKey: tempStorage,
        backendType: 'ems'
    }, viewer
).then(async instance => {      
    const license = `---- Insert commercial license key here after purchase ----`;

    const { initializeVideoViewer } = window.WebViewerVideo;
    const videoInstance = initializeVideoViewer(
        instance,
        {
            license,
        },
    ); 

    const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/bunny-short.mp4';

    videoInstance.loadVideo(videoUrl);

     window.addEventListener(

        'documentViewer2Ready',
        () => {
            videoInstance.UI.loadCompareVideoB(videoUrl);
        },
        { once: true },
    );

});

After the above changes When I executed my code then I got the error like ‘loadVideo function is not defined’ at the browser console However your demo application is running perfectly at my env.

So please let me know what am I missing in my application when I am integrating ‘Webviewer video’ code in my application.?

2

Hello,

initializeVideoViewer returns a promise. You just need to await it and then you can access loadVideo in the videoInstance. It should look like this:

const videoInstance = await initializeVideoViewer(
    instance,
    {
        license,
    },
);

Let me know if you have any other issues.

Best regards,
Kristian

3

Thanks for your reply and It’s working fine.
But I am getting one more issue as I want to upload file from my local drive ( C drive)

const videoUrl = ‘C:\Temp\Web’

For this path , Video Viewer is not working as getting error to load file in video player.

What changes should I do to load file from local drive.?

Thanks in advance,
Rahul Y

1 Like