Merge branch 'master' into fuyuhao/feature-logger

# Conflicts:
#	packages/xgplayer-flv/browser/index.js
#	packages/xgplayer-flv/dist/index.js

packages/xgplayer-flv/src/Flv.js

@@ -226,6 +226,8 @@ export default class Flv {
     this.isChangingSrc = false
     this.handleTimeUpdate = () => {}
     this.handleSeeking = () => {}
+    this.flvPlayer.destroy()
+    this._player.pause()
   }
   get isSeekable () {
     return this.flvPlayer.isSeekable

packages/xgplayer-flv/src/index.js

@@ -26,7 +26,8 @@ class FlvPlayer extends Player {
       },
       get: () => {
         return this._options.url
-      }
+      },
+      configurable: true
     })
   }
   init (options) {
@@ -59,9 +60,9 @@ class FlvPlayer extends Player {
   }
 
   start () {
-    const { __flv__ } = this
-    super.start(__flv__.mse.url)
-    this.src = __flv__.mse.url
+    const flvPlayer = this.__flv__
+    super.start(flvPlayer.mse.url)
+    this.src = flvPlayer.mse.url
     return true
   }
 }

packages/xgplayer-flv/src/parse/MainParser.js

@@ -24,7 +24,7 @@ export default class MainParser extends TransCoder {
     this.mp4remuxer = new Mp4Remuxer(this._store)
     this.buffer = new Buffer()
     this.bufferKeyframes = new Set()
-    this.META_CHUNK_SIZE = 2 * Math.pow(10, 5)
+    this.META_CHUNK_SIZE = Math.pow(10, 6)
     this.CHUNK_SIZE = Math.pow(10, 6)
     this.ftyp_moov = null
     this.isSourceOpen = false
@@ -87,7 +87,8 @@ export default class MainParser extends TransCoder {
       return this.loadMetaData(this.range.start, this.range.end).then(Resolver.resolveChunk).catch((e) => {
         console.log(e)
         if (this.err_cnt >= 3) {
-          this._player.emit('error', '加载视频失败')
+          this._player.emit('error', e)
+          this.destroy()
           return
         }
         this.err_cnt += 1
@@ -139,6 +140,7 @@ export default class MainParser extends TransCoder {
       return this._loadSegmentsData(this.range.start, this.range.end).then(resolveChunk).catch(e => {
         if (this.err_cnt >= 3) {
           this._player.emit('error', '加载视频失败')
+          this.destroy()
           return
         }
         this.err_cnt += 1

packages/xgplayer-flv/src/tasks/loaders/FetchLoader.js

@@ -17,7 +17,14 @@ export default class FetchLoader {
 
     this.request = () => {
       this.on = true
-      return window.fetch(url, Object.assign({}, _config, config)).then(res => res.arrayBuffer()).then(buffer => {
+      return window.fetch(url, Object.assign({}, _config, config)).then(res => {
+        if (res.status > 299 || res.status < 200 || !res.ok) {
+          this.complete = true
+          VodTask.remove(this)
+          return Promise.reject(new Error(`url ${res.status} ${res.statusText}`))
+        }
+        return Promise.resolve(res)
+      }).then(res => res.arrayBuffer()).then(buffer => {
         this.complete = true
         this.byteLength = buffer.byteLength
         VodTask.remove(this)
@@ -26,10 +33,6 @@ export default class FetchLoader {
           buffer,
           timeStamp: this.timeStamp
         }
-      }).catch(e => {
-        this.complete = true
-        VodTask.remove(this)
-        return e
       })
     }
   }

packages/xgplayer-hls.js/src/index.js

@@ -43,7 +43,8 @@ class HlsJsPlayer extends Player {
         player.once('canplay', () => {
           player.currentTime = 0
         })
-      }
+      },
+      configurable: true
     })
     this.register()
     this.once('complete', () => {

packages/xgplayer-hls/src/index.js

@@ -43,7 +43,8 @@ const hlsplayer = function () {
         player.once('canplay', () => {
           player.currentTime = 0
         })
-      }
+      },
+      configurable: true
     })
     player.start = function (url = player.config.url) {
       if (!url) { return }

packages/xgplayer-mp4/src/index.js

@@ -122,7 +122,8 @@ let mp4player = function () {
         player.once('canplay', () => {
           player.currentTime = 0
         })
-      }
+      },
+      configurable: true
     })
     player.start = function (url = mainURL) {
       init(url).then((result) => {

packages/xgplayer/src/control/mobile.js

@@ -40,7 +40,7 @@ let mobile = function () {
   let player = this
 
   let util = Player.util; let root = player.root
-  player.config.autoplay = false
+  // player.config.autoplay = false
   let whitelist = player.config.whitelist
   let pass = whitelistPass(whitelist)
   player.mobilePass = pass

packages/xgplayer/src/control/pc.js

@@ -17,15 +17,36 @@ let pc = function () {
   root.appendChild(btn)
   root.appendChild(enter)
   let path = btn.querySelector('path')
+  let enterTips = enter.querySelector('.xgplayer-enter-tips')
   let enterLogo = new Image()
   enterLogo.onload = () => {
-    enter.querySelector('.xgplayer-enter-tips').style.display = 'block'
+    enterTips.style.display = 'block'
   }
-  if (player.config.enterLogo) {
-      enterLogo.src = player.config.enterLogo;
-      logo.style.backgroundImage = `url("${player.config.enterLogo}")`
+  if (player.config.enterLogo && player.config.enterLogo.url && player.config.enterLogo.width && player.config.enterLogo.height) {
+    enterLogo.src = player.config.enterLogo.url
+
+    logo.style.backgroundImage = `url("${player.config.enterLogo.url}")`
+    logo.style.width = `${player.config.enterLogo.width}px`
+    logo.style.height = `${player.config.enterLogo.height}px`
+
+    logo.style.backgroundSize = `${player.config.enterLogo.width}px ${player.config.enterLogo.height}px`
+    logo.style.margin = `-${player.config.enterLogo.height/2}px auto auto -${player.config.enterLogo.width/2}px`
+
+    enterTips.style.margin = `${player.config.enterLogo.height-6}px auto auto -62px`
   } else {
-      enterLogo.src = util.getBgImage(logo);
+    enterLogo.src = util.getBgImage(logo)
+  }
+
+  if (player.config.enterTips && player.config.enterTips.background) {
+    enterTips.style.background = `${player.config.enterTips.background}`
+  }
+
+  if (player.config.enterBg) {
+    if (player.config.enterBg.url) {
+      enter.style.backgroundImage = `url("${player.config.enterBg.url}")`
+    } else if (player.config.enterBg.color) {
+      enter.style.background = player.config.enterBg.color
+    }
   }
 
   ['click', 'touchstart'].forEach(item => {

packages/xgplayer/src/control/progress.js

@@ -1,24 +1,34 @@
 import Player from '../player'
 
-let progress = function () {
-  let player = this; let util = Player.util
-  let container = util.createDom('xg-progress', '<xg-outer class="xgplayer-progress-outer"><xg-cache class="xgplayer-progress-cache"></xg-cache><xg-played class="xgplayer-progress-played"></xgplayer-played><xg-point class="xgplayer-progress-point xgplayer-tips"></xg-point><xg-thumbnail class="xgplayer-progress-thumbnail xgplayer-tips"></xg-thumbnail></xg-outer>', {tabindex: 1}, 'xgplayer-progress'); let root = player.controls; let containerWidth
+let progress
+progress = function () {
+  let player = this
+  let util = Player.util
+  let container = util.createDom('xg-progress', '<xg-outer class="xgplayer-progress-outer"><xg-cache class="xgplayer-progress-cache"></xg-cache><xg-played class="xgplayer-progress-played"></xgplayer-played><xg-point class="xgplayer-progress-point xgplayer-tips"></xg-point><xg-thumbnail class="xgplayer-progress-thumbnail xgplayer-tips"></xg-thumbnail></xg-outer>', {tabindex: 1}, 'xgplayer-progress')
+  let root = player.controls
+  let containerWidth
   root.appendChild(container)
   let progress = container.querySelector('.xgplayer-progress-played')
   let cache = container.querySelector('.xgplayer-progress-cache')
   let point = container.querySelector('.xgplayer-progress-point')
   let thumbnail = container.querySelector('.xgplayer-progress-thumbnail')
-    let tnail_pic_num = 0, tnail_width = 0, tnail_height = 0, tnail_col = 0, tnail_row = 0, interval = 0, tnail_urls = []
-    if (player.config.thumbnail) {
-        tnail_pic_num = player.config.thumbnail.pic_num
-        tnail_width = player.config.thumbnail.width
-        tnail_height = player.config.thumbnail.height
-        tnail_col = player.config.thumbnail.col
-        tnail_row = player.config.thumbnail.row
-        tnail_urls = player.config.thumbnail.urls
-        thumbnail.style.width = `${tnail_width}px`
-        thumbnail.style.height = `${tnail_height}px`
-    }
+  let tnailPicNum = 0
+  let tnailWidth = 0
+  let tnailHeight = 0
+  let tnailCol = 0
+  let tnailRow = 0
+  let interval = 0
+  let tnailUrls = []
+  if (player.config.thumbnail) {
+    tnailPicNum = player.config.thumbnail.pic_num
+    tnailWidth = player.config.thumbnail.width
+    tnailHeight = player.config.thumbnail.height
+    tnailCol = player.config.thumbnail.col
+    tnailRow = player.config.thumbnail.row
+    tnailUrls = player.config.thumbnail.urls
+    thumbnail.style.width = `${tnailWidth}px`
+    thumbnail.style.height = `${tnailHeight}px`
+  }
   ['touchstart', 'mousedown'].forEach(item => {
     container.addEventListener(item, function (e) {
       e.preventDefault()
@@ -29,7 +39,8 @@ let progress = function () {
       }
       container.focus()
       containerWidth = container.getBoundingClientRect().width
-      let {left} = progress.getBoundingClientRect(); let isMove = false
+      let {left} = progress.getBoundingClientRect()
+      let isMove = false
       let move = function (e) {
         e.preventDefault()
         e.stopPropagation()
@@ -66,33 +77,35 @@ let progress = function () {
   })
 
   container.addEventListener('mouseenter', function (e) {
-    if (player.ended) { return false }
+    if (player.ended) {
+      return false
+    }
     let containerLeft = container.getBoundingClientRect().left
     let containerWidth = container.getBoundingClientRect().width
     let compute = function (e) {
       let now = (e.clientX - containerLeft) / containerWidth * player.duration
       point.textContent = util.format(now)
       let pointWidth = point.getBoundingClientRect().width
       if (player.config.thumbnail) {
-          interval = player.duration / tnail_pic_num
-          let index = Math.floor(now / interval)
-          thumbnail.style.backgroundImage = `url(${tnail_urls[Math.ceil((index + 1) / (tnail_col * tnail_row)) - 1]})`
-          let index_in_page = index + 1 - (tnail_col * tnail_row) * (Math.ceil((index + 1) / (tnail_col * tnail_row)) - 1)
-          let tnai_row_index = Math.ceil(index_in_page / tnail_row) - 1
-          let tnai_col_index = index_in_page - tnai_row_index * tnail_row - 1
-          thumbnail.style['background-position'] = `-${tnai_col_index * tnail_width}px -${tnai_row_index * tnail_height}px`
-          let left = e.clientX - containerLeft - tnail_width / 2
-          left = left > 0 ? left : 0
-          left = left < containerWidth - tnail_width ? left : containerWidth - tnail_width
-          thumbnail.style.left = `${left}px`
-          thumbnail.style.top = `${ -10 - tnail_height}px`
-          thumbnail.style.display = 'block'
-          point.style.left = `${left + tnail_width / 2 - pointWidth/2}px`
+        interval = player.duration / tnailPicNum
+        let index = Math.floor(now / interval)
+        thumbnail.style.backgroundImage = `url(${tnailUrls[Math.ceil((index + 1) / (tnailCol * tnailRow)) - 1]})`
+        let indexInPage = index + 1 - (tnailCol * tnailRow) * (Math.ceil((index + 1) / (tnailCol * tnailRow)) - 1)
+        let tnaiRowIndex = Math.ceil(indexInPage / tnailRow) - 1
+        let tnaiColIndex = indexInPage - tnaiRowIndex * tnailRow - 1
+        thumbnail.style['background-position'] = `-${tnaiColIndex * tnailWidth}px -${tnaiRowIndex * tnailHeight}px`
+        let left = e.clientX - containerLeft - tnailWidth / 2
+        left = left > 0 ? left : 0
+        left = left < containerWidth - tnailWidth ? left : containerWidth - tnailWidth
+        thumbnail.style.left = `${left}px`
+        thumbnail.style.top = `${-10 - tnailHeight}px`
+        thumbnail.style.display = 'block'
+        point.style.left = `${left + tnailWidth / 2 - pointWidth / 2}px`
       } else {
-          let left = e.clientX - containerLeft - pointWidth/2
-          left = left > 0 ? left : 0
-          left = left > containerWidth - pointWidth ? containerWidth - pointWidth : left
-          point.style.left = `${left}px`
+        let left = e.clientX - containerLeft - pointWidth / 2
+        left = left > 0 ? left : 0
+        left = left > containerWidth - pointWidth ? containerWidth - pointWidth : left
+        point.style.left = `${left}px`
       }
       point.style.display = 'block'
     }
@@ -110,23 +123,30 @@ let progress = function () {
     container.addEventListener('mouseleave', leave, false)
     compute(e)
   }, false)
-
-  player.on('timeupdate', function () {
+  const handleTimeUpdate = function () {
     if (!containerWidth && container) {
       containerWidth = container.getBoundingClientRect().width
     }
     progress.style.width = `${player.currentTime * 100 / player.duration}%`
-  });
-  ['cacheupdate', 'ended', 'timeupdate'].forEach(item => {
-    player.on(item, function () {
-      let buffered = player.buffered
-      if (buffered && buffered.length > 0) {
-        let end = buffered.end(buffered.length - 1)
-        cache.style.width = `${end / player.duration * 100}%`
-      }
-    })
+  }
+  player.on('timeupdate', handleTimeUpdate)
+
+  const handleCacheUpdate = function () {
+    let buffered = player.buffered
+    if (buffered && buffered.length > 0) {
+      let end = buffered.end(buffered.length - 1)
+      cache.style.width = `${end / player.duration * 100}%`
+    }
+  }
+  const cacheUpdateEvents = ['cacheupdate', 'ended', 'timeupdate']
+  cacheUpdateEvents.forEach(item => {
+    player.on(item, handleCacheUpdate)
   })
   player.once('destroy', () => {
+    cacheUpdateEvents.forEach(item => {
+      player.off(item, handleCacheUpdate)
+    })
+    player.off('timeupdate', handleTimeUpdate)
     container = null
     progress = null
     point = null

packages/xgplayer/src/control/volume.js

@@ -131,7 +131,12 @@ let volume = function () {
   })
 
   let _changeTimer = null
+  let firstVolChanged = 0;
   player.on('volumechange', function () {
+    if (firstVolChanged === 1) {
+      player.video.muted = false
+      firstVolChanged = 2
+    }
     if (_changeTimer) {
       clearTimeout(_changeTimer)
     }
@@ -145,8 +150,18 @@ let volume = function () {
     }, 50)
   })
 
+  player.once('volumechange', function () {
+    if (player.config.autoplay) {
+      firstVolChanged = 1
+    }
+  })
+
   player.once('canplay', function () {
-    player.volume = player.config.volume
+    if (player.config.autoplay) {
+      player.volume = 0
+    } else {
+      player.volume = player.config.volume
+    }
   })
 
   player.once('destroy', () => {