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 6+ (WinForms) C API: C DLL (Windows) HTML5: HTML5 JavaScript, HTML5 React JS

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.

Get familiar with the basic steps of creating a project by reviewing the Add References and Set a License - HTML5 JavaScript tutorial, before working on the Playback a Video File - 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

Start with a copy of the project created in the Add References and Set a License - HTML5 JavaScript tutorial. If you do not have that project, follow the steps in that tutorial.

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

They can be found here: <INSTALL_DIR>\LEADTOOLS23\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.

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--> 
   <link rel="stylesheet" type="text/css" href="app.css" /> 
  </head> 
 
  <body> 
    <div class="main"> 
        <div class="toolbar"> 
            <p>LEADTOOLS - Playback a Video Tutorial</p> 
        </div> 
        <!-- 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"> 
    </div> 
  </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 
    const licenseUrl = "./LEADTOOLS/LEADTOOLS.lic.txt"; 
    const 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 { 
            const 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"); 
    }; 
};

Style the Project

Open the app.css file. Input the code below to improve the visuals of the project.

body { 
    margin: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
 
code { 
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; 
} 
 
.main { 
    background-color: #acacac; 
    font-weight: 700; 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    font-size: calc(10px + 2vmin); 
    color: white; 
    text-align: center; 
    margin: 0; 
} 
 
.toolbar { 
    background-color: #505050; 
    display: flex; 
    width: 100%; 
    position: fixed; 
    padding: 0px 20px; 
    top: 0; 
    left: 0; 
} 
 
.container { 
    background-color: white; 
    align-items: center; 
    height: 720px; 
    width: 1280px; 
    border: 2px solid black; 
    margin-top: 10px; 
}

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, click the Load Video button to load and play the video.

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.