xgplayer 2.30.2-alpha.3 → 2.31.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xgplayer",
-    "version": "2.30.2-alpha.3",
+    "version": "2.31.2",
     "description": "video player",
     "main": "./dist/index.js",
     "typings": "./types/index.d.ts",

package/src/controls/fullscreen.js

@@ -1,12 +1,12 @@
-import { hasClass, addClass, removeClass } from '../utils/util'
+import { hasClass, addClass, removeClass, PresentationMode, checkWebkitSetPresentationMode } from '../utils/util'
 
 let fullscreen = function () {
   let player = this
   let root = player.root
 
   function onFullscreenBtnClick () {
-    if(player.config.rotateFullscreen) {
-      if(hasClass(root, 'xgplayer-rotate-fullscreen')) {
+    if (player.config.rotateFullscreen) {
+      if (hasClass(root, 'xgplayer-rotate-fullscreen')) {
         player.exitRotateFullscreen()
       } else {
         player.getRotateFullscreen()
@@ -30,7 +30,7 @@ let fullscreen = function () {
       removeClass(root, 'xgplayer-is-fullscreen')
       player.emit('exitFullscreen')
     }
-    if(player.danmu && typeof player.danmu.resize === 'function') {
+    if (player.danmu && typeof player.danmu.resize === 'function') {
       player.danmu.resize()
     }
   };
@@ -38,21 +38,37 @@ let fullscreen = function () {
     document.addEventListener(item, onFullscreenChange)
   })
 
-  player.video.addEventListener("webkitbeginfullscreen", function(){
+  player.video.addEventListener('webkitbeginfullscreen', function () {
     addClass(root, 'xgplayer-is-fullscreen')
     player.emit('requestFullscreen')
   })
 
-  player.video.addEventListener("webkitendfullscreen", function(){
+  player.video.addEventListener('webkitendfullscreen', function () {
     removeClass(root, 'xgplayer-is-fullscreen')
     player.emit('exitFullscreen')
   })
 
+  function onWebkitpresentationmodechanged (e) {
+    const mode = player.video.webkitPresentationMode
+    // 非全屏模式 退出全屏
+    if (mode !== PresentationMode.FULLSCREEN) {
+      removeClass(root, 'xgplayer-is-fullscreen')
+      player.emit('exitFullscreen')
+    }
+  }
+
+  checkWebkitSetPresentationMode(player.video) &&
+  player.video.addEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
+
   function onDestroy () {
     player.off('fullscreenBtnClick', onFullscreenBtnClick);
     ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(item => {
       document.removeEventListener(item, onFullscreenChange)
     })
+
+    checkWebkitSetPresentationMode(player.video) &&
+    player.video.removeEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
+
     player.off('destroy', onDestroy)
   }
   player.once('destroy', onDestroy)
@@ -126,4 +142,4 @@ let fullscreen = function () {
 export default {
   name: 'fullscreen',
   method: fullscreen
-}
+}

package/src/controls/pip.js

@@ -1,25 +1,45 @@
+
+import { PresentationMode, checkWebkitSetPresentationMode } from '../utils/util'
+
 let pip = function () {
   let player = this
   function onPipBtnClick () {
     if (player.video !== document.pictureInPictureElement) {
-      player.video.requestPictureInPicture();
+      player.video.requestPictureInPicture()
     } else {
-      document.exitPictureInPicture();
+      document.exitPictureInPicture()
     }
   }
   player.on('pipBtnClick', onPipBtnClick)
 
-  player.video.addEventListener("enterpictureinpicture", function(pipWindow){
+  const onWebkitpresentationmodechanged = (e) => {
+    const mode = player.video.webkitPresentationMode
+    this.pMode = mode
+    if (mode === PresentationMode.PIP) {
+      // 进入pip模式
+      player.emit('requestPictureInPicture', e.pictureInPictureWindow)
+    } else if (mode === PresentationMode.INLINE) {
+      // 退出pip，进去inline模式
+      player.emit('exitPictureInPicture')
+    }
+  }
+
+  player.video.addEventListener('enterpictureinpicture', function (pipWindow) {
     player.emit('requestPictureInPicture', pipWindow)
   })
 
-  player.video.addEventListener("leavepictureinpicture", function(){
+  player.video.addEventListener('leavepictureinpicture', function () {
     player.emit('exitPictureInPicture')
   })
 
+  checkWebkitSetPresentationMode(player.video) &&
+  player.video.addEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
+
   function onDestroy () {
     player.off('pipBtnClick', onPipBtnClick)
     player.off('destroy', onDestroy)
+    checkWebkitSetPresentationMode(player.video) &&
+    player.video.removeEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
   }
   player.once('destroy', onDestroy)
 }
@@ -27,4 +47,4 @@ let pip = function () {
 export default {
   name: 'pip',
   method: pip
-}
+}

package/src/controls/play.js

@@ -1,3 +1,5 @@
+import { hasClass } from '../utils/util'
+
 let play = function () {
   let player = this
 
@@ -5,6 +7,9 @@ let play = function () {
     if (!player.config.allowPlayAfterEnded && player.ended) {
       return
     }
+    if(hasClass(player.root, 'xgplayer-nostart')) {
+      player.start()
+    }
     if (player.paused) {
       let playPromise = player.play()
       if (playPromise !== undefined && playPromise) {

package/src/controls/volume.js

@@ -15,6 +15,9 @@ let volume = function () {
     bar = container.querySelector('.xgplayer-bar')
     selected = container.querySelector('.xgplayer-drag')
     if (sniffer.device === 'mobile') {
+      if(player.volume === 0) {
+        player.video.muted = true
+      }
       onVolumeChange()
     }
   }
@@ -138,7 +141,7 @@ let volume = function () {
         removeClass(root, 'xgplayer-volume-muted')
         removeClass(root, 'xgplayer-volume-small')
         removeClass(root, 'xgplayer-volume-large')
-        if (player.volume === 0) {
+        if (player.volume === 0 || player.muted) {
           addClass(root, 'xgplayer-volume-muted')
         } else if (player.volume < 0.5) {
           addClass(root, 'xgplayer-volume-small')

package/src/player.js

@@ -56,7 +56,7 @@ class Player extends Proxy {
       }
     }
     // this.rootBackup = copyDom(this.root)
-    addClass(this.root, `xgplayer xgplayer-${sniffer.device} xgplayer-nostart ${this.config.controls ? '' : 'xgplayer-no-controls'}`)
+    addClass(this.root, `xgplayer xgplayer-${sniffer.device} xgplayer-nostart xgplayer-pause ${this.config.controls ? '' : 'xgplayer-no-controls'}`)
     this.root.appendChild(this.controls)
     if (this.config.fluid) {
       this.root.style['max-width'] = '100%'

package/src/proxy.js

@@ -87,7 +87,7 @@ class Proxy {
     }
 
     this.ev = ['play', 'playing', 'pause', 'ended', 'error', 'seeking', 'seeked', 'progress', 
-      'timeupdate', 'waiting', 'canplay', 'canplaythrough', 'durationchange', 'volumechange', 'loadedmetadata', 'loadeddata', 'loadstart'
+      'timeupdate', 'waiting', 'canplay', 'canplaythrough', 'durationchange', 'volumechange', 'ratechange', 'loadedmetadata', 'loadeddata', 'loadstart'
     ].map((item) => {
       return {
         [item]: `on${item.charAt(0).toUpperCase()}${item.slice(1)}`

package/src/skin/controls/playbackRate.js

@@ -124,11 +124,15 @@ let s_playbackRate = function () {
   player.switchPlaybackRate = function (playbackRateObj = {}) {
     let liList = player.controls.querySelectorAll('.xgplayer-playbackrate ul li')
     for(let i = 0; i < liList.length; i++) {
-      if(liList[i].getAttribute('cname') === `${playbackRateObj.playbackRate}` || i === playbackRateObj.index) {
+      if(!hasClass(liList[i], 'selected') && (liList[i].getAttribute('cname') === `${playbackRateObj.playbackRate}` || i === playbackRateObj.index)) {
         liList[i].click()
       }
     }
   }
+
+  player.on('ratechange', () => {
+    player.switchPlaybackRate({ playbackRate: player.playbackRate })
+  })
 }
 
 export default {

package/src/utils/util.js

@@ -340,8 +340,19 @@ export function setStyle(elem, name, value) {
   }
 }
 
+export const PresentationMode = {
+  PIP: 'picture-in-picture',
+  INLINE: 'inline',
+  FULLSCREEN: 'fullscreen'
+}
+
+export function checkWebkitSetPresentationMode (video) {
+  return typeof video.webkitSetPresentationMode === 'function'
+}
+
 export const util = {
   createDom, hasClass, addClass, removeClass, toggleClass, findDom, padStart, format, event, typeOf, 
   deepCopy, getBgImage, copyDom, setInterval: _setInterval, clearInterval: _clearInterval, createImgBtn, isWeiXin, isUc, computeWatchDur,
   offInDestroy, on, once, getBuffered2, checkIsBrowser, setStyle
 }
+

package/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "2.30.2-alpha.3"
+  "version": "2.31.2"
 }