Angular 2+多JS库导入同一对象及Flowplayer播放DASH视频问题

1. Angular 2+ 中将多个JavaScript库导入到同一个对象 #

如果需要把多个独立JS库整合到同一个对象中，通常有两种实用方案：

方案一：手动合并对象 #

先分别导入各个库，再通过Object.assign()或者扩展运算符...将它们合并到一个新对象里：

// 分别导入目标库
import * as utilsLib from './utils';
import * as playerLib from './player';

// 合并到统一对象
const combinedTools = { ...utilsLib, ...playerLib };

// 使用时直接调用合并后的对象方法
combinedTools.formatTime();
combinedTools.playVideo();

⚠️ 注意：如果两个库存在同名方法，后导入的库方法会覆盖前者，建议提前确认方法名是否冲突。

方案二：利用库的挂载特性（若支持） #

部分工具库会提供挂载到指定对象的方法（比如install），你可以创建空对象，让各个库主动挂载上去：

import * as libA from './libA';
import * as libB from './libB';

const combinedLib = {};

// 假设库A、B都支持挂载到指定对象
libA.mount(combinedLib);
libB.mount(combinedLib);

// 现在combinedLib包含两个库的所有方法
combinedLib.processData();
combinedLib.renderUI();

2. 修改Flowplayer代码以支持DASH视频播放 #

你当前的HLS播放代码已经正常运行，要支持DASH格式，只需做以下简单调整：

第一步：确认Flowplayer的DASH支持 #

现代版本的Flowplayer大多内置了DASH播放能力（依赖dash.js），如果你的版本未包含，需要额外安装dashjs包：

npm install dashjs

第二步：修改TS配置代码 #

只需把clip.sources中的type替换为DASH对应的MIME类型，同时把src指向DASH的.mpd文件地址即可，另外注意你代码里的OnInit应该是Angular生命周期钩子ngOnInit：

import * as flowplayer from './flowplayer';
// 如果需要手动关联dashjs，添加这行
import dashjs from 'dashjs';

export class DetailpageComponent implements OnInit {
  ngOnInit() {
    // 若需要手动绑定dashjs，添加这行
    flowplayer.dashjs = dashjs;
    
    flowplayer('#expose>.exposed', {
      clip: {
        sources: [
          {
            type: 'application/dash+xml', // DASH标准MIME类型
            src: url.mpd // 替换为你的DASH视频mpd文件地址
          }
        ]
      }
    });
  }
}

额外提示 #

确保你的服务器已正确配置application/dash+xml的MIME类型，否则可能出现视频加载失败的情况。

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