VideoViewer Object

Summary

VideoViewer is the main class used by the Leadtools.Multimedia library for HTML5 multimedia viewing.

Syntax

TypeScript
JavaScript
function lt.Multimedia.VideoViewer 
class lt.Multimedia.VideoViewer() 

Example
VideoViewer.ts
Multimedia.ts
VideoViewer.js
Multimedia.js
VideoViewer.html
import { Multimedia_Example } from "../Multimedia"; 
 
export class VideoViewer extends Multimedia_Example { 
 
   public readonly viewer: lt.Multimedia.VideoViewer; 
 
   public constructor() { 
      super(); 
 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.addClickEvents(); 
   } 
 
   public addClickEvents = () => { 
      const load = document.getElementById('load'); 
      load.onclick = () => { 
         this.viewer.setVideo(this.url); 
      } 
   } 
} 
export class Multimedia_Example { 
   public readonly url = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'; 
   public constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Leadtools.Multimedia uses the Document Service for converting 
      // to web-accessible formats. 
      lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000'; 
      lt.Document.DocumentFactory.servicePath = ''; 
      lt.Document.DocumentFactory.serviceApiPath = 'api'; 
   } 
} 
import { Multimedia_Example } from "../Multimedia"; 
 
export class VideoViewer extends Multimedia_Example { 
 
   viewer; 
 
   constructor() { 
      super(); 
 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.addClickEvents(); 
   } 
 
   addClickEvents = () => { 
      const load = document.getElementById('load'); 
      load.onclick = () => { 
         this.viewer.setVideo(this.url); 
      } 
   } 
} 
export class Multimedia_Example { 
   url = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Leadtools.Multimedia uses the Document Service for converting 
      // to web-accessible formats. 
      lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000'; 
      lt.Document.DocumentFactory.servicePath = ''; 
      lt.Document.DocumentFactory.serviceApiPath = 'api'; 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>VideoViewer Example | VideoViewer</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Multimedia.js"></script> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
   <style> 
      .container { 
         height: 800px; 
         width: 600px; 
         border: 4px solid black; 
         margin-top: 10px; 
      } 
   </style> 
</head> 
 
<body> 
   <div> 
      <button type="button" id="load">Load</button> 
   </div> 
 
   <div class="container" id="root"> 
 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.VideoViewer(); 
   }; 
</script> 
 
</html> 

Requirements

Target Platforms

See Also

VideoViewer Members

Leadtools.Multimedia Namespace

Help Version 22.0.2022.12.14
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.