我遵循可用于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"
width="640"
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相关的内容。
有任何提示吗?非常感谢!
答案 0 :(得分:3)
事实证明,只需添加此内容即可
<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复制到资产文件夹(as referencing from node modules does not work。
<script defer src="assets/mux.min.js"></script>
从angular.json脚本中不幸地引用也不起作用。
答案 1 :(得分:0)
试试这个导入以保持依赖:
import muxjs from 'mux.js';
interface MyWindow extends Window {
muxjs: string;
}
(window as MyWindow & typeof globalThis).muxjs = muxjs;