如何在Angular 2中集成JW Player？新手求助集成方法

Hey there! Since you're new to Angular 2 and looking to integrate JW Player, let's break this down step by step—it's simpler than you might think.

1. Prepare JW Player Resources #

First, grab the JW Player library files (you can get these from the official JW Player site). You'll end up with files like jwplayer.js, jwplayer.flash.swf, and skin-related assets. Move all these into your Angular project's assets folder—this ensures Angular can properly access and load them.

2. Add JW Player Script to index.html #

Open your project's root index.html file, then add the script references either in the <head> tag or at the end of the <body> tag:

<script src="./assets/jwplayer/jwplayer.js"></script>
<script>jwplayer.key = "Your JW Player License Key";</script>

Note: Trial versions might work without a key, but for production use, make sure to use your valid license key to avoid watermarks or restricted features.

3. Create a Reusable JW Player Component #

To fit with Angular's component-based structure, wrap JW Player in a custom component—this makes it easy to reuse across your app. Let's create a VideoPlayerComponent:

First, generate the component using Angular CLI (if you're using it):

ng generate component video-player

Then update the component files:

video-player.component.ts #

import { Component, Input, OnInit, ElementRef, OnDestroy } from '@angular/core';

// Declare the global jwplayer variable to avoid TypeScript errors
declare var jwplayer: any;

@Component({
  selector: 'app-video-player',
  template: `<div #playerContainer></div>`,
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit, OnDestroy {
  @Input() videoUrl: string; // Input to pass the video source URL
  @Input() playerConfig: any; // Input for custom player settings
  private player: any;

  constructor(private elRef: ElementRef) { }

  ngOnInit(): void {
    // Get the container element from the template
    const container = this.elRef.nativeElement.querySelector('#playerContainer');
    // Initialize JW Player with default and custom configs
    this.player = jwplayer(container).setup({
      file: this.videoUrl,
      width: '100%',
      height: 'auto',
      ...this.playerConfig // Merge custom config over defaults
    });
  }

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

4. Use the Player Component in Your App #

Now you can easily add the player to any other component's template. For example, in app.component.html:

<app-video-player 
  [videoUrl]="'https://your-video-host.com/sample-video.mp4'"
  [playerConfig]="{autoplay: false, controls: true, skin: 'vapor'}">
</app-video-player>

5. Common Tips & Troubleshooting #

• TypeScript "jwplayer is not defined" error: The declare var jwplayer: any; line fixes this by telling TypeScript about the global variable. For better type support, you could look for a JW Player TypeScript definition file compatible with Angular 2, but manual declaration works fine for most cases.
• Asset loading issues: Double-check the path to your JW Player files in index.html—if you placed them in assets/jwplayer/, the path should be ./assets/jwplayer/jwplayer.js.
• Flash fallback for older browsers: If you need to support legacy browsers, add the flashplayer property to your setup config:

  flashplayer: './assets/jwplayer/jwplayer.flash.swf'
  

That's it! You should now have a working JW Player in your Angular 2 app. Feel free to tweak the component or config to match your app's needs.

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