TypeScript Tutorial: Build a Simple Interactive Video Player

Written by

learnmodernjavascript

in

In today’s digital landscape, video content reigns supreme. From educational tutorials to entertaining vlogs, videos are a powerful way to convey information and engage audiences. But have you ever stopped to consider what’s happening behind the scenes when you click that play button? Building your own video player might seem like a complex task, but with TypeScript, it becomes surprisingly accessible. This tutorial will guide you through the process of creating a simple, yet functional, interactive video player, perfect for beginners and intermediate developers looking to expand their skillset. We’ll explore fundamental concepts, write clean and maintainable code, and learn how to handle common video player functionalities.

Why Build a Video Player?

While ready-made video players like those offered by YouTube or Vimeo are readily available, building your own offers several advantages:

  • Customization: You have complete control over the player’s design, features, and behavior.
  • Learning: It’s an excellent way to learn about web development, JavaScript, HTML, and CSS.
  • Control: You can tailor the player to your specific needs and integrate it seamlessly into your website or application.
  • Performance: You can optimize the player for your specific video content and target audience.

Prerequisites

Before diving into the code, make sure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed. You’ll use these to manage your project dependencies and run your code.
  • A code editor like Visual Studio Code, Sublime Text, or Atom.
  • TypeScript installed globally (optional, but recommended): `npm install -g typescript`

Setting Up Your Project

Let’s start by creating a new project directory and initializing it with npm. Open your terminal or command prompt and run the following commands:

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

This will create a new directory called `typescript-video-player`, navigate into it, and initialize a `package.json` file with default settings. Next, let’s install TypeScript and a few other packages we’ll need:

npm install typescript --save-dev
npm install --save-dev @types/node

The `–save-dev` flag indicates that these are development dependencies. We also installed `@types/node` which provides type definitions for Node.js. Now, create a `tsconfig.json` file in your project root. This file tells the TypeScript compiler how to compile your code. You can generate a basic `tsconfig.json` file using the following command:

npx tsc --init --rootDir src --outDir dist --esModuleInterop --module commonjs --target es5

This command creates a `tsconfig.json` file with some common configurations. Here’s a breakdown of the key options:

  • `rootDir`: Specifies the root directory of your TypeScript source files (we’ll use `src`).
  • `outDir`: Specifies the output directory for the compiled JavaScript files (we’ll use `dist`).
  • `esModuleInterop`: Enables interoperability between CommonJS and ES modules.
  • `module`: Sets the module system (we’ll use `commonjs` for compatibility).
  • `target`: Specifies the ECMAScript target version (we’ll use `es5` for broader browser support).

Project Structure

Let’s establish a clear project structure. Create the following directories and files in your project root:

  • src/ – The directory for your TypeScript source code.
  • src/index.ts – The main entry point for your application.
  • dist/ – The directory where the compiled JavaScript files will be placed.
  • index.html – The HTML file that will host your video player.

Writing the HTML

Let’s start by creating the HTML structure for our video player. Open `index.html` and add the following code:

<!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="style.css">
</head>
<body>
    <div class="video-container">
        <video id="myVideo" width="640" height="360">
            <source src="your-video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="controls">
            <button id="playPauseBtn">Play</button>
            <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
            <span id="currentTime">00:00</span>
            <span>/</span>
            <span id="duration">00:00</span>
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

Here’s a breakdown of the HTML:

  • We define a `video` element with an `id` of “myVideo” to display the video. Make sure to replace “your-video.mp4” with the path to your video file.
  • We include a `source` element to specify the video file.
  • We add a `div` with the class “controls” to hold our player controls.
  • We include a “play/pause” button, a volume control slider, and display the current time and duration.
  • We link a stylesheet `style.css` (we’ll create this later).
  • We include the compiled JavaScript file `dist/index.js`.

Adding Basic Styling (CSS)

Let’s add some basic styling to make our video player look presentable. Create a file named `style.css` in your project root and add the following CSS rules:

.video-container {
    width: 640px;
    margin: 20px auto;
    border: 1px solid #ccc;
    overflow: hidden;
}

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

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

#volumeRange {
    width: 150px;
}

This CSS styles the video container, the video itself, and the controls, providing basic layout and appearance.

Writing the TypeScript Code

Now, let’s write the TypeScript code for the video player. Open `src/index.ts` and add the following code:


// Get references to the video element and controls
const video: HTMLVideoElement | null = document.getElementById('myVideo') as HTMLVideoElement;
const playPauseBtn: HTMLButtonElement | null = document.getElementById('playPauseBtn') as HTMLButtonElement;
const volumeRange: HTMLInputElement | null = document.getElementById('volumeRange') as HTMLInputElement;
const currentTimeDisplay: HTMLElement | null = document.getElementById('currentTime');
const durationDisplay: HTMLElement | null = document.getElementById('duration');

// Check if elements exist before proceeding
if (!video || !playPauseBtn || !volumeRange || !currentTimeDisplay || !durationDisplay) {
    console.error('One or more video player elements not found.');
    throw new Error('Video player initialization failed.');
}

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

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

// Function to format time
function formatTime(timeInSeconds: number): string {
    const minutes = Math.floor(timeInSeconds / 60);
    const seconds = Math.floor(timeInSeconds % 60);
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// Function to update current time display
function updateCurrentTime() {
    if (currentTimeDisplay) {
        currentTimeDisplay.textContent = formatTime(video.currentTime);
    }
}

// Function to update duration display
function updateDuration() {
    if (durationDisplay) {
        durationDisplay.textContent = formatTime(video.duration);
    }
}

// Event listeners
playPauseBtn.addEventListener('click', togglePlayPause);
volumeRange.addEventListener('input', updateVolume);
video.addEventListener('timeupdate', updateCurrentTime);
video.addEventListener('loadedmetadata', updateDuration);

// Initial volume setting
updateVolume();

Let’s break down this code:

  • Element Selection: We use `document.getElementById()` to get references to the HTML elements we need to interact with: the video element, the play/pause button, the volume slider, and the time display elements. We use type assertions (`as HTMLVideoElement`, etc.) to tell TypeScript the expected type of each element. We also include null checks to prevent errors if elements aren’t found.
  • `togglePlayPause()` Function: This function handles the play/pause functionality. It checks if the video is paused and either plays or pauses it accordingly, updating the button text.
  • `updateVolume()` Function: This function updates the video’s volume based on the slider’s value.
  • `formatTime()` Function: This utility function formats the time in seconds into a “MM:SS” format.
  • `updateCurrentTime()` Function: This function updates the display of the current playback time.
  • `updateDuration()` Function: This function updates the display of the video’s duration.
  • Event Listeners: We add event listeners to the play/pause button (for clicks), the volume slider (for input changes), the video element for time updates, and for when the video’s metadata has loaded.
  • Initial Volume Setting: We call `updateVolume()` initially to set the video’s volume based on the slider’s default value.

Compiling and Running Your Code

Now that you’ve written the HTML, CSS, and TypeScript code, it’s time to compile and run your video player. In your terminal, run the following command:

tsc

This will compile your TypeScript code into JavaScript and place the compiled JavaScript file (`index.js`) in the `dist` directory. Next, open `index.html` in your web browser. You should see your video player with the basic controls. If you encounter any issues, double-check your code, the file paths, and ensure your video file is accessible.

Adding More Features (Enhancements)

Now that you have a basic working video player, let’s add some additional features to enhance its functionality and user experience. Here are a few examples:

1. Seeking Functionality (Progress Bar)

Add a progress bar that allows users to seek to different points in the video. First, add an input element of type “range” below the volume slider in your `index.html`:

<input type="range" id="progressBar" min="0" max="100" value="0">

Then, add the following code to `src/index.ts`:


const progressBar: HTMLInputElement | null = document.getElementById('progressBar') as HTMLInputElement;

// ... (existing code)

function updateProgressBar() {
    if (progressBar) {
        progressBar.value = String((video.currentTime / video.duration) * 100);
    }
}

function scrub(event: Event) {
    const target = event.target as HTMLInputElement;
    const percent = parseFloat(target.value) / 100;
    video.currentTime = video.duration * percent;
}

video.addEventListener('timeupdate', updateCurrentTime);
video.addEventListener('timeupdate', updateProgressBar);
video.addEventListener('loadedmetadata', updateDuration);
video.addEventListener('loadedmetadata', () => {
    if (progressBar) {
        progressBar.max = '100';
    }
});
progressBar?.addEventListener('input', scrub);

This code adds a progress bar and updates its value based on the current video time. The `scrub` function allows users to seek by clicking on the progress bar.

2. Fullscreen Mode

Implement a fullscreen button. Add a button to your `index.html`:

<button id="fullscreenBtn">Fullscreen</button>

Then, add the following code to `src/index.ts`:


const fullscreenBtn: HTMLButtonElement | null = document.getElementById('fullscreenBtn') as HTMLButtonElement;

// ... (existing code)

function toggleFullscreen() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
        fullscreenBtn.textContent = 'Fullscreen';
    } else {
        video.requestFullscreen();
        fullscreenBtn.textContent = 'Exit Fullscreen';
    }
}

fullscreenBtn?.addEventListener('click', toggleFullscreen);

This code adds a button that toggles fullscreen mode.

3. Error Handling

Handle potential errors, such as the video failing to load. Add the following event listener to `src/index.ts`:


video.addEventListener('error', () => {
    console.error('Video failed to load.');
    // Display an error message to the user
    alert('Video failed to load. Please check the video source.');
});

This code adds an error listener to the video element to catch and handle video loading errors.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect File Paths: Double-check that your file paths in the HTML (e.g., for the video source and the JavaScript file) are correct.
  • Element Selection Errors: Make sure your HTML element IDs match the IDs you’re using in your TypeScript code. Use null checks to prevent errors if elements aren’t found.
  • Type Errors: Use type assertions (`as HTMLVideoElement`, etc.) to tell TypeScript the expected type of your HTML elements.
  • Video Source Issues: Ensure your video file is accessible and that the file path in the `<source>` tag is correct. Also, ensure the video format is supported by the browser.
  • Browser Compatibility: While most modern browsers support HTML5 video, older browsers may not. Consider providing alternative video formats or using a polyfill for wider compatibility.

Key Takeaways

  • You’ve learned the fundamentals of building a video player with TypeScript.
  • You’ve seen how to use HTML, CSS, and TypeScript to create a functional and interactive video player.
  • You’ve gained experience with event listeners, DOM manipulation, and basic video player controls.
  • You understand how to add features like a progress bar, fullscreen mode, and error handling.
  • You now have a solid foundation for building more complex video player features.

FAQ

  1. Can I use this code with different video formats? Yes, you can add multiple `<source>` elements within the `<video>` tag, each with a different `src` and `type` attribute, to support various video formats (e.g., MP4, WebM, Ogg). The browser will automatically choose the first format it can play.
  2. How can I style the video player further? You can customize the appearance of the video player using CSS. You can modify the colors, fonts, and layout of the controls, add custom icons, and create a more visually appealing design.
  3. How do I handle different screen sizes? Use responsive design techniques (e.g., media queries in your CSS) to make the video player adapt to different screen sizes. You can adjust the width, height, and layout of the player based on the screen size.
  4. How can I add captions or subtitles? Use the `<track>` element within the `<video>` tag to add captions or subtitles. You’ll need to provide a WebVTT file (.vtt) containing the captions.
  5. How can I improve performance? Optimize your video file for web playback (e.g., use appropriate video codecs and bitrates). Consider using a Content Delivery Network (CDN) to serve your video files. Lazy load your video player if it’s not immediately visible.

Building a video player is a rewarding project that combines your front-end development skills with the exciting world of video. You’ve now taken your first steps into the world of custom video playback. With the knowledge and code provided, you have a solid foundation to build upon. Experiment, explore, and continue to learn. Add features like custom playlists, different playback speeds, or even integrate it with an API to fetch video data from a service. The possibilities are endless. Keep coding, keep learning, and enjoy the journey of becoming a more proficient developer.

More posts