添加实验性mse接口

packages/artplayer-plugin-subtitle/src/index.js

@@ -53,9 +53,10 @@ function settingMix(art) {
 function artplayerPluginSubtitle(art) {
     const { clamp } = art.constructor.utils;
     const { setting, notice, refs, i18n } = art;
-    let cuesCache = [];
     i18nMix(i18n);
     setting.add(settingMix);
+    
+    let cuesCache = [];
     art.on('subtitle:switch', () => {
         cuesCache = [];
     });

packages/artplayer/src/index.js

@@ -9,6 +9,7 @@ import config from './config';
 import Template from './template';
 import I18n from './i18n';
 import Player from './player';
+import Mse from './mse';
 import Controls from './controls';
 import Contextmenu from './contextmenu';
 import Info from './info';
@@ -54,6 +55,7 @@ class Artplayer extends Emitter {
             mimeCodec: '',
             theme: '#f00',
             volume: 0.7,
+            mse: false,
             muted: false,
             autoplay: false,
             autoSize: false,
@@ -117,6 +119,7 @@ class Artplayer extends Emitter {
         this.notice = new Notice(this);
         this.events = new Events(this);
         this.player = new Player(this);
+        this.mse = new Mse(this);
         this.layers = new Layers(this);
         this.controls = new Controls(this);
         this.contextmenu = new Contextmenu(this);

packages/artplayer/src/mse/index.js

@@ -0,0 +1,84 @@
+import { errorHandle, getExt } from '../utils';
+import config from '../config';
+
+export default class Mse {
+    constructor(art) {
+        this.art = art;
+        if (art.option.mse) {
+            this.setMimeCodec();
+            this.setVideoSrc();
+            this.eventBind();
+        }
+    }
+
+    setMimeCodec() {
+        const { option } = this.art;
+        if (!option.type) {
+            const type = getExt(option.url);
+            errorHandle(
+                Object.keys(config.mimeCodec).includes(type),
+                `Can't find video's type '${type}' from '${option.url}'`,
+            );
+            option.type = type;
+        }
+
+        if (!option.mimeCodec) {
+            const mimeCodec = config.mimeCodec[option.type];
+            errorHandle(mimeCodec, `Can't find video's mimeCodec from ${option.type}`);
+            option.mimeCodec = mimeCodec;
+        }
+    }
+
+    setVideoSrc() {
+        const { option, player, events } = this.art;
+        errorHandle(
+            'MediaSource' in window && MediaSource.isTypeSupported(option.mimeCodec),
+            `Unsupported MIME type or codec: ${option.mimeCodec}`,
+        );
+        this.mediaSource = new MediaSource();
+        Object.defineProperty(player, 'mountUrl', {
+            value: () => {
+                this.url = URL.createObjectURL(this.mediaSource);
+                events.destroyEvents.push(() => {
+                    URL.revokeObjectURL(this.url);
+                });
+                return this.url;
+            },
+        });
+    }
+
+    eventBind() {
+        const {
+            option,
+            events: { proxy },
+        } = this.art;
+        const { mediaSource, sourceBufferList, sourceBuffer } = config.mse;
+        mediaSource.events.forEach(eventName => {
+            proxy(this.mediaSource, eventName, event => {
+                this.art.emit(`mediaSource:${event.type}`, event);
+            });
+        });
+
+        sourceBufferList.events.forEach(eventName => {
+            proxy(this.mediaSource.sourceBuffers, eventName, event => {
+                this.art.emit(`sourceBuffers:${event.type}`, event);
+            });
+            proxy(this.mediaSource.activeSourceBuffers, eventName, event => {
+                this.art.emit(`activeSourceBuffers:${event.type}`, event);
+            });
+        });
+
+        this.art.on('mediaSource:sourceopen', () => {
+            this.sourceBuffer = this.mediaSource.addSourceBuffer(option.mimeCodec);
+            sourceBuffer.events.forEach(eventName => {
+                proxy(this.sourceBuffer, eventName, event => {
+                    this.art.emit(`sourceBuffer:${event.type}`, event);
+                });
+            });
+        });
+
+        this.art.on('sourceBuffer:updateend', () => {
+            this.mediaSource.endOfStream();
+        });
+    }
+}

packages/artplayer/src/scheme/index.js

@@ -19,6 +19,7 @@ export default {
     mimeCodec: 'string',
     theme: 'string',
     volume: 'number',
+    mse: 'boolean',
     muted: 'boolean',
     autoplay: 'boolean',
     autoSize: 'boolean',