convertVideo(video,options) Method

Summary

Converts an uploaded video resource to a web-compatible URL.

Syntax

TypeScript
JavaScript
convertVideo = function(video, options) 
convertVideo(video: File | Blob, options?: ConvertVideoOptions): Promise<URL>; 

Parameters

video

The file or blob object to be uploaded.

options

The options to use when converting the resource.

Remarks

Returns a URL to the playable resource of the format http://service/api/Multimedia/GetVideo?url=cacheRegion. The cached url can be retrieved from the query parameters.

Example
ConvertVideo.ts
Multimedia.ts
ConvertVideo.js
Multimedia.js
ConvertVideo.html
import { Multimedia_Example } from "../Multimedia"; 
 
export class MultimediaFactory_convertVideo extends Multimedia_Example { 
   public readonly viewer: lt.Multimedia.VideoViewer; 
   public readonly loadInput: HTMLInputElement; 
   public readonly deleteBtn: HTMLButtonElement; 
   private cacheUrl: string; 
 
   public constructor() { 
      super(); 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.loadInput = document.getElementById('load') as HTMLInputElement; 
      this.deleteBtn = document.getElementById('delete') as HTMLButtonElement; 
      this.cacheUrl = ''; 
      this.addClickEvents(); 
   } 
 
   public addClickEvents = () => { 
      this.loadInput.onchange = async (e: any) => { 
         const file = e.target.files[0]; 
         if (!file) 
            return; 
 
         this.disableButtons(true); 
 
         const options = new lt.Multimedia.ConvertVideoOptions(); 
         options.preFetch = this.onPreFetch; 
 
         // The requested video resource may require a conversion. Just calling 
         // MultimediaFactory.getPlayableUrl will cause the video player to wait until 
         // the resource is done converting.  This could take some time depending on the file size. 
         // The async version will only resolve once the resource is fully available on the service. 
         const safeUrl: URL = await lt.Multimedia.MultimediaFactory.convertVideo(file, options); 
 
         // safeUrl will contain a URL to the cached web-safe video. 
         // This resource is set to auto-expire, but if we wanted to manage the life-cycle ourself, 
         // we need the cache url to pass to deleteCachedVideo.  We can get this by just grabbing 
         // it from the query string. 
         this.cacheUrl = safeUrl.searchParams.get('url'); 
 
         this.viewer.setVideo(safeUrl.toString()); 
 
         this.disableButtons(false); 
      } 
 
      this.deleteBtn.onclick = async () => { 
         if (!this.cacheUrl) 
            return; 
 
         this.disableButtons(true); 
 
         if (this.viewer.video) 
            this.viewer.clear(); 
 
         await lt.Multimedia.MultimediaFactory.deleteCachedVideo(this.cacheUrl); 
 
         this.disableButtons(false); 
      } 
   } 
 
   public onPreFetch = (options: RequestInit) => { 
      // This callback will fire before any requests are made 
      // You are able to modify the options data before the toolkit executes the request 
      console.log('Pre Fetch!'); 
   } 
 
   private disableButtons(toggle: boolean) { 
      this.loadInput.disabled = toggle; 
      this.deleteBtn.disabled = toggle; 
   } 
} 
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 MultimediaFactory_convertVideo extends Multimedia_Example { 
   viewer; 
   loadInput; 
   deleteBtn; 
   cacheUrl; 
 
   constructor() { 
      super(); 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.loadInput = document.getElementById('load'); 
      this.deleteBtn = document.getElementById('delete'); 
      this.cacheUrl = ''; 
      this.addClickEvents(); 
   } 
 
   addClickEvents = () => { 
      this.loadInput.onchange = async (e) => { 
         const file = e.target.files[0]; 
         if (!file) 
            return; 
 
         this.disableButtons(true); 
 
         const options = new lt.Multimedia.ConvertVideoOptions(); 
         options.preFetch = this.onPreFetch; 
 
         // The requested video resource may require a conversion. Just calling 
         // MultimediaFactory.getPlayableUrl will cause the video player to wait until 
         // the resource is done converting.  This could take some time depending on the file size. 
         // The async version will only resolve once the resource is fully available on the service. 
         const safeUrl = await lt.Multimedia.MultimediaFactory.convertVideo(file, options); 
 
         // safeUrl will contain a URL to the cached web-safe video. 
         // This resource is set to auto-expire, but if we wanted to manage the life-cycle ourself, 
         // we need the cache url to pass to deleteCachedVideo.  We can get this by just grabbing 
         // it from the query string. 
         this.cacheUrl = safeUrl.searchParams.get('url'); 
 
         this.viewer.setVideo(safeUrl.toString()); 
 
         this.disableButtons(false); 
      } 
 
      this.deleteBtn.onclick = async () => { 
         if (!this.cacheUrl) 
            return; 
 
         this.disableButtons(true); 
 
         if (this.viewer.video) 
            this.viewer.clear(); 
 
         await lt.Multimedia.MultimediaFactory.deleteCachedVideo(this.cacheUrl); 
 
         this.disableButtons(false); 
      } 
   } 
 
   onPreFetch = (options) => { 
      // This callback will fire before any requests are made 
      // You are able to modify the options data before the toolkit executes the request 
      console.log('Pre Fetch!'); 
   } 
 
   disableButtons(toggle) { 
      this.loadInput.disabled = toggle; 
      this.deleteBtn.disabled = toggle; 
   } 
} 
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>MultimediaFactory Example | ConvertVideo</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> 
      <input id="load" type="file"> 
      <button type="button" id="delete">Delete</button> 
   </div> 
 
   <div class="container" id="root"> 
 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.MultimediaFactory.ConvertVideo(); 
   }; 
</script> 
 
</html> 

Requirements

Target Platforms

See Also

MultimediaFactory Class

MultimediaFactory Members

lt.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.