测试短视频功能

components/swiperVideo/swiperVideo.js

@@ -0,0 +1,123 @@
+
+/**
+ *  Web唐明明
+ *  一个梦想做木雕手艺人的程序员
+ *  explain: videoSwiper
+ */
+
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        // 视频列表
+        videoList: {
+            type    : Array,
+            value   : []
+        },
+        // 是否自动播放
+        autoPlay: {
+            type    : Boolean,
+            value   : true
+        },
+        // 视频展示方式
+        fit:{
+            type    : String,
+            value   : "contain"
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        controls: false,
+        showPlay: false,
+        isPlay  : false,
+        playId  : 0
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        // 视频滚动了
+        changeVideo(e){
+            let videoLists = this.data.videoList,
+                current    = e.detail.current,
+                currentId  = this.data.playId,
+                prevId     = videoLists[current].video_id
+
+            // 滚动回调
+            this.triggerEvent("swiperindex", {current: current})
+            
+            // 停止老
+            let videoContextCurrent = wx.createVideoContext("video" + currentId, this)
+                videoContextCurrent.stop()
+
+            // 播放新
+            let videoContextPrev = wx.createVideoContext("video" + prevId, this)
+                videoContextPrev.play()
+
+            this.setData({
+                isPlay: true,
+                playId: prevId
+            })
+        },
+
+        //视频播放控件
+        videoPlay(e){
+            let videoId      = e.currentTarget.dataset.videoid,
+                videoContext = wx.createVideoContext("video" + videoId, this),
+                isPlayState  = this.data.isPlay
+
+            if(isPlayState){
+                videoContext.pause()
+            }else{
+                videoContext.play()
+            }
+
+            this.setData({
+                isPlay : !isPlayState
+            })
+        },
+
+        // 视频播放状态
+        vipdeBindPlay(e){
+            this.triggerEvent("play", {
+                playType : e.type,
+                videoId  : e.currentTarget.dataset.videoid
+            })
+
+            if(e.type == "play"){
+                this.setData({
+                    isPlay: true
+                })
+            }else if(e.type == "pause"){
+                this.setData({
+                    isPlay: false
+                })
+            }
+        }
+    },
+    /**
+     * 生命周期组件
+     */
+    lifetimes: {
+        attached(){
+            let videoList = this.data.videoList
+
+            // 默认当前视频id
+            if(videoList.length > 0){
+                this.setData({
+                    playId: videoList[0].video_id
+                })
+                // 是否默认播放
+                if(this.data.autoPlay){
+                    let playVideoContext = wx.createVideoContext("video" + videoList[0].video_id, this)
+                        playVideoContext.play()
+                }
+            }
+        }
+    }
+})