将媒体源扩展 (MSE) 播放器移植到Vega

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发行说明。

Shaka播放器
Dash.js播放器
HLS.js播放器

以下是将媒体源扩展 (MSE) 播放器移植到Vega的一般准则：

使用Fetch API代替XMLHttpRequest (XHR) 对象。
不要在Fetch API中使用ReadableStream接口，而应使用异步完全读取。
解决有关文档对象模型 (DOM) 依赖项的问题。
必要时实现polyfill。

Shaka播放器

对您的Shaka播放器进行以下修改，以便使用Vega来运行。

对W3CMedia的媒体源API使用polyfill。

示例：

已复制到剪贴板。

global.window.MediaSource=global.MediaSource=MediaSource;
global.HTMLMediaElement=HTMLMediaElement;

使用XMLDOM npm程序包代替DOMParser，并指定用于提取的窗口。

已修改的navigator.userAgent示例：

已复制到剪贴板。

   import{DOMParser}from"xmldom";
   (global as any).navigator.userAgent ="kepler";
   (global as any).window.DOMParser=DOMParser;
   (global as any).window.fetch= fetch;

使用polyfill修改文档对象。创建和销毁Video RN组件时，设置或清除global.gvideo。

示例：

已复制到剪贴板。

class Document {
    createElement = (name: string) => {
        console.log(`document.createElement ${name}`);
        return global.gvideo;
    }
    getElementsByTagName = (name: string) => {
        console.log(`document.getElementsByTagName ${name}`);
        return global.gvideo;
    }
    static install() {
        console.log("安装文档polyfill");
        global.document = new Document();
    }
}

在xml_util.js中禁用Node接口。

示例：

已复制到剪贴板。

-if(child instanceofElement&& child.tagName == name){
+if(child.nodeName == name){

Dash.js播放器

对您的dash.js播放器进行以下修改，以便使用Vega来运行。

在导入任何dash.js模块之前，必须初始化：
已复制到剪贴板。
```
(global as any).dashjs ={};
```

对HTTPLoader.js进行检查时，更改为使用提取而不是XMLHTTPRequest。代码中的一些检查会导致使用XMLHTTPRequest，后者无法下载片段（会下载0字节的片段）。

示例：

已复制到剪贴板。

    if  (/* request.hasOwnProperty('availabilityTimeComplete') && request.availabilityTimeC
           (request.type ===HTTPRequest.MEDIA_SEGMENT_TYPE|| request.type ===HTTPRequ            
              console.log (`dashjs:HTTPLoader: 使用提取加载器`);            
              loader =FetchLoader(context).create({
            .......
    else {            
         console.log(`dashjs:HTTPLoader: 使用XHRLoader加载器`);            
         loader =XHRLoader(context).create({
            .........
         }

HLS.js播放器

对您的HLS.js播放器进行以下修改，以便使用Vega来运行。

将适用于分叉的Shaka播放器的相同polyfill类应用于HLS.js播放器。
对location.href、DOMException和HTMLVideoElement类使用polyfill。
启用hls.js的提取加载器插件。
在提取加载器插件中，禁用onProgress回调（不支持fetch.ReadableStream）。
禁用渐进式配置（不支持fetch.ReadableStream）。
禁用所有字幕配置（不支持CUE API）。
修补SourceBuffer.appendBuffer方法以接受Uint8Array。
禁用worker（不支持工作线程 [后台进程]）。

Last updated: 2025年9月30日