视频组件

src/pages/home/index.vue

@@ -67,7 +67,7 @@
             <speedy-nav :datas="item"></speedy-nav>
           </div>
           <div v-if="item.componentCode == 'video-player' && item.componentInfo.visible == 1" >
-            <video-player :datas="item" :indexs="index"></video-player>
+            <video-player :class="'VideoPlayer' + index" :datas="item" :indexs="index"></video-player>
           </div>
           <div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1">
 			      <official-account></official-account>
@@ -695,6 +695,12 @@ export default {
             let com=this.$mp.page.selectComponent(".merchants-list"+i) ;
             com && com.getScroll(el);
           }
+          if(element.componentCode=="video-player"){
+            console.log("视频组件滚动")
+            let com=this.$mp.page.selectComponent(".VideoPlayer"+i);
+            console.log(com,i,'--com')
+            com && com.getScroll(el);
+          }
 
         }
       }

static/nativeComponents/VideoPlayer/index.js

@@ -23,7 +23,38 @@ const componentOptions = {
   observers: {},
   // 组件方法
   methods: {
-    init() {},
+    init() { },
+    getScroll(el) {
+      let { autoPlay, scrollPlay } = this.data.datas.componentData;
+      if (!scrollPlay) return;
+      let query = wx.createSelectorQuery();
+      query.select('.VideoPlayer'+this.data.indexs).boundingClientRect(rect=>{
+        console.log(rect,'----------rect')
+        let videoPlayerTop = Math.ceil(rect.top);
+        let videoPlayerHeight = rect.height;
+        const sysInfo = wx.getSystemInfoSync()
+        let windowHeight = sysInfo.windowHeight / 2;
+        if ((videoPlayerTop <= windowHeight) && (videoPlayerTop + videoPlayerHeight > windowHeight)) {
+          console.log("开始播放");
+          this.autoVideo(0);
+        } else {
+          // 距离顶部高度绝对值大于组件高度即为在可视范围外
+          console.log("暂停播放");
+          this.autoVideo(1);
+        }
+      }).exec();
+    },
+    autoVideo(type) {
+      if (type == 0) {
+        // 开始播放
+        this.videoContext.play();
+        this.setData({ isPlay: true });
+      } else if (type == 1) {
+        // 暂停播放
+        this.videoContext.pause();
+        this.setData({ isPlay: false });
+      }
+    },
     playVideo(e) {
       app.trackCpn(e, this.data.datas.componentName)
       // 视频播放
@@ -44,12 +75,17 @@ const componentOptions = {
   },
   // 组件生命周期
   lifetimes: {
-    created() {},
+    created() {
+    },
     attached() {
       this.init();
     },
     ready() {
       this.videoContext = wx.createVideoContext(`videoId${this.data.indexs}`,this);
+      if (this.data.datas.componentData['autoPlay']) {
+        this.setData({isPlay: true})
+      }
+      console.log(this.videoContext,'---this.videoContext')
     },
     moved() {},
     detached() {}

static/nativeComponents/VideoPlayer/index.wxml

-<view class="VideoPlayer">
+<view class="VideoPlayer"
+ style="padding-top:{{datas.componentData.allPaddingList[0].value*2}}rpx;padding-right:{{datas.componentData.allPaddingList[1].value*2}}rpx;padding-bottom:{{datas.componentData.allPaddingList[2].value*2}}rpx;padding-left:{{datas.componentData.allPaddingList[3].value*2}}rpx;background-color:{{datas.componentData.backgroundColor}};background-image:url({{datas.componentData.backgroundImg}});background-size:100%;">
 	<view class="title" wx:if="{{datas.componentData['title']}}">
 		<text>{{datas.componentData['title']}}</text>
 	</view>
@@ -10,6 +11,7 @@
 			 src="{{datas.componentData['videoUrl']}}"
 			 show-center-play-btn="{{datas.componentData['nativeControl']}}"
 			 type="video/mp4"
+			 autoplay="{{datas.componentData['autoPlay']}}"
 			 controls="{{datas.componentData['nativeControl']}}"
 			 loop="{{datas.componentData['loopPlay']}}"
 			 poster="{{datas.componentData['poster']}}"