fix(xgplayer/player.js,proxy.js,control/progress.js): check and fix b…

…efore publish

packages/xgplayer/src/control/progress.js

@@ -12,16 +12,22 @@ progress = function () {
  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 = []
+ let tnailPicNum = 0
+ let tnailWidth = 0
+ let tnailHeight = 0
+ let tnailCol = 0
+ let tnailRow = 0
+ let interval = 0
+ let tnailUrls = []
  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`
+ 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) {
@@ -81,20 +87,20 @@ progress = function () {
  point.textContent = util.format(now)
  let pointWidth = point.getBoundingClientRect().width
  if (player.config.thumbnail) {
- interval = player.duration / tnail_pic_num
+ interval = player.duration / tnailPicNum
  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
+ 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 - tnail_width ? left : containerWidth - tnail_width
+ left = left < containerWidth - tnailWidth ? left : containerWidth - tnailWidth
  thumbnail.style.left = `${left}px`
- thumbnail.style.top = `${-10 - tnail_height}px`
+ thumbnail.style.top = `${-10 - tnailHeight}px`
  thumbnail.style.display = 'block'
- point.style.left = `${left + tnail_width / 2 - pointWidth / 2}px`
+ point.style.left = `${left + tnailWidth / 2 - pointWidth / 2}px`
  } else {
  let left = e.clientX - containerLeft - pointWidth / 2
  left = left > 0 ? left : 0

packages/xgplayer/src/player.js

@@ -83,6 +83,12 @@ class Player extends Proxy {
  start (url = this.config.url) {
  let root = this.root
  let player = this
+ function autoFunc () {
+ player.video.play().then(() => {
+ // 支持自动播放
+ })
+ player.video.removeEventListener('canplay', autoFunc)
+ }
  if (util.typeOf(url) === 'String') {
  this.video.src = url
  } else {
@@ -94,13 +100,7 @@ class Player extends Proxy {
  })
  }
  if (player.config.autoplay) {
- this.video.addEventListener('canplay', () => {
- player.video.play().then(() => {
- // 支持自动播放
- }).catch(err => {
- // 不支持自动播放
- });
- });
+ this.video.addEventListener('canplay', autoFunc)
  }
  root.insertBefore(this.video, root.firstChild)
  player.userTimer = setTimeout(function () {
@@ -120,6 +120,10 @@ class Player extends Proxy {
 
  destroy () {
  let parentNode = this.root.parentNode
+ for (let k in this._interval) {
+ clearInterval(this._interval[k])
+ this._interval[k] = null
+ }
  this.ev.forEach((item) => {
  let evName = Object.keys(item)[0]
  let evFunc = this[item[evName]]
@@ -134,8 +138,9 @@ class Player extends Proxy {
  this.pause()
  this.once('pause', () => {
  this.emit('destroy')
+ this.root.id = this.root.id + '_del'
+ parentNode.insertBefore(this.rootBackup, this.root)
  parentNode.removeChild(this.root)
- parentNode.appendChild(this.rootBackup)
  for (let k in this) {
  if (k !== 'config') {
  delete this[k]
@@ -144,8 +149,9 @@ class Player extends Proxy {
  })
  } else {
  this.emit('destroy')
+ this.root.id = this.root.id + '_del'
+ parentNode.insertBefore(this.rootBackup, this.root)
  parentNode.removeChild(this.root)
- parentNode.appendChild(this.rootBackup)
  for (let k in this) {
  if (k !== 'config') {
  delete this[k]

packages/xgplayer/src/proxy.js

@@ -68,7 +68,7 @@ class Proxy {
  EventEmitter(this)
 
  this._interval = {}
- this.lastBufferEnd = 0
+ let lastBuffer = '0,0'
  this.ev.forEach(item => {
  let self = this
  let name = Object.keys(item)[0]
@@ -89,19 +89,23 @@ class Proxy {
  self.emit(name, self)
  }
 
- if (['ended', 'error'].indexOf(name) < 0) {
- util.setInterval(self, 'bufferedChange', function () {
- let curBuffer = []
- for (let i = 0, len = self.video.buffered.length; i < len; i++) {
- curBuffer.push([self.video.buffered.start(i), self.video.buffered.end(i)])
+ if (self.hasOwnProperty('_interval')) {
+ if (['ended', 'error', 'timeupdate'].indexOf(name) < 0) {
+ util.setInterval(self, 'bufferedChange', function () {
+ let curBuffer = []
+ for (let i = 0, len = this.video.buffered.length; i < len; i++) {
+ curBuffer.push([this.video.buffered.start(i), this.video.buffered.end(i)])
+ }
+ if (curBuffer.toString() !== lastBuffer) {
+ lastBuffer = curBuffer.toString()
+ this.emit('bufferedChange', curBuffer)
+ }
+ }, 200)
+ } else {
+ if (name !== 'timeupdate') {
+ util.clearInterval(self, 'bufferedChange')
  }
- if (curBuffer.toString() !== this.lastBuffer) {
- this.lastBuffer = curBuffer.toString()
- this.emit('bufferedChange', curBuffer)
- }
- }, 200)
- } else {
- util.clearInterval(self, 'bufferedChange')
+ }
  }
  }, false)
  })