Merge pull request #35 from bytedance/zhangxin/canPlayType

Zhangxin/can play type

packages/xgplayer/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <img src="../../xgplayer.png" width="384" height="96">
+    <img src="https://raw.githubusercontent.com/bytedance/xgplayer/master/xgplayer.png" width="384" height="96">
 </div>
 <div align="center">
     <a href="https://www.npmjs.com/package/xgplayer" target="_blank">
@@ -30,7 +30,7 @@ it can be staged loading for that does not support streaming mp4. This means sea
     $ npm install xgplayer
     ```
 
-2. Usage 
+2. Usage
 
     Step 1:
 
@@ -93,4 +93,3 @@ please visit [http://localhost:9090/examples/index.html](http://localhost:9090/e
 ### License
 
 [MIT](http://opensource.org/licenses/MIT)
-

packages/xgplayer/src/control/definition.js

@@ -31,10 +31,11 @@ let definition = function () {
                 let cursrc = list.filter(item=>{ a.href = item.url; return a.href === src; });
                 tmp.push(`</ul><p class="name"><em>${(cursrc[0] || {name: ''}).name}</em></p>`);
                 let urlInRoot = root.querySelector('.xgplayer-definition');
+                let tipsText = player.config.lang && player.config.lang === "zh-cn" ? "清晰度" : "Quality"
                 if (urlInRoot) {
-                    urlInRoot.innerHTML = '<xg-tips class="xgplayer-tips">清晰度</xg-tips>' + tmp.join('');
+                    urlInRoot.innerHTML = `<xg-tips class="xgplayer-tips">${tipsText}</xg-tips>` + tmp.join('');
                 } else {
-                    ul.innerHTML = '<xg-tips class="xgplayer-tips">清晰度</xg-tips>' + tmp.join('');
+                    ul.innerHTML = `<xg-tips class="xgplayer-tips">${tipsText}</xg-tips>` + tmp.join('');
                     root.appendChild(ul);
                 }
             });
@@ -94,6 +95,18 @@ let definition = function () {
         util.removeClass(ul, 'xgplayer-definition-active');
     });
 
+    ul.addEventListener('mouseenter', (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        let tips = ul.querySelector('.xgplayer-tips');
+        tips.style.left = "50%"
+        let rect = tips.getBoundingClientRect()
+        let rootRect = player.root.getBoundingClientRect()
+        if(rect.right > rootRect.right)  {
+            tips.style.left = `${- rect.right + rootRect.right + 16}px`
+        }
+    });
+
     player.once('destroy', ()=>{
         ul = null;
     });

packages/xgplayer/src/control/fullscreen.js

@@ -10,14 +10,16 @@ let fullscreen = function () {
   let btn = util.createDom('xg-fullscreen', `<xg-icon class="xgplayer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
             <path transform="scale(${scale} ${scale})" d="${iconPath.default}"></path>
         </svg></xg-icon>`, {}, 'xgplayer-fullscreen')
+  let tipsFull = player.config.lang && player.config.lang === "zh-cn" ? "全屏" : "Full screen"
+  let tipsExitFull = player.config.lang && player.config.lang === "zh-cn" ? "退出全屏" : "Exit full screen"
   let root = player.controls; let container = player.root
-  let tips = util.createDom('xg-tips', '全屏', {}, 'xgplayer-tips')
+  let tips = util.createDom('xg-tips', tipsFull, {}, 'xgplayer-tips')
   let path = btn.querySelector('path')
   btn.appendChild(tips)
   let getFullscreen = function (el) {
     let fullscreeSupport = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled
     path.setAttribute('d', iconPath.active)
-    tips.textContent = '退出全屏'
+    tips.textContent = tipsExitFull
     if (fullscreeSupport) {
       if (el.requestFullscreen) {
         el.requestFullscreen()
@@ -37,7 +39,7 @@ let fullscreen = function () {
   let exitFullscreen = function (el) {
     let fullscreeSupport = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled
     path.setAttribute('d', iconPath.default)
-    tips.textContent = '全屏'
+    tips.textContent = tipsFull
     if (fullscreeSupport) {
       if (document.exitFullscreen) {
         document.exitFullscreen()
@@ -70,14 +72,25 @@ let fullscreen = function () {
     if (fullscreenEl && fullscreenEl === container) {
       util.addClass(container, 'xgplayer-is-fullscreen')
       path.setAttribute('d', iconPath.active)
-      tips.textContent = '退出全屏'
+      tips.textContent = tipsExitFull
     } else {
       util.removeClass(container, 'xgplayer-is-fullscreen')
       path.setAttribute('d', iconPath.default)
-      tips.textContent = '全屏'
+      tips.textContent = tipsFull
     }
   };
 
+  btn.addEventListener('mouseenter', (e)=>{
+      e.preventDefault();
+      e.stopPropagation();
+      tips.style.left = "50%"
+      let rect = tips.getBoundingClientRect()
+      let rootRect = container.getBoundingClientRect()
+      if(rect.right > rootRect.right)  {
+          tips.style.left = `${- rect.right + rootRect.right + 16}px`
+      }
+  });
+
   ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(item => {
     document.addEventListener(item, handle)
   })

packages/xgplayer/src/control/mobile.js

@@ -69,7 +69,12 @@ let mobile = function () {
   enter.querySelector('.xgplayer-enter-tips').style.display = 'block'
   player.start()
   if (pass) {
-    enterLogo.src = util.getBgImage(logo)
+    if (player.config.enterLogo) {
+        enterLogo.src = player.config.enterLogo;
+        logo.style.backgroundImage = `url("${player.config.enterLogo}")`
+    } else {
+        enterLogo.src = util.getBgImage(logo);
+    }
     player.video.addEventListener('touchstart', (e) => {
       e.preventDefault()
       player.emit('focus')

packages/xgplayer/src/control/pc.js

@@ -21,7 +21,13 @@ let pc = function () {
   enterLogo.onload = () => {
     enter.querySelector('.xgplayer-enter-tips').style.display = 'block'
   }
-  enterLogo.src = util.getBgImage(logo);
+  if (player.config.enterLogo) {
+      enterLogo.src = player.config.enterLogo;
+      logo.style.backgroundImage = `url("${player.config.enterLogo}")`
+  } else {
+      enterLogo.src = util.getBgImage(logo);
+  }
+
   ['click', 'touchstart'].forEach(item => {
     btn.addEventListener(item, function (e) {
       e.preventDefault()

packages/xgplayer/src/control/play.js

@@ -11,7 +11,9 @@ let play = function () {
   let btn = util.createDom('xg-play', `<xg-icon class="xgplayer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
             <path transform="scale(${scale} ${scale})" d="${iconPath.play}"></path>
         </svg></xg-icon>`)
-  let tips = util.createDom('xg-tips', '播放', {}, 'xgplayer-tips')
+  let tipsPlay = player.config.lang && player.config.lang === "zh-cn" ? "播放" : "Play"
+  let tipsPause = player.config.lang && player.config.lang === "zh-cn" ? "暂停" : "Pause"
+  let tips = util.createDom('xg-tips', tipsPlay, {}, 'xgplayer-tips')
   let path = btn.querySelector('path')
   btn.appendChild(tips)
 
@@ -42,14 +44,14 @@ let play = function () {
   })
 
   player.on('play', () => {
-    tips.textContent = '暂停'
+    tips.textContent = tipsPause
     if (svg.to !== iconPath.pause) {
       svg.reset(iconPath.pause, iconPath.play)
     }
   })
 
   player.on('pause', () => {
-    tips.textContent = '播放'
+    tips.textContent = tipsPlay
     if (svg.to !== iconPath.play) {
       svg.reset(iconPath.play, iconPath.pause)
     }

packages/xgplayer/src/control/playbackRate.js

@@ -15,8 +15,9 @@ let playbackRate = function () {
     } else {
         return false;
     }
+    let tipsSpeed = player.config.lang && player.config.lang === "zh-cn" ? "倍速" : "Speed"
     let ul = util.createDom('xg-playback', '<p class="name"><span>1x</span></p>', {}, 'xgplayer-playback'), root = player.controls;
-    let tips = util.createDom('xg-tips', '倍速', {}, 'xgplayer-tips')
+    let tips = util.createDom('xg-tips', tipsSpeed, {}, 'xgplayer-tips')
     ul.appendChild(tips)
     root.appendChild(ul);
     ['touchstart', 'click'].forEach(item=>{
@@ -32,6 +33,17 @@ let playbackRate = function () {
         }, false);
     });
 
+    ul.addEventListener('mouseenter', (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        tips.style.left = "50%"
+        let rect = tips.getBoundingClientRect()
+        let rootRect = player.root.getBoundingClientRect()
+        if(rect.right > rootRect.right)  {
+            tips.style.left = `${- rect.right + rootRect.right + 16}px`
+        }
+    });
+
     player.once('destroy', ()=>{
         ul = null;
     });

packages/xgplayer/src/control/progress.js

@@ -112,7 +112,7 @@ let progress = function () {
   }, false)
 
   player.on('timeupdate', function () {
-    if (!containerWidth) {
+    if (!containerWidth && container) {
       containerWidth = container.getBoundingClientRect().width
     }
     progress.style.width = `${player.currentTime * 100 / player.duration}%`

packages/xgplayer/src/proxy.js

@@ -67,8 +67,8 @@ self.ended, {
   pause () {
     this.video.pause()
   }
-  canPlayType () {
-    this.video.canPlayType()
+  canPlayType (type) {
+    this.video.canPlayType(type)
   }
   getBufferedRange () {
     let range = [0, 0]; let video = this.video; let buffered = video.buffered

packages/xgplayer/src/style/player.scss

@@ -342,12 +342,15 @@
     display: none;
     cursor: pointer;
     margin-left: 10px;
+    margin-top: 9px;
+    margin-bottom: 11px;
     .xgplayer-tips{
         margin-left: -20px;
     }
     &:hover{
         .xgplayer-tips{
             display: block;
+            top: -40px;
         }
     }
     &.xgplayer-definition-active{
@@ -365,7 +368,7 @@
         background: $definitionUlBgColor;
         border-radius: 1px;
         position: absolute;
-        bottom: 50px;
+        bottom: 30px;
         left: 0;
         text-align: center;
         white-space: nowrap;
@@ -396,13 +399,13 @@
         text-align: center;
         font-family: PingFangSC-Regular;
         font-size: 13px;
-        line-height: 40px;
+        line-height: 20px;
+        height: 20px;
         color: $definitionNameColor;
         em{
             width: 60px;
             height: 20px;
             line-height: 20px;
-            padding: 1px 0px;
             background: $definitionNameBgColor;
             border-radius: 10px;
             display:inline-block;
@@ -421,17 +424,20 @@
     display: block;
     cursor: pointer;
     margin-left: 10px;
+    margin-top: 9px;
+    margin-bottom: 11px;
+    height: 20px;
     .name {
         text-align: center;
         font-family: PingFangSC-Regular;
         font-size: 13px;
-        line-height: 40px;
+        line-height: 20px;
+        height: 20px;
         color: $definitionNameColor;
         span{
             width: 40px;
             height: 20px;
             line-height: 20px;
-            padding: 1px 10px;
             background: $definitionNameBgColor;
             border-radius: 10px;
             display:inline-block;
@@ -441,6 +447,7 @@
     &:hover {
         .xgplayer-tips {
             display: block;
+            top: -40px;
         }
     }
 }
@@ -458,9 +465,6 @@
             display: block;
         }
     }
-    @at-root .xgplayer-is-fullscreen .xgplayer-fullscreen .xgplayer-tips{
-        left: -30%;
-    }
     @at-root .xgplayer.xgplayer-fullscreen-active{
         position: fixed !important;
         left: 0 !important;