Angular 5中VideoJS无法播放问题求助（附相关代码）

Hey there! Let's work through why your VideoJS player isn't playing in Angular 5. I've tackled similar issues before, so let's break down the fixes step by step:

1. 先修正最明显的ID不匹配问题 #

Looking at your code, your HTML video element has a static id="video", but your TypeScript is trying to target an element with video_ + this.idx. That means VideoJS can't find the DOM element to initialize the player—no wonder it's not working!

Fix: Update your HTML to use a dynamic ID that matches your TS logic:

<video *ngIf="url" [id]="'video_' + idx" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto">
  <source [src]="url" type="application/x-mpegURL" />
</video>

2. 确保依赖安装完整 #

You need to make sure you have all required packages installed, especially since you're using HLS streaming (application/x-mpegURL):

# Install core VideoJS and HLS support
npm install video.js hls.js --save
# Install type definitions for Angular type checking
npm install @types/video.js @types/hls.js --save-dev

3. 完整的播放器初始化逻辑 #

Your TS code looks incomplete—here's a full, robust implementation that handles initialization, dynamic sources, and cleanup to avoid memory leaks:

import { Component, Input, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
import videojs from 'video.js';
import 'videojs-contrib-hls'; // Critical for HLS streaming support

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html'
})
export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
  @Input() idx: string;
  @Input() url: any;
  private player: videojs.Player;

  constructor(private _elementRef: ElementRef) { }

  ngAfterViewInit() {
    // Wait for DOM to render (thanks to *ngIf="url") and grab the video element
    const videoElement = this._elementRef.nativeElement.querySelector(`#video_${this.idx}`);
    
    if (videoElement) {
      // Initialize VideoJS with basic config
      this.player = videojs(videoElement, {
        controls: true,
        preload: 'auto',
        fluid: true // Optional: makes player responsive to container size
      });

      // Set the video source directly (redundant with <source> but adds reliability)
      this.player.src({
        src: this.url,
        type: 'application/x-mpegURL'
      });
    }
  }

  ngOnDestroy() {
    // Clean up the player when component is destroyed to prevent memory leaks
    if (this.player) {
      this.player.dispose();
    }
  }
}

4. Don't forget the VideoJS styles #

Without the CSS, your player will look broken and might not function properly. Add the styles globally in one of two ways:

Option 1: Add to angular.json
Find the styles array in your angular.json file and add:

"styles": [
  "node_modules/video.js/dist/video-js.min.css",
  // Your other global styles
]

Option 2: Import in styles.css
Add this line to your root styles.css/scss file:

@import '~video.js/dist/video-js.min.css';

5. Troubleshoot HLS-specific issues #

Since you're using an HLS stream, double-check these:

• Verify your url is a valid HLS stream: Try opening it directly in your browser to see if it loads.
• Check for CORS errors: If the video host is on a different domain, make sure their server allows cross-origin requests from your Angular app.

Once you've worked through these steps, restart your Angular app, make sure idx has a valid value, and your url points to a working HLS stream—your player should start playing!

内容的提问来源于stack exchange，提问作者Paul Cheriyan