Angular 5集成videojs-thumbnails插件报TypeError错误求助

Hey there, let's dig into that frustrating TypeError you're facing when trying to get videojs-thumbnails working in your Angular component. That specific error usually pops up when the plugin tries to interact with parts of the Video.js player that aren't fully ready yet, or when there's a misstep in how you're loading/initializing the plugin. Here's how to fix it step by step:

1. Double-Check Your Dependency Loading Order #

First, make sure you're loading Video.js before the thumbnails plugin in your angular.json (or .angular-cli.json for older Angular versions). If the plugin loads first, it won't be able to attach itself to the Video.js player prototype, leading to weird undefined errors.

Update your scripts array like this:

"scripts": [
  "../node_modules/video.js/dist/video.js",
  "../node_modules/videojs-thumbnails/dist/videojs-thumbnails.js"
]

Don't forget to also add the plugin's CSS to your styles (you mentioned video-js.css, but the thumbnails plugin has its own styles too):

"styles": [
  "../node_modules/video.js/dist/video-js.css",
  "../node_modules/videojs-thumbnails/dist/videojs-thumbnails.css"
]

2. Initialize the Plugin After the Player is Ready #

The biggest culprit here is usually initializing the thumbnails plugin too early—before the Video.js player has finished setting up all its DOM elements (like the progress bar that the plugin interacts with).

Instead of calling the plugin right after creating the player, wait for the player's ready event. Here's a complete component example:

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import * as videojs from 'video.js';

// Extend Video.js types to avoid TypeScript errors
declare module 'video.js' {
  interface Player {
    thumbnails(options: { src: string; times: number[] }): void;
  }
}

@Component({
  selector: 'app-video-thumbnail-player',
  template: `
    <video #videoPlayer class="video-js vjs-big-play-centered" controls preload="auto">
      <source src="your-video-file.mp4" type="video/mp4">
    </video>
  `
})
export class VideoThumbnailPlayerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('videoPlayer') videoElement: ElementRef;
  private player: videojs.Player;

  ngAfterViewInit(): void {
    // Initialize the Video.js player
    this.player = videojs(this.videoElement.nativeElement);

    // Wait for the player to be fully ready before initializing thumbnails
    this.player.ready(() => {
      this.player.thumbnails({
        src: 'your-thumbnail-sprite-image.jpg', // Path to your sprite sheet
        times: [0, 5, 10, 15, 20] // Timestamps (in seconds) for each thumbnail in the sprite
      });
    });
  }

  // Clean up the player when the component is destroyed
  ngOnDestroy(): void {
    if (this.player) {
      this.player.dispose();
    }
  }
}

3. Ditch the Global thumbnails Declaration #

That declare var thumbnails: any; line you added is probably unnecessary (and might be causing confusion). When the videojs-thumbnails plugin loads correctly, it adds a thumbnails method directly to the Video.js Player prototype—so you can call it right on your player instance, like this.player.thumbnails(...).

The TypeScript declaration we added above (declare module 'video.js' {...}) will fix any type errors you might get when calling the method.

Why This Works #

The error Cannot read property 'value' of undefined happens because the plugin's updateThumbnailTime function tries to access a property of a DOM element that doesn't exist yet. By waiting for the player's ready event, you ensure all the player's UI elements (including the progress bar the plugin needs) are fully rendered before the plugin starts interacting with them.

Give these steps a try—this should resolve that TypeError and get your video thumbnails working smoothly in Angular!

内容的提问来源于stack exchange，提问作者Brandon I