在 Chrome 上使用 Shaka Player 播放 HLS m3u8

Posted 2023-03-07

【中文标题】在 Chrome 上使用 Shaka Player 播放 HLS m3u8

【英文标题】：Playing HLS m3u8 using Shaka Player on Chrome

【发布时间】：2020-06-26 14:13:02

【问题描述】：

我遵循适用于 DASH 视频的 shaka 的基本用法，但在尝试加载 M3U8 时抛出错误代码 4032。

import * as muxjs from 'mux.js';
import * as shaka from 'shaka-player';

export class AppComponent implements AfterViewInit 
  @ViewChild('videoPlayer') videoElementRef: ElementRef;
  videoElement: htmlVideoElement;

  manifestUri = 'http://hlsliveamdgl7-lh.akamaihd.net/i/hlsdvrlive_1@583042/master.m3u8';


  ngAfterViewInit() 
    shaka.polyfill.installAll();
    this.videoElement = this.videoElementRef.nativeElement;
    this.initPlayer();
  

  private initPlayer() 
    shaka.media.ManifestParser.registerParserByExtension("m3u8", shaka.hls.HlsParser);
    shaka.media.ManifestParser.registerParserByMime("Application/vnd.apple.mpegurl", shaka.hls.HlsParser);
    shaka.media.ManifestParser.registerParserByMime("application/x-mpegURL", shaka.hls.HlsParser);


    let player = new shaka.Player(this.videoElement);


    player.load(this.manifestUri).then(() => 
      // This runs if the asynchronous load is successful.
      console.log('The video has now been loaded!');
    ).catch(this.onError);  // onError is executed if the asynchronous load fails.
  

模板是

  <video #videoPlayer
     id="video"
     
     poster="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"
     controls> </video>

相关的 Angular 9 依赖项是

 "shaka-player": "^3.0.1",

并且还安装了（可能没有必要）

"hls.js": "^0.13.2",
"mux.js": "^5.6.4",

在 Safari 上它可以工作，而不是在 Chrome 上。我想我遗漏了一些与 mux.js 相关的东西。

有什么提示吗？非常感谢！

【参考方案1】：

事实证明，只需添加这个就可以了

<script src="https://github.com/videojs/mux.js/releases/latest/download/mux.js"></script>

到 Angular 的 index.html。导入不起作用。无需进行额外配置。 Shaka 会检测到它并使用它。

但是我想keep the dependency inside the app。我将 js 复制到 assets 文件夹中 (as referencing from node modules does not work.

<script defer src="assets/mux.min.js"></script>

遗憾的是，从 angular.json 脚本中引用也不起作用。

【参考方案2】：

尝试此导入以保持依赖关系：

import muxjs from 'mux.js';

interface MyWindow extends Window 
    muxjs: string;


(window as MyWindow & typeof globalThis).muxjs = muxjs;