getPlayableUrl(videoSrc) 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

Returns a URL object to the web-compatible video source.

Remarks

This process may require a conversion - causing the video player to wait until the resource is fully available. To ensure that the video is fully converted before setting in the player, refer to getPlayableUrlAsync.

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/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_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/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 | 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 23.0.2024.2.29
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2024 LEAD Technologies, Inc. All Rights Reserved.
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.