getPlayableUrlAsync(videoSrc,options) Method

Summary

Retrieves a URL for a video source in a format that is web-compatible.

Syntax

TypeScript
JavaScript
getPlayableUrl = function(videoSrc) 
static getPlayableUrl(videoSrc: string): URL; 

Parameters

videoSrc

A promise that will resolve to a URL object containing the web-compatible video source.

options

Options to use when interfacing with the service.

Remarks

This process may require a conversion. Waiting for this method to resolve ensures that by the time the video is set into the player, it is ready to play.

Example
GetPlayableUrl.ts
Multimedia.ts
GetPlayableUrl.js
Multimedia.js
GetPlayableUrl.html
import { Multimedia_Example } from "../Multimedia"; 
 
export class MultimediaFactory_getPlayableUrl extends Multimedia_Example { 
   public readonly viewer: lt.Multimedia.VideoViewer; 
   public readonly loadBtn: HTMLButtonElement; 
   public readonly deleteBtn: HTMLButtonElement; 
 
   public constructor() { 
      super(); 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.loadBtn = document.getElementById('load') as HTMLButtonElement; 
      this.deleteBtn = document.getElementById('delete') as HTMLButtonElement; 
 
      this.addClickEvents(); 
   } 
 
   public addClickEvents = () => { 
      this.loadBtn.onclick = async () => { 
         this.disableButtons(true); 
 
         // 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.getPlayableUrlAsync(this.url, { 
            preFetch: this.onPreFetch 
         }); 
         this.viewer.setVideo(safeUrl.toString()); 
 
         this.disableButtons(false); 
      } 
 
      this.deleteBtn.onclick = async () => { 
         this.disableButtons(true); 
 
         if (this.viewer.video) 
            this.viewer.clear(); 
 
         await lt.Multimedia.MultimediaFactory.deleteCachedVideo(this.url); 
 
         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.loadBtn.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/v200/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_getPlayableUrl extends Multimedia_Example { 
   viewer; 
   loadBtn; 
   deleteBtn; 
 
   constructor() { 
      super(); 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.loadBtn = document.getElementById('load'); 
      this.deleteBtn = document.getElementById('delete'); 
 
      this.addClickEvents(); 
   } 
 
   addClickEvents = () => { 
      this.loadBtn.onclick = async () => { 
         this.disableButtons(true); 
 
         // 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.getPlayableUrlAsync(this.url, { 
            preFetch: this.onPreFetch 
         }); 
         this.viewer.setVideo(safeUrl.toString()); 
 
         this.disableButtons(false); 
      } 
 
      this.deleteBtn.onclick = async () => { 
         this.disableButtons(true); 
 
         if (this.viewer.video) 
            this.viewer.clear(); 
 
         await lt.Multimedia.MultimediaFactory.deleteCachedVideo(this.url); 
 
         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.loadBtn.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/v200/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 | GetPlayableUrl</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> 
      <button type="button" id="delete">Delete</button> 
   </div> 
 
   <div class="container" id="root"> 
 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.MultimediaFactory.GetPlayableUrl(); 
   }; 
</script> 
 
</html> 

Requirements

Target Platforms

See Also

MultimediaFactory Class

MultimediaFactory Members

lt.Multimedia Namespace

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