In This Topic ▼

Playback a Video File - HTML5 JavaScript

This tutorial shows how to create a JavaScript application that uses the VideoViewer to perform playback of a video file.

Overview
Summary	This tutorial covers how to play a video file in a HTML5 JavaScript application.
Completion Time	15 minutes
Visual Studio Project	Download tutorial project (1 KB)
Platform	JS Web Application
IDE	Visual Studio Code - Client
Development License	Download LEADTOOLS
Try it in another language	C#: .NET Framework (WinForms) JavaScript: HTML5 JavaScript

Required Knowledge

The JS LEADTOOLS Multimedia Video Viewer Control contains many advanced features that simplify decoding, processing and playing back media from different sources such as files and network streams by passing them as URI to the player.

Before working on the Playback a Video File - HTML5 JavaScript tutorial, get familiar with the basic steps of creating a project by reviewing the Add References and Set a License - HTML5 JavaScript tutorial.

This tutorial makes use of http-server, a console command for running a static file server. To install http-server first install Node.js and then install http-server.

Create the Project and Add LEADTOOLS References

Create a project folder that contains the following:

index.html file
app.js file
lib folder
LEADTOOLS folder

The references needed depend upon the purpose of the project. This tutorial requires the following JS files:

They can be found here: <INSTALL_DIR>\LEADTOOLS21\Bin\JS

Leadtools.js
Leadtools.Multimedia.js

Make sure to copy both files to the lib folder and to import them in the index.html file.

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
Deployment license. If a Deployment license file and developer key are needed, refer to Obtaining a License.

Note

Adding LEADTOOLS references and setting a license are covered in more detail in the Add References and Set a License - HTML5 JavaScript tutorial.

Write the HTML File

Open your project's index.html file. Add the below code to import the LEADTOOLS dependencies, LEADTOOLS logic, and set the container for the VideoViewer:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <title>Playback a Video File</title> 
 
    <!--Import LEADTOOLS Dependencies--> 
    <script type="text/javascript" src="./lib/Leadtools.js"></script> 
    <script type="text/javascript" src="./lib/Leadtools.Multimedia.js"></script> 
 
    <!--Import Project Dependencies--> 
    <script type="text/javascript" src="./app.js"></script> 
 
   <!--Configure Style for Video Viewer Container-->  
   <style>  
      .container {  
         height: 600px;  
         width: 600px;  
         border: 4px solid black;  
         margin-top: 10px;  
      }  
   </style>  
  </head> 
 
  <body> 
    <!-- DIV with button to load video from URI --> 
    <div> 
       <button id="loadButton">Load Video</button> 
    </div> 
 
    <!-- DIV to use as the container for the LEADTOOLS video viewer --> 
    <div class="container" id="root">  
     
  </body> 
</html>

Write the JS File

Open your app.js file. Input the code below to create the VideoViewer and playback a sample MP4 file using its URI:

window.onload = function () { 
   // Set License 
   var licenseUrl = "./LEADTOOLS/LEADTOOLS.lic.txt"; 
   var developerKey = "REPLACE_WITH_KEY_CONTENTS"; 
   lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function ( 
      setLicenseResult 
   ) { 
      // Check the status of the license 
      if (setLicenseResult.result) { 
         console.log("LEADTOOLS client license set successfully"); 
      } else { 
         var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
         console.log(msg); 
         alert(msg); 
      } 
   }); 
 
   // Create a video viewer control in the root Div element 
   this.videoViewer = new lt.Multimedia.VideoViewer({ root: document.getElementById("root") }); 
 
   // Load a video from URI sample 
   document.getElementById('loadButton').onclick = () => { 
      this.videoViewer.setVideo('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'); 
   } 
};

Run the project

Open the command line console, then cd into the root of the project. Use the following command to run a static file server: http-server

The server should start and run on http:localhost:8080. A message should appear in the console indicating all the ports that the server is available on.

Open your browser and navigate to: http://localhost:8080/index.html

Open your browser and navigate to localhost:8080/index.html

Wrap-up

This tutorial showed how to playback a video file using the VideoViewer object.