# WebViewer Video
[WebViewer](https://docs.apryse.com/documentation/web/guides/) is a powerful JavaScript-based Library that's part of the [PDFTron SDK](https://www.apryse.com). It allows you to view and annotate various file formats (PDF, MS Office, images, videos) on your web app with a fully customizable UI.
This is an addon for WebViewer that allows loading HTML5 videos (.mp4, ogg, webm) so that their video frames can be annotated. For more information, see this [guide](https://docs.apryse.com/documentation/web/get-started/manually-video/).
Let me know how you are planning to use WebViewer Video or if you have any feedback on any feature missing. You can [email me](mailto:andrey@apryse.com) directly.
## Demo
https://webviewer-video.web.app/
## React Sample
Try out the react sample [here](https://github.com/PDFTron/webviewer-video-sample). It shows how to integrate WebViewer and WebViewer-Video with a server component for the saving of annotations.
## Initial setup
Before you begin, make sure your development environment includes [Node.js and npm](https://www.npmjs.com/get-npm).
## Install
```
npm install @pdftron/webviewer-video
```
## How to use
Here is an example of how WebViewer and WebViewer-video could be integrated into your application.
```javascript
import React, { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer } from '@pdftron/webviewer-video';
const App = () => {
const viewer = useRef(null);
useEffect(() => {
WebViewer(
{
path: '/webviewer/lib',
selectAnnotationOnCreation: true,
},
viewer.current,
).then(async instance => {
const license = '---- Insert commercial license key here after purchase ----';
// Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
const {
loadVideo,
} = await initializeVideoViewer(
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')
const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
loadVideo(videoUrl);
});
}, []);
return (
);
}
export default App;
```
Also see the [React sample](https://github.com/PDFTron/webviewer-video-sample), for a complete solution, with further customizations.
### Loading as a Script Tag
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 },
);
...
```
### Builds
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();
}
}
```
### Custom Video Watermark
You can use the WebViewer `setWatermark` API. Please see the guide [here](https://www.pdftron.com/documentation/web/guides/watermarks/).
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](https://docs.apryse.com/api/video/)
## WebViewer APIs
See @pdftron/webviewer [API documentation](https://docs.apryse.com/documentation/web/guides/ui/apis).
## License
WebViewer Video will run in trial mode until a license is provided. For more information on licensing, please visit our [website](https://apryse.com/form/contact-sales).