TypeScript Tutorial: Building a Simple Interactive Web-Based Video Player

Written by

learnmodernjavascript

in

In today’s digital world, video content is king. From educational tutorials to entertaining vlogs, videos have become an essential part of how we consume information and engage with the web. But have you ever wondered how these videos are seamlessly integrated into websites? This tutorial will guide you through building your own simple, yet functional, interactive video player using TypeScript. This hands-on project will not only teach you the fundamentals of video player development but also solidify your understanding of TypeScript concepts.

Why Build a Custom Video Player?

While numerous pre-built video players are available (like those provided by YouTube or Vimeo), building your own offers several advantages:

  • Customization: You have complete control over the player’s look, feel, and functionality. You can tailor it to match your website’s design and branding.
  • Learning: It’s an excellent learning experience, allowing you to understand the underlying principles of video playback and web development.
  • Performance: You can optimize the player for your specific needs, potentially improving performance compared to generic solutions.
  • Control: You’re not reliant on third-party services, giving you more control over the user experience and data privacy.

Prerequisites

Before we dive in, ensure you have the following:

  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these technologies is essential for understanding the code and styling the player.
  • Node.js and npm (or yarn) installed: We’ll use these for setting up our development environment and managing dependencies.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor of your choice.
  • TypeScript installed globally: You can install it using npm: npm install -g typescript
  • A video file: Preferably an MP4 file, for testing purposes. You can use a sample video or download a free one from a site like Pexels or Pixabay.

Setting Up the Project

Let’s create a new project directory and initialize it with npm. Open your terminal and run the following commands:

mkdir video-player-tutorial
cd video-player-tutorial
npm init -y

Next, install TypeScript and create a tsconfig.json file. This file configures the TypeScript compiler.

npm install typescript --save-dev
npx tsc --init --rootDir src --outDir dist --esModuleInterop --module commonjs

This command will create a tsconfig.json file in your project root. Open this file and make the following changes:

  • Uncomment the "outDir": "./dist" line.
  • Uncomment the "rootDir": "./src" line.
  • Change "module": "commonjs" to "module": "esnext"
  • Change "moduleResolution": "node" to "moduleResolution": "bundler"

These settings tell TypeScript where to find your source files (src directory), where to output the compiled JavaScript files (dist directory), and how to handle modules.

Project Structure

Let’s create the following project structure:

video-player-tutorial/
├── src/
│   ├── index.ts
│   └── style.css
├── dist/
├── node_modules/
├── package.json
├── tsconfig.json
└── index.html
  • src/index.ts: This will contain our TypeScript code for the video player.
  • src/style.css: This file will hold the CSS styles for our video player.
  • dist/: This directory will hold the compiled JavaScript and CSS files.
  • index.html: This is the main HTML file that will host our video player.

Creating the HTML Structure

Let’s create the HTML structure for our video player in index.html. This will include the video element, the controls (play/pause, volume, progress bar), and any other elements we need.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Video Player</title>
    <link rel="stylesheet" href="dist/style.css">
</head>
<body>
    <div class="video-container">
        <video id="myVideo">
            <source src="your-video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="controls">
            <button id="playPauseButton">Play</button>
            <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
            <input type="range" id="progressBar" min="0" max="0" value="0">
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

Replace "your-video.mp4" with the path to your video file. This HTML sets up the basic structure:

  • A <video> element to display the video.
  • A <source> element to specify the video file.
  • A <button> to play/pause the video.
  • An <input type="range"> for volume control.
  • An <input type="range"> for the progress bar.

Styling the Video Player (CSS)

Next, let’s add some basic styling to src/style.css to make the video player look presentable.

.video-container {
    width: 80%;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden; /* Ensure controls don't overlap the video */
}

video {
    width: 100%;
    display: block;
}

.controls {
    background-color: #f0f0f0;
    padding: 10px;
    display: flex;
    align-items: center;
}

button {
    margin-right: 10px;
    padding: 5px 10px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 3px;
}

input[type="range"] {
    flex-grow: 1; /* Allow the progress bar to take up the remaining space */
    margin: 0 10px;
}

Writing the TypeScript Code

Now, let’s write the TypeScript code in src/index.ts to handle the video playback and controls. This is where the magic happens!


// Get references to the video element and controls
const video: HTMLVideoElement = document.getElementById('myVideo') as HTMLVideoElement;
const playPauseButton: HTMLButtonElement = document.getElementById('playPauseButton') as HTMLButtonElement;
const volumeRange: HTMLInputElement = document.getElementById('volumeRange') as HTMLInputElement;
const progressBar: HTMLInputElement = document.getElementById('progressBar') as HTMLInputElement;

// Initialize the video player
let isPlaying: boolean = false;

// Function to toggle play/pause
function togglePlayPause() {
    if (isPlaying) {
        video.pause();
        playPauseButton.textContent = 'Play';
    } else {
        video.play();
        playPauseButton.textContent = 'Pause';
    }
    isPlaying = !isPlaying;
}

// Function to update the volume
function updateVolume() {
    video.volume = parseFloat(volumeRange.value);
}

// Function to update the progress bar
function updateProgressBar() {
    const currentTime = video.currentTime;
    const duration = video.duration;
    const progress = (currentTime / duration) * 100;
    progressBar.value = String(currentTime);
    progressBar.max = String(duration);
}

// Function to seek video on progress bar change
function scrub(e: Event) {
    const target = e.target as HTMLInputElement;
    const scrubTime = parseFloat(target.value);
    video.currentTime = scrubTime;
}

// Event listeners
playPauseButton.addEventListener('click', togglePlayPause);
volumeRange.addEventListener('input', updateVolume);
video.addEventListener('timeupdate', updateProgressBar);
progressBar.addEventListener('input', scrub);

// Optional: Add event listeners for video ended
video.addEventListener('ended', () => {
    isPlaying = false;
    playPauseButton.textContent = 'Play';
    progressBar.value = '0';
});

Let’s break down this code:

  • Selecting Elements: We start by selecting the HTML elements we need: the video element, the play/pause button, the volume range input, and the progress bar. We use document.getElementById() and type assertions (as HTMLVideoElement, etc.) to ensure we’re working with the correct element types.
  • Initializing Variables: We declare a isPlaying variable to keep track of the video’s playback state.
  • `togglePlayPause()` Function: This function handles the play/pause functionality. It checks the current state (isPlaying) and either pauses or plays the video accordingly. It also updates the button text to reflect the current state (Play or Pause).
  • `updateVolume()` Function: This function updates the video’s volume based on the value of the volume range input.
  • `updateProgressBar()` Function: This function is responsible for updating the progress bar to reflect the current playback position. It calculates the progress percentage and sets the progress bar’s value accordingly.
  • `scrub()` Function: This function allows the user to click on the progress bar to navigate to a specific point in the video.
  • Event Listeners: We attach event listeners to the relevant elements:
    • The play/pause button listens for a ‘click’ event and calls the togglePlayPause() function.
    • The volume range input listens for an ‘input’ event (when the user changes the volume) and calls the updateVolume() function.
    • The video element listens for a ‘timeupdate’ event (fired repeatedly during video playback) and calls the updateProgressBar() function.
    • The progress bar listens for an ‘input’ event and calls the scrub() function.
    • We optionally add an event listener for the ‘ended’ event to reset the player when the video finishes.

Compiling and Running the Code

Now that we have our code, let’s compile it and run it. Open your terminal and run the following command in the project root:

tsc

This command will compile your TypeScript code into JavaScript and place the output in the dist directory. Next, open index.html in your web browser. You should see the video player with the play/pause button, volume control, and progress bar.

If you encounter any errors, check the browser’s developer console (usually accessed by pressing F12) for error messages. Double-check your code for typos and ensure you have linked the compiled JavaScript file (dist/index.js) in your index.html file.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Ensure the paths to your video file and the compiled JavaScript file in index.html are correct.
  • Type Errors: TypeScript can help catch type errors early on. Carefully review any type errors reported by the compiler.
  • Element Selection Errors: Make sure you have the correct id attributes in your HTML and that you are using document.getElementById() correctly.
  • Video Not Playing: Double-check the video file path and that the video format is supported by your browser.
  • Controls Not Working: Verify that your event listeners are correctly attached and that the functions they call are implemented correctly.
  • Progress Bar Issues: Ensure the progress bar’s min, max, and value attributes are set correctly and that the updateProgressBar() function is calculating the progress accurately.

Enhancements and Further Development

This is a basic video player. Here are some ideas for enhancements:

  • Fullscreen Mode: Add a button to toggle fullscreen mode for a better viewing experience.
  • Playback Speed Control: Allow the user to adjust the playback speed (e.g., 0.5x, 1x, 1.5x, 2x).
  • Chapters/Timestamps: Implement support for chapters or timestamps within the video.
  • Error Handling: Handle video loading errors gracefully.
  • Responsiveness: Make the player responsive to different screen sizes.
  • Custom Controls: Design your own custom controls instead of relying on the default HTML controls.
  • Accessibility: Add ARIA attributes for better accessibility for users with disabilities.
  • Subtitles/Captions: Integrate subtitles or captions.

Key Takeaways

  • TypeScript for Web Development: TypeScript is a valuable tool for building robust and maintainable web applications. It helps catch errors early and improves code readability.
  • Event Listeners: Event listeners are fundamental for creating interactive web applications. They allow you to respond to user actions and other events.
  • DOM Manipulation: Understanding how to select and manipulate elements in the DOM (Document Object Model) is crucial for building dynamic web pages.
  • Video Element: The HTML <video> element provides a powerful way to embed and control video playback in web pages.

FAQ

Q: Why am I getting an error in the browser console that says “Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)”?

A: This error usually means that the JavaScript code is trying to access an HTML element before it has been loaded. Make sure your <script> tag for the JavaScript file is placed at the end of the <body> section of your HTML, right before the closing </body> tag. This ensures that the HTML elements are loaded before the JavaScript attempts to access them.

Q: How can I add a custom video thumbnail?

A: You can add a poster image to your <video> tag. Add the poster attribute to your <video> tag and set its value to the path of your image file:

<video id="myVideo" poster="your-thumbnail.jpg">
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Q: How do I handle different video formats?

A: To support multiple video formats, you can include multiple <source> tags within the <video> tag. The browser will try to play the first supported format it finds:

<video id="myVideo">
    <source src="your-video.mp4" type="video/mp4">
    <source src="your-video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Q: How can I add a “loading” indicator while the video is buffering?

A: You can use the waiting and playing events on the video element. Add a <div> element to your HTML for the loading indicator (e.g., a simple spinner). Then, in your TypeScript code, add event listeners for the waiting and playing events. When the video is waiting, show the loading indicator. When it starts playing, hide the indicator.

Q: How can I style the progress bar?

A: Styling the progress bar can be tricky because the default appearance is browser-dependent. You can use CSS to customize some aspects of the progress bar, such as its background color, height, and thumb appearance. However, full customization often requires using JavaScript and custom elements to create a fully styled progress bar.

Building a video player is a fantastic project for learning TypeScript and web development principles. It provides a practical application of core concepts like event handling, DOM manipulation, and working with HTML elements. As you experiment with the code and add enhancements, you’ll gain a deeper understanding of how web applications work and how to create engaging user experiences. The ability to control the playback, volume, and progress of a video within a custom interface opens a world of possibilities for online content delivery and interaction, from interactive tutorials to dynamic multimedia presentations. Mastering these principles will not only enhance your technical skills but also empower you to create more sophisticated and user-friendly web applications.

More posts