feat: 视频支持后台播放

learnOnline/app.json

@@ -58,5 +58,12 @@
     "van-tabs": "@vant/weapp/tabs/index",
     "van-collapse": "@vant/weapp/collapse/index",
     "van-collapse-item": "@vant/weapp/collapse-item/index"
-  }
+  },
+  "plugins": {
+    "tencentvideo": {
+      "version": "2.0.2",
+      "provider": "wxa75efa648b60994b"
+    }
+  },
+  "requiredBackgroundModes": ["audio"]
 }

learnOnline/components/player/audio.js

@@ -5,7 +5,7 @@ Component({
    * 组件的属性列表
    */
   properties: {
-    hasBackgroundAudio: { type: Boolean, defaut: false }
+    hasBackgroundAudio: { type: Boolean, value: false }
   },
 
   /**

learnOnline/components/player/behaviors/video.js

@@ -269,6 +269,14 @@ module.exports = Behavior({
       let isAutoNext = !this.data.isAutoNext
       this.setData({ isAutoNext })
       wx.setStorageSync('isAutoNext', isAutoNext)
+    },
+    // 进入后台音频播放模式
+    onRequestBackgroundPlayback() {
+      this.player.requestBackgroundPlayback()
+    },
+    // 退出后台音频播放模式
+    onExitBackgroundPlayback() {
+      this.player.exitBackgroundPlayback()
     }
   }
 })

learnOnline/components/player/video.js

@@ -6,7 +6,7 @@ Component({
    */
   properties: {
     ppts: { type: Array, value: [] },
-    hasBackgroundAudio: { type: Boolean, defaut: false }
+    hasBackgroundAudio: { type: Boolean, value: true }
   },
 
   /**
@@ -24,6 +24,7 @@ Component({
       this.pause()
       this.data.isFullscreen && this.exitFullScreen()
       this.triggerEvent('switchAudio')
-    }
+    },
+    noop() {}
   }
 })

learnOnline/components/player/video.wxml

@@ -19,6 +19,7 @@
     bindloadedmetadata="onLoadedMetaData"
     bindfullscreenchange="onFullScreenChange"
     binderror="onError"
+    bindtap="toggleControls"
   >
     <!-- 中间播放按钮 -->
     <block wx:if="{{ showCenterPlay }}">
@@ -29,13 +30,13 @@
       </view>
     </block>
     <block wx:else>
-      <view class="cover" bindtap="toggleControls"></view>
+      <!-- <view class="cover" bindtap="toggleControls"></view> -->
       <view class="tips" wx:if="{{ status === 'waiting' }}">
         <!-- 缓冲中 -->
         <view class="loading"></view>
       </view>
       <block wx:if="{{ showControls }}">
-        <view class="toolbar">
+        <view class="toolbar" catchtap="noop">
           <view class="toolbar-inner">
             <!-- 返回 -->
             <image
@@ -44,12 +45,11 @@
               bindtap="back"
               hidden="{{ !isFullscreen }}"
             ></image>
-            <!-- 切换音频 -->
+            <!-- 切换背景音频 -->
             <image
               src="/assets/images/player_audio.png"
               class="toolbar-button toolbar-button__audio"
-              bindtap="switchAudio"
-              hidden="{{ !hasBackgroundAudio }}"
+              bindtap="onRequestBackgroundPlayback"
             ></image>
             <!-- 设置 -->
             <image
@@ -59,7 +59,7 @@
             ></image>
           </view>
         </view>
-        <view class="controls" wx:if="{{ controls }}">
+        <view class="controls" wx:if="{{ controls }}" catchtap="noop">
           <view class="controls-inner">
             <!-- 播放 -->
             <image

learnOnline/pages/course/player.wxml

@@ -5,7 +5,6 @@
       src="{{ videoPlayUrl }}"
       autoplay="{{ autoplay }}"
       bindtimeupdate="onTimeupdate"
-      bindswitchAudio="onSwitchVideo"
       bindended="onEnded"
       wx:if="{{ hasVideo }}"
     ></player-video>
@@ -13,7 +12,6 @@
       id="player"
       src="{{ video.SQ }}"
       bindtimeupdate="onTimeupdate"
-      bindswitchAudio="onSwitchVideo"
       wx:elif="{{ hasAudio }}"
     ></player-audio>
   </view>