angular - Angular 播放器 hls 视频

Question

我想找到一个支持 .m3u8 类型并支持Angular的字幕（srt 或 vtt）的视频播放器。我发现 vimejs 对 .m3u8 类型有很好的支持，但他们不支持 .m3u8 的字幕。所以我必须找到另一个解决方案。那么有没有适合我需求的视频播放器呢？如果您能给我一个示例或现场演示，我们将不胜感激。十分感谢。

Answer 1

实际上像播放器一样使用 JS 库与 Angular 无关。我使用plyr.io没有任何问题。这里还有一个这个库的 Angular 绑定，我没有使用过，但值得一试。这是我如何使用 plyr 的示例

import {AfterViewInit, Component, Input} from '@angular/core';
import * as Plyr from 'plyr';
import {DomSanitizer} from '@angular/platform-browser';
import Hls from 'hls.js';

declare var window: any;

@Component({
  selector: 'video-player-component',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.scss'],
})
export class VideoPlayerComponent implements AfterViewInit {
  @Input() id;
  @Input() url;
  player;
  plyr;

  constructor(public sanitizer: DomSanitizer) {
  }

  ngAfterViewInit(): void {
    const video = document.getElementById('id');
    let addVideo = document.createElement('video');
    video.appendChild(addVideo);
    // For more options see: https://github.com/sampotts/plyr/#options
    const defaultOptions: any = {
      controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
      enabled: true,
      clickToPlay: true,
      ads: {
        enabled: true,
        tagUrl: 'YOUR_URL'
      },
    };

    if (Hls.isSupported()) {
      // For more Hls.js options, see https://github.com/dailymotion/hls.js
      const hls = new Hls();
      hls.attachMedia(addVideo);

      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
        hls.loadSource(this.url);
        hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
          window.hls = hls;
          // Transform available levels into an array of integers (height values).
          const availableQualities = hls.levels.map((l) => l.height);

          defaultOptions.quality = {
            default: availableQualities[availableQualities.length - 1],
            options: availableQualities,
            // this ensures Plyr to use Hls to update quality level
            // Ref: https://github.com/sampotts/plyr/blob/master/src/js/html5.js#L77
            forced: true,
            onChange: (e) => this.updateQuality(e),
          };

          // Initialize new Plyr player with quality options
          this.plyr = new Plyr(addVideo, defaultOptions);
        });
      });
    } else {
      // default options with no quality update in case Hls is not supported
      this.plyr = new Plyr(video, defaultOptions);
    }
  }

  updateQuality(newQuality): void {
    window.hls.levels.forEach((level, levelIndex) => {
      if (level.height === newQuality) {
        window.hls.currentLevel = levelIndex;
      }
    });
  }
}