视频预加载

components/worksList/index.js

@@ -1,116 +1,121 @@
 import behavior from '~/mixins/video'
 import {
-    submitPlayLog
+  submitPlayLog
 } from '~/api/video'
 let _observer
 let timer;
 let preId = ''
 Component({
-    behaviors: [behavior],
-    properties: {
-        worksList: {
-            type: Array,
-            value: [],
-            observer(newVal) {
-                this.setData({
-                    worksListCopy: newVal
-                })
-                if (this.properties.autoPlay) {
-                    // 自动播放
-                    this._observer = this.createIntersectionObserver({
-                        observeAll: true
+  behaviors: [behavior],
+  properties: {
+    worksList: {
+      type: Array,
+      value: [],
+      observer(newVal) {
+        this.setData({
+          worksListCopy: newVal
+        })
+        if (this.properties.autoPlay) {
+          // 自动播放
+          this._observer = this.createIntersectionObserver({
+            observeAll: true
+          })
+          this._observer.relativeTo('.playLine')
+            .observe('.videoPreview', (res) => {
+              let intersectionRatio = res.intersectionRatio
+              if (intersectionRatio > 0 && preId != res.dataset.id) {
+                clearTimeout(timer);
+                timer = setTimeout(() => {
+                  preId = res.dataset.id
+                  submitPlayLog({
+                    userReadId: res.dataset.id,
+                    playStopTime: 1000
+                  })
+                  // 0视频1音频
+                  if (res.dataset.type == 0) {
+                    this.resetAudio();
+                    this.setData({
+                      currentId: res.dataset.id,
+                      nextvideo: res.dataset.nextvideo || ""
                     })
-                    this._observer.relativeTo('.playLine')
-                        .observe('.videoPreview', (res) => {
-                            let intersectionRatio = res.intersectionRatio
-                            if (intersectionRatio > 0 && preId != res.dataset.id) {
-                                clearTimeout(timer);
-                                timer = setTimeout(() => {
-                                    preId = res.dataset.id
-                                submitPlayLog({
-                                    userReadId: res.dataset.id,
-                                    playStopTime: 1000
-                                })
-                                // 0视频1音频
-                                if (res.dataset.type == 0) {
-                                    this.resetAudio();
-                                    this.setData({
-                                        currentId: res.dataset.id,
-                                    })
-                                } else {
-                                    this.playAudio({
-                                        currentTarget: {
-                                            dataset: res.dataset
-                                        }
-                                    })
-                                }
-                                }, 600);
-                            }
-                        })
-                }
-            }
-        },
-        // 是否自动播放
-        autoPlay: {
-            type: Boolean,
-            value: true
-        },
-        videoType: {
-            type: String,
-            // value 为public时是默认公共样式，为my时为“我的”样式，展示下载删除是否公开,pk为pk的样式文案,collection为收藏时的样式,
-            value: 'public',
-        },
-        // 是否在tabbar页面使用
-        tabBarPadding: {
-            type: Boolean,
-            value: false,
+                  } else {
+                    this.playAudio({
+                      currentTarget: {
+                        dataset: res.dataset
+                      }
+                    })
+                    this.setData({
+                      nextvideo: res.dataset.nextvideo || ""
+                    })
+                  }
+                }, 600);
+              }
+            })
         }
+      }
     },
-    data: {
-        worksListCopy: {}
+    // 是否自动播放
+    autoPlay: {
+      type: Boolean,
+      value: true
     },
-    lifetimes: {
-        detached: function () {
-            // 在组件实例被从页面节点树移除时执行
-            this.resetAudio()
-        },
+    videoType: {
+      type: String,
+      // value 为public时是默认公共样式，为my时为“我的”样式，展示下载删除是否公开,pk为pk的样式文案,collection为收藏时的样式,
+      value: 'public',
     },
-    methods: {
-        setListFans({
-            detail
-        }) {
-            let worksListCopy = JSON.parse(JSON.stringify(this.data.worksListCopy))
-            worksListCopy.forEach(item => {
-                if (item.user.uid == detail) {
-                    item.isFans = true
-                }
-            })
-            this.setData({
-                worksListCopy
-            })
-        },
-        addCommentNum({
-            detail
-        }) {
-            let worksListCopy = this.data.worksListCopy
-            let index = worksListCopy.findIndex(item => {
-                return item.userRead.id == detail
-            })
-            if (index != -1) {
-                this.setData({
-                    [`worksListCopy[${index}].userRead.commentAmount`]: ++worksListCopy[index].userRead.commentAmount
-                })
-            }
-        },
-        deleteVideo({
-            detail
-        }) {
-            let worksListCopy = this.properties.worksListCopy.filter(item => {
-                return item.userRead.id != detail
-            })
-            this.setData({
-                worksListCopy
-            })
-        },
+    // 是否在tabbar页面使用
+    tabBarPadding: {
+      type: Boolean,
+      value: false,
+    }
+  },
+  data: {
+    worksListCopy: {},
+    nextvideo: ''
+  },
+  lifetimes: {
+    detached: function () {
+      // 在组件实例被从页面节点树移除时执行
+      this.resetAudio()
+    },
+  },
+  methods: {
+    setListFans({
+      detail
+    }) {
+      let worksListCopy = JSON.parse(JSON.stringify(this.data.worksListCopy))
+      worksListCopy.forEach(item => {
+        if (item.user.uid == detail) {
+          item.isFans = true
+        }
+      })
+      this.setData({
+        worksListCopy
+      })
+    },
+    addCommentNum({
+      detail
+    }) {
+      let worksListCopy = this.data.worksListCopy
+      let index = worksListCopy.findIndex(item => {
+        return item.userRead.id == detail
+      })
+      if (index != -1) {
+        this.setData({
+          [`worksListCopy[${index}].userRead.commentAmount`]: ++worksListCopy[index].userRead.commentAmount
+        })
+      }
+    },
+    deleteVideo({
+      detail
+    }) {
+      let worksListCopy = this.properties.worksListCopy.filter(item => {
+        return item.userRead.id != detail
+      })
+      this.setData({
+        worksListCopy
+      })
     },
+  },
 })

components/worksList/index.wxml

@@ -4,11 +4,13 @@
         <videoPreview class="videoPreview" wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}"
             currentTime="{{currentTime}}" sliderValue="{{sliderValue}}" videoInfo="{{item}}" index='{{index}}'
             currentId="{{currentId}}" data-id="{{item.userRead.id}}" data-audio="{{item.userRead.audioPath}}"
+            data-nextvideo="{{worksListCopy[index+1].userRead.videoPath}}"
             data-uid="{{item.user.uid}}" data-type="{{!item.userReadExtend||item.userReadExtend.resourcesType==0?0:1}}"
             bind:openComment="openComment" bind:setSeek="setSeek" bind:setListFans="setListFans"
             bind:playAudio="playAudio" bind:playVideo="playVideo" bind:deleteVideo='deleteVideo'>
         </videoPreview>
     </view>
+    <video id="nextVideo" src="{{nextvideo}}" style="display:none;"></video>
     <Comment id="comment" tabBarPadding="{{tabBarPadding}}" bind:addCommentNum="addCommentNum" />
     <canvas id='share' class="share" type="2d"> </canvas>
 </view>