xgplayer-mp4 1.2.4 → 2.0.2

package/src/media/mse.js

@@ -2,31 +2,53 @@ import EventEmitter from 'event-emitter'
 import Errors from '../error'
 
 class MSE {
-  constructor (codecs = 'video/mp4; codecs="avc1.64001E, mp4a.40.5"') {
-    let self = this
+  constructor (codecs = 'video/mp4; codecs="avc1.64001E, mp4a.40.5"', mediaType) {
     EventEmitter(this)
     this.codecs = codecs
-    this.mediaSource = new window.MediaSource()
+    this.mediaSource = new window.MediaSource(mediaType)
     this.url = window.URL.createObjectURL(this.mediaSource)
     this.queue = []
     this.updating = false
-    this.mediaSource.addEventListener('sourceopen', function () {
-      self.sourceBuffer = self.mediaSource.addSourceBuffer(self.codecs)
-      self.sourceBuffer.addEventListener('error', function (e) {
-        self.emit('error', new Errors('mse', '', {line: 16, handle: '[MSE] constructor sourceopen', msg: e.message}))
-      })
-      self.sourceBuffer.addEventListener('updateend', function (e) {
-        self.emit('updateend')
-        let buffer = self.queue.shift()
-        if (buffer && self.sourceBuffer && !self.sourceBuffer.updating && self.state === 'open') {
-          self.sourceBuffer.appendBuffer(buffer)
-        }
-      })
-      self.emit('sourceopen')
-    })
-    this.mediaSource.addEventListener('sourceclose', function () {
-      self.emit('sourceclose')
-    })
+    this._hasDestroyed = false;
+    this._hasEndOfStream = false;
+    this._hasEndOfStreamSuccess = false;
+    this._onSourceOpen = this._onSourceOpen.bind(this);
+    this._onMediaSourceClose = this._onMediaSourceClose.bind(this);
+    this._onSourceBufferError = this._onSourceBufferError.bind(this);
+    this._onSourceBufferUpdateEnd = this._onSourceBufferUpdateEnd.bind(this);
+    this.mediaSource.addEventListener('sourceopen', this._onSourceOpen);
+    this.mediaSource.addEventListener('sourceclose', this._onMediaSourceClose);
+  }
+
+  _onSourceOpen(){
+    let self = this;
+    self.sourceBuffer = self.mediaSource.addSourceBuffer(self.codecs);
+    self.sourceBuffer.addEventListener('error', this._onSourceBufferError);
+    self.sourceBuffer.addEventListener('updateend', this._onSourceBufferUpdateEnd);
+    self.emit('sourceopen')
+  }
+
+  _onSourceBufferError(e){
+    this.emit('error', new Errors('mse', '', {line: 16, handle: '[MSE] constructor sourceopen', msg: e.message}))
+  }
+
+  _onSourceBufferUpdateEnd(){
+    let self = this;
+    self.emit('updateend');
+    if(this._hasEndOfStream && !this._hasEndOfStreamSuccess){
+      this._endOfStream();
+      return;
+    }
+    let buffer = self.queue.shift()
+    if (buffer && self.sourceBuffer && self.sourceBuffer.updating === false && self.state === 'open') {
+      self.sourceBuffer.appendBuffer(buffer)
+    } else if(buffer) {
+      self.queue.unshift(buffer);
+    }
+  }
+
+  _onMediaSourceClose(){
+    this.emit('sourceclose')
   }
 
   get state () {
@@ -42,6 +64,8 @@ class MSE {
   }
 
   appendBuffer (buffer) {
+    if(!buffer) return;
+    
     let sourceBuffer = this.sourceBuffer
     if (sourceBuffer && !sourceBuffer.updating && this.state === 'open') {
       sourceBuffer.appendBuffer(buffer)
@@ -53,11 +77,26 @@ class MSE {
   }
 
   removeBuffer (start, end) {
-    this.sourceBuffer.remove(start, end)
+    let sourceBuffer = this.sourceBuffer
+    if (sourceBuffer && sourceBuffer.updating === false && this.state === 'open') {
+      sourceBuffer.remove(start, end)
+    }
   }
 
   endOfStream () {
-    if (this.state === 'open') {
+    this._hasEndOfStream = true;
+    if (this.mediaSource.readyState === 'open') {
+      if(this.sourceBuffer && !this.sourceBuffer.updating){
+        this._hasEndOfStreamSuccess = true;
+        this._endOfStream();
+      }
+      
+    }
+  }
+
+  _endOfStream(){
+    this.queue = [];
+    if(this.mediaSource.readyState === 'open'){
       this.mediaSource.endOfStream()
     }
   }
@@ -65,6 +104,22 @@ class MSE {
   static isSupported (codecs) {
     return window.MediaSource && window.MediaSource.isTypeSupported(codecs)
   }
+
+  destroy(){
+    if(this._hasDestroyed){
+      return;
+    }
+    this._hasDestroyed = true;
+    window.URL.revokeObjectURL(this.url);
+    if(this.mediaSource) {
+      this.mediaSource.removeEventListener('sourceclose', this._onMediaSourceClose);
+      this.mediaSource.removeEventListener('sourceopen', this._onSourceOpen);
+    }
+    if(this.sourceBuffer) {
+      this.sourceBuffer.removeEventListener('error', this._onSourceBufferError);
+      this.sourceBuffer.removeEventListener('updateend', this._onSourceBufferUpdateEnd);
+    }
+  }
 }
 
 export default MSE

package/src/media/task.js

@@ -1,25 +1,64 @@
 import EventEmitter from 'event-emitter'
 import Errors from '../error'
+import {CUSTOM_EVENTS, TASK_ERROR, TASK_ERROR_TYPES} from '../constants'
+import getResponseHeaders from '../util/getHeaders';
 
 class Task {
-  constructor (url, range, withCredentials, callback) {
+  constructor (url, range, xhrSetup, callback, ext = {}) {
     EventEmitter(this)
+    window.Task = Task
     this.url = url
     this.range = range
-    this.withCredentials = withCredentials
-    this.id = range.join('-')
-    this.on = false
+    ext.start = range[0]
+    ext.end = range[1]
+    this.uniqueTag = `${this.url}&range=${range[0]}-${range[1]}`
+    this.playerId = ext.playerId;
+    //处理重复分片请求,只拦截同一播放器的相同请求
+    if (Task.queue.some(item => item.url === url && JSON.stringify(item.range) === JSON.stringify(range)  && item.playerId === ext.playerId)) {
+      // console.log('task repeat playerid', ext.playerId)
+      return;
+    }
+    this.xhrSetup = xhrSetup
+    this.id = this.playerId + range.join('-')
+    this.running = false
+    this.canceled = false
+    this.initialize(url, range, callback);
+  }
+  initialize(url, range, callback) {
     let xhr = new window.XMLHttpRequest()
     xhr.target = this
     xhr.responseType = 'arraybuffer'
     xhr.withCredentials = this.withCredentials || false
     xhr.open('get', url)
+    if(typeof this.xhrSetup === 'function') {
+      this.xhrSetup(xhr, url)
+    }
     xhr.setRequestHeader('Range', `bytes=${range[0]}-${range[1]}`)
+    let self = this;
+    xhr.onreadystatechange = function (e) {
+      // HEADERS_RECEIVED
+      if (xhr.readyState === 2) {
+          self.headers = getResponseHeaders(xhr);
+          // self.emit('getHeaders', self.headers);
+          self.status = xhr.status;
+          // self.startDownloadTime = nowTime();
+      }
+      // OPENED
+      if (xhr.readyState === 1) {
+          // self.lastTime = nowTime();
+      }
+    };
     xhr.onload = function () {
       if (xhr.status === 200 || xhr.status === 206) {
         if (callback && callback instanceof Function) {
           callback(xhr.response)
         }
+      } else{
+        if(xhr.status === 403){
+          self.emit(CUSTOM_EVENTS.MEDIA_EXPIRED);
+        }else{
+          self._emitTaskError(TASK_ERROR_TYPES.CODE_ERROR);
+        }
       }
       xhr.target.remove()
     }
@@ -30,12 +69,20 @@ class Task {
     xhr.onabort = function () {
       xhr.target.remove()
     }
-    this.xhr = xhr
-    Task.queue.push(this)
-    this.update()
+    if (!self.canceled) {
+      self.xhr = xhr;
+      Task.queue.push(self);
+    }
+    self.update()
   }
   cancel () {
     this.xhr.abort()
+    this._emitTaskError(TASK_ERROR_TYPES.CANCEL);
+    this.canceled = true;
+  }
+
+  _emitTaskError(code){
+    this.emit(TASK_ERROR, {code , url: this.uniqueTag, readyState: this.xhr.readyState, status: this.xhr.status})
   }
 
   remove () {
@@ -52,8 +99,8 @@ class Task {
 
   update () {
     let Queue = Task.queue
-    let sended = Queue.filter((item) => item.on)
-    let wait = Queue.filter(item => !item.on)
+    let sended = Queue.filter((item) => item.running)
+    let wait = Queue.filter(item => !item.running)
     let max = Task.limit - sended.length
     wait.forEach((item, idx) => {
       if (idx < max) {
@@ -64,25 +111,29 @@ class Task {
 
   run () {
     if (this.xhr.readyState === 1) {
-      this.on = true
+      this.running = true
       this.xhr.send()
     } else {
       this.remove()
     }
   }
 
-  static clear () {
-    Task.queue.forEach(item => {
-      if (item.on) {
-        item.cancel()
+  /***
+   * 同时存在多播放器实例，存在问题
+   */
+  static clear (playerId) {
+    let queue = Task.queue;
+    for(let i = queue.length - 1; i > -1; i--){
+      let item = queue[i];
+      if(item.running && item.playerId === playerId){
+        item.cancel();
       }
-    })
-    Task.queue.length = 0
+      queue.splice(i, 1)
+    }
   }
 }
 
 Task.queue = []
 Task.limit = 2
-window.Task = Task
 
 export default Task