Some test text!
Collaborate and review videos frame by frame. WebViewer video allows users to annotate video frames, comment on frames, collaborate and review videos.
Annotations will be tied to specific frames and will only be rendered, when the video is seeked to the specific frames. This guide will show you how to get started with a free trial.
The source code for this project is available in our Git repo.
Clone the repo to a specific directory and then navigate to it:
# command line
git clone https://github.com/PDFTron/webviewer-video-sample.git video
cd video
video
directory and isntall the required dependencies to run the samples by executing:npm install
npm start
npm start-server
http://localhost:3000/
and you will see the sample WebViewer running with a video, similar to above.HTML5 Videos can be loaded into WebViewer with use of the @pdftron/webviewer-video package.
npm install @pdftron/webviewer-video
Below is a sample setup of the video package with webviewer.
initializeVideoViewer
is called to give WebViewer the ability to handle the loading of video files. Afterwards, a video can be loaded with loadVideo
. Lastly, renderControlsToDOM
is called to append player controls to webviewer. It takes an HTML container element in order to place the controls.
import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer, renderControlsToDOM } from '@pdftron/webviewer-video';
WebViewer({
path: '/webviewer/lib',
selectAnnotationOnCreation: true,
disabledElements: [
'searchButton',
'pageNavOverlay',
'viewControlsButton',
'panToolButton',
],
},
viewer.current,
).then(async instance => {
// Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
const {
loadVideo,
} = await initializeVideoViewer(
instance,
'---- Insert commercial license key here after purchase ----',
);
// 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);
instance.docViewer.on('documentLoaded', () => {
const customContainer =
instance.iframeWindow.document.querySelector('.custom-container');
// Inject the video Controls into WebViewer
// Needs to be called after the document is loaded
renderControlsToDOM(instance, customContainer);
});
});
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
});
});
Importing and exporting annotations works the exact same way as it does on WebViewer, with the video annotations having additional the properties start-time
and end-time
.
Make sure your server has byte-range requests enabled to allow video streaming.
@pdftron/webviewer-video
The video npm package
getVideo
A function on a document to retrieve the Video object
Video
A class representing a video.
Get the answers you need: Support
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.
Web
Android
iOS
Windows
Linux
Unlimited usage. No email address required.