export default App;
`

Also see the React sample, for a complete solution, with further customizations.

$3

If your environment can not import WebViewer Video from the module, you can instead include WebViewer Video as a script tag. Simply, take the file node_modules/@pdftron/webviewer-video/dist/main.js and add it to your project's html page. WebViewer Video requires the react library, so include that as well.

`html

...






`

This will add the object WebViewerVideo to the window. This object contains initializeVideoViewer. So the previous code can be changed to:

`javascript
...
const license = '---- Insert commercial license key here after purchase ----';
const {
loadVideo,
} = await window.WebViewerVideo.initializeVideoViewer(
instance,
{ license },
);
...
`

$3

Webviewer Video comes with two builds. The default build does not include React and React-DOM in the bundle and both must be provided by the parent code. The other build includes React and React-DOM in the bundle. See the AngularJS example below on how to load the build that includes React.

`javascript
import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';
import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
import { initializeVideoViewer } from '@pdftron/webviewer-video/dist/main-with-react';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('viewer') viewer: ElementRef;
wvInstance: WebViewerInstance;
@Output() coreControlsEvent:EventEmitter = new EventEmitter();

private documentLoaded$: Subject;

constructor() {
this.documentLoaded$ = new Subject();
}

ngAfterViewInit(): void {

WebViewer({
path: '../lib',
}, this.viewer.nativeElement).then(async instance => {
const license = ---- Insert commercial license key here after purchase ----;
const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';

this.wvInstance = instance;

const videoInstance = await initializeVideoViewer(
// @ts-ignore
instance,
{
license,
}
);

// 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')
videoInstance.loadVideo(videoUrl);
})
}

ngOnInit() {
}

getDocumentLoadedObservable() {
return this.documentLoaded$.asObservable();
}
}
`

$3

You can use the WebViewer setWatermark API. Please see the guide here.

Option shouldDrawOverAnnotations must be passed in when setting the watermark, in order to show up on the video canvas.

`javascript
const { documentViewer } = instance.Core;

documentViewer.setWatermark({
shouldDrawOverAnnotations: true, // Enable watermarks for video
// Draw diagonal watermark in middle of the document
diagonal: {
fontSize: 25, // or even smaller size
fontFamily: 'sans-serif',
color: 'red',
opacity: 50, // from 0 to 100
text: 'Test Watermark'
},
// Draw header watermark
header: {
fontSize: 10,
fontFamily: 'sans-serif',
color: 'red',
opacity: 70,
left: 'left watermark',
center: 'center watermark',
right: ''
}
});
``

Documentation

API documentation

WebViewer APIs

See @pdftron/webviewer API documentation.

License

WebViewer Video will run in trial mode until a license is provided. For more information on licensing, please visit our website.