feat:视频播放增加跳过片头和自动连播功能

learnOnline/components/player/behaviors/video.js

@@ -9,7 +9,7 @@ module.exports = Behavior({
   properties: {
     src: { type: String },
     controls: { type: Boolean, value: true }, // 控制栏
-    autoplay: { type: Boolean, value: false }, // 自动播放
+    autoplay: { type: Boolean, value: true }, // 自动播放
     loop: { type: Boolean, value: false }, // 循环播放
     muted: { type: Boolean, value: false }, // 静音
     startTime: { type: Number, value: 0 }, // 初始播放时间
@@ -29,7 +29,11 @@ module.exports = Behavior({
     showControls: true,
     showCenterPlay: true,
     playbackRateList: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0],
-    playbackRateVisible: false
+    playbackRateVisible: false,
+    setVisible: false,
+    skipTime: 5, // 片头时间
+    isSkip: true, // 跳过片头
+    isAutoNext: true // 自动连播
   },
   observers: {
     src() {
@@ -65,6 +69,10 @@ module.exports = Behavior({
    *  */
   lifetimes: {
     attached() {
+      const isSkip = wx.getStorageSync('isSkip') ? true : false
+      const isAutoNext = wx.getStorageSync('isAutoNext') ? true : false
+      this.setData({ isSkip, isAutoNext })
+
       this.createPlayer()
       // wx.onNetworkStatusChange(res => {
       //   if (res.networkType !== 'wifi' && this.data.status === 'playing') {
@@ -155,7 +163,7 @@ module.exports = Behavior({
     // 监听播放结束
     onEnded(e) {
       this.updateStatus('ended')
-      this.triggerEvent('ended')
+      this.triggerEvent('ended', this.data.isAutoNext)
       this.data.showCenterPlayBtn && this.setData({ showCenterPlay: true })
       // 全屏中退出全屏
       this.data.isFullscreen && this.exitFullScreen()
@@ -187,7 +195,14 @@ module.exports = Behavior({
     onLoadedMetaData(e) {
       const { duration } = e.detail
       this.setData({ duration })
-      console.log('video', 'onloadedmetadata')
+      console.log('video', 'onloadedmetadata', duration)
+      if (this.data.startTime && this.data.startTime < Math.floor(duration)) {
+        console.log('seek', this.data.startTime)
+        this.seek(this.data.startTime)
+      } else if (this.data.isSkip) {
+        console.log('skip', this.data.skipTime)
+        this.seek(this.data.skipTime)
+      }
     },
     onFullScreenChange() {
       this.triggerEvent('fullscreenchange')
@@ -234,6 +249,26 @@ module.exports = Behavior({
       const { rate } = e.currentTarget.dataset
       this.setData({ playbackRate: rate, playbackRateVisible: false })
       this.playbackRate(rate)
+    },
+    // 显示设置
+    showSet() {
+      this.setData({ showControls: false, setVisible: true })
+    },
+    toggleSet() {
+      let setVisible = !this.data.setVisible
+      this.setData({ setVisible })
+    },
+    // 跳过片头
+    onChangeSkip(e) {
+      let isSkip = !this.data.isSkip
+      this.setData({ isSkip })
+      wx.setStorageSync('isSkip', isSkip)
+    },
+    // 自动连播
+    onChangeAutoNext(e) {
+      let isAutoNext = !this.data.isAutoNext
+      this.setData({ isAutoNext })
+      wx.setStorageSync('isAutoNext', isAutoNext)
     }
   }
 })

learnOnline/components/player/video.wxml

@@ -51,6 +51,12 @@
               bindtap="switchAudio"
               hidden="{{ !hasBackgroundAudio }}"
             ></image>
+            <!-- 设置 -->
+            <image
+              src="/assets/images/dots-vertical.png"
+              class="toolbar-button toolbar-button__set"
+              bindtap="showSet"
+            ></image>
           </view>
         </view>
         <view class="controls" wx:if="{{ controls }}">
@@ -135,6 +141,12 @@
           </block>
         </view>
       </view>
+      <view class="set" hidden="{{ !setVisible }}" bindtap="toggleSet">
+        <view class="set-list">
+          <view class="set-item {{ isSkip ? 'is-active' : '' }}" catchtap="onChangeSkip">跳过片头</view>
+          <view class="set-item {{ isAutoNext ? 'is-active' : '' }}" catchtap="onChangeAutoNext">自动连播</view>
+        </view>
+      </view>
     </block>
 
     <slot></slot>

learnOnline/components/player/video.wxss

@@ -54,6 +54,11 @@
   width: 36rpx;
   height: 30rpx;
 }
+.toolbar-button__set {
+  width: 40rpx;
+  height: 40rpx;
+  padding: 30rpx;
+}
 .controls {
   position: absolute;
   left: 0;
@@ -238,3 +243,39 @@
 .rate-item.is-active {
   color: #f47885;
 }
+
+.set {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+}
+.set-list {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+  width: 300rpx;
+}
+.is-fullscreen .set-list {
+  padding-right: env(safe-area-inset-bottom);
+  background-color: #000;
+}
+.set-item {
+  font-size: 30rpx;
+  line-height: 54rpx;
+  color: #fff;
+  text-align: center;
+}
+.is-fullscreen .set-item {
+  padding: 10rpx 0;
+}
+.set-item.is-active {
+  color: #f47885;
+}

learnOnline/pages/course/player.js

@@ -45,6 +45,21 @@ Page({
     },
     videoPlayUrl(data) {
       return data.video.SD || data.video.LD || data.video.FD
+    },
+    // 章节扁平数据
+    flatChapters(data) {
+      const chapters = data.course.chapters || []
+      return chapters.reduce((result, item) => {
+        return [...result, ...item.children]
+      }, [])
+    },
+    // 下一节
+    nextChapter(data) {
+      const index = data.flatChapters.findIndex(item => item.id === data.activeChapter.id)
+      if (index !== -1) {
+        return data.flatChapters[index + 1]
+      }
+      return null
     }
   },
   onLoad: function (options) {
@@ -126,6 +141,22 @@ Page({
     // 更新chapter
     this.updateActiveChapter(chapter)
   },
+  // 播放结束
+  onEnded(e) {
+    const isAutoNext = e.detail
+    // 自动连播
+    if (isAutoNext && this.data.nextChapter) {
+      // 结束后上传最后一次
+      if (this.data.throttled) {
+        this.data.throttled.cancel()
+        this.updateChapterVideoProgress()
+      }
+      // 清除上传进度
+      this.clearProgressStatus()
+      // 更新chapter
+      this.updateActiveChapter(this.data.nextChapter)
+    }
+  },
   // 当前播放时间更新
   onTimeupdate(e) {
     let { currentTime } = e.detail

learnOnline/pages/course/player.wxml

@@ -6,6 +6,7 @@
       autoplay="{{ autoplay }}"
       bindtimeupdate="onTimeupdate"
       bindswitchAudio="onSwitchVideo"
+      bindended="onEnded"
       wx:if="{{ hasVideo }}"
     ></player-video>
     <player-audio