Merge pull request bytedance#54 from bytedance/zhangxin

Zhangxin
menghuan · Aug 9, 2018 · 7efd28e · 7efd28e
2 parents 507198e + 9de8edb
commit 7efd28e
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 9 deletions.
diff --git a/packages/xgplayer/browser/index.js b/packages/xgplayer/browser/index.js
diff --git a/packages/xgplayer/dist/index.js b/packages/xgplayer/dist/index.js
diff --git a/packages/xgplayer/src/control/mobile.js b/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

diff --git a/packages/xgplayer/src/control/pc.js b/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 => {

diff --git a/packages/xgplayer/src/control/volume.js b/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', () => {

diff --git a/packages/xgplayer/src/player.js b/packages/xgplayer/src/player.js
@@ -93,6 +93,15 @@ class Player extends Proxy {
         }))
       })
     }
+    if (player.config.autoplay) {
+      this.video.addEventListener('canplay', () => {
+        player.video.play().then(() => {
+          // 支持自动播放
+        }).catch(err => {
+          // 不支持自动播放
+        });
+      });
+    }
     root.insertBefore(this.video, root.firstChild)
     player.userTimer = setTimeout(function () {
       player.emit('blur')

diff --git a/packages/xgplayer/src/proxy.js b/packages/xgplayer/src/proxy.js
@@ -54,6 +54,10 @@ class Proxy {
       }
     }
     this.video = util.createDom(videoConfig.mediaType, textTrackDom, videoConfig, '')
+    if (options.autoplay) {
+      this.video.autoplay = true
+      this.video.muted = true
+    }
     this.ev = ['play', 'playing', 'pause', 'ended', 'error', 'seeking', 'seeked',
       'timeupdate', 'waiting', 'canplay', 'canplaythrough', 'durationchange', 'volumechange', 'loadeddata'
     ].map((item) => {
@@ -63,6 +67,8 @@ class Proxy {
     })
     EventEmitter(this)
 
+    this._interval = {}
+    this.lastBufferEnd = 0
     this.ev.forEach(item => {
       let self = this
       let name = Object.keys(item)[0]
@@ -82,6 +88,21 @@ class Proxy {
         } else {
           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 (curBuffer.toString() !== this.lastBuffer) {
+              this.lastBuffer = curBuffer.toString()
+              this.emit('bufferedChange', curBuffer)
+            }
+          }, 200)
+        } else {
+          util.clearInterval(self, 'bufferedChange')
+        }
       }, false)
     })
   }

diff --git a/packages/xgplayer/src/utils/util.js b/packages/xgplayer/src/utils/util.js
@@ -135,4 +135,15 @@ util.copyDom = function (dom) {
   }
 }
 
+util.setInterval = function (context, eventName, intervalFunc, frequency) {
+  if (!context._interval[eventName]) {
+    context._interval[eventName] = setInterval(intervalFunc.bind(context), frequency)
+  }
+}
+
+util.clearInterval = function (context, eventName) {
+  clearInterval(context._interval[eventName])
+  context._interval[eventName] = null
+}
+
 export default util