video logic

taobao_mini/client/app.json

@@ -9,6 +9,7 @@
     ],
     "window": {
         "enableSkia": "true",
-        "allowsBounceVertical": "NO"
+        "allowsBounceVertical": "NO",
+        "defaultTitle": "雅顿双十一"
     }
 }
\ No newline at end of file

taobao_mini/client/pages/homePage/homePage.axml

@@ -21,10 +21,26 @@
       <view class="video_block_wrapper">
 
         <video
+          id="videoCtx"
           class="video"
           src="{{videoSrc}}"
-          controls="{{videoOps.showAllControls}}"
-          loop="{{videoOps.isLooping}}"
+          poster="{{posterSrc}}"
+          controls="{{showAllControls}}"
+          loop="{{isLooping}}"
+          muted="{{muteWhenPlaying}}"
+          show-mute-btn="{{showMuteButton}}"
+          show-fullscreen-btn="{{showFullScreenButton}}"
+          object-fit="{{objectFit}}"
+          autoplay="{{autoPlay}}"
+          direction="{{directionWhenFullScreen}}"
+          initial-time="{{initTime}}"
+          mobilenetHintType="{{mobilenetHintType}}"
+          onPlay="onPlay"
+          onPause="onPause"
+          onEnded="onEnded"
+          onError="onPlayError"
+          onTimeUpdate="onTimeUpdate"
+          onLoading="onLoading"
         />
 
         <view class="video_block_text">
@@ -34,9 +50,9 @@
         <view class="video_block_up" onTap="onVideoTurnSmall">收起视频</view>
       </view>
 
-      <!-- 按钮组 -->
-      <image class="video_btn_left" src="{{resList['70006ad9-e7aa-4121-8493-c3c0afa94608'].url}}" />
-      <image class="video_btn_right" src="{{resList['cf73af84-5751-4aee-a754-9106162786d9'].url}}" />
+      <!-- 按钮组 左-右 -->
+      <image class="video_btn_left" onTap="videoTurnLeft" src="{{resList['70006ad9-e7aa-4121-8493-c3c0afa94608'].url}}" />
+      <image class="video_btn_right" onTap="videoTurnRight" src="{{resList['cf73af84-5751-4aee-a754-9106162786d9'].url}}" />
     </view>
 
 

taobao_mini/client/pages/homePage/homePage.js

@@ -20,20 +20,54 @@ Page({
       content: '',
       btnText: ''
     },
-    showChooseGame: false,
-    videoBottom: false, // 视频收起 - flag
-    videoBottom_timeout: false, // 具有延迟的 视频收起 - flag
-    videoSrc: 'https://cloud.video.taobao.com/play/u/20446068/p/1/e/6/t/1/239271757987.mp4',
-    // video 配置
-    videoOps: {
+    // 视频收起 - flag
+    videoBottom: false,
+    // 具有延迟的 视频收起 - flag
+    videoBottom_timeout: false,
+    // 视频地址
+    videoSrc: '',
+    // 封面图地址
+    posterSrc: '',
+    // ------ 视频 配置 ------ //
+    videoSrc: '',
+    showAllControls: true,
+    isLooping: false,
+    muteWhenPlaying: false,
+    showFullScreenButton: false,
+    objectFit: 'contain',
+    autoPlay: false,
+    directionWhenFullScreen: 90,
+    initTime: 0,
+    mobilenetHintType: 1,
+    videoActiveIndex: 0,
+    // ------ 视频 配置 ------ //
     
-    },
+    // 出现选择游戏控制
+    showChooseGame: false,
     commonModalConfirm: null,
     commonModalVisible: false,
     ruleModalVisible: false,
     rewardsModalVisible: false,
     prizesModalVisible: false
   },
+  // 视频地址列表 - 存储播放时常
+  videoSrcArr: [
+    { url: 'https://cloud.video.taobao.com/play/u/20446068/p/1/e/6/t/1/239271757987.mp4', timeStamp: 0, totalTime: 0 },
+    { url: 'https://cloud.video.taobao.com/play/u/20446068/p/1/e/6/t/1/239271757987.mp4', timeStamp: 0, totalTime: 0 },
+    { url: 'https://cloud.video.taobao.com/play/u/20446068/p/1/e/6/t/1/239271757987.mp4', timeStamp: 0, totalTime: 0 }
+  ],
+  // 视频记录 flag
+  timeStampCountFlag: false,
+  // 视频记录 ms - 增量
+  timeStamp: 0,
+  // 视频记录 ms - 现量
+  timeStampRecord: 0,
+  // 视频预览图列表
+  posterSrcArr: [
+    'https://yun.duiba.com.cn/spark/assets/bg1.d818f787351875b0982937d8bb68b0655febec3c.png',
+    'https://yun.duiba.com.cn/spark/assets/弹窗背景_奖品.dce4e3dd9a3fcae166dfbd934b714ce1bc7fa5c9.png',
+    'https://yun.duiba.com.cn/spark/assets/7191ae57140b4937ae42500e76aa533693326ef9.png',
+  ],
   onLoad(query) {
     // 页面加载
     // this.getAuth();
@@ -42,39 +76,18 @@ Page({
   init() {
     console.log('do init')
   },
-  onReady() {
-    // 页面加载完成
-  },
-  onShow() {
-    // 页面显示
-  },
-  onHide() {
-    // 页面隐藏
-  },
-
-  onVideoTurnSmall () {
-    this.setData({ videoBottom: true })
-    setTimeout(() => { this.setData({ videoBottom_timeout: true }) }, 350)
-  },
 
-  onVideoTurnBig () {
-    this.setData({ videoBottom_timeout: false })
-    setTimeout(() => { this.setData({ videoBottom: false }) }, 350)
+  // 页面加载完成
+  onReady() {
+    this.videoCtx = my.createVideoContext('videoCtx')
+    this.setData({ videoSrc: this.videoSrcArr[0].url, posterSrc: this.posterSrcArr[0] })
+    this.videoCtx.play()
   },
 
-
-  doStart() {
-    this.showCommonModal({
-      content: '活动还未开始\n请稍后',
-      btnText: '我知道了',
-      commonModalVisible: true,
-      confirmCallback: () => {
-        this.closeCommonModal();
-      }
-    });
+  // 页面显示
+  onShow() {
   },
 
-
   // 获取用户授权信息
   async getAuth() {
     const userInfo = await getAuthUserInfo().catch(err => {
@@ -119,6 +132,128 @@ Page({
     return SHARE_CONFIG;
   },
 
+  // start
+  doStart() {
+    this.showCommonModal({
+      content: '活动还未开始\n请稍后',
+      btnText: '我知道了',
+      commonModalVisible: true,
+      confirmCallback: () => {
+        this.closeCommonModal();
+      }
+    });
+  },
+
+  // video - turn left
+  videoTurnLeft () {
+    let i = this.data.videoActiveIndex
+    if (i > 0) {
+      console.log('turn left')
+      this.videoCtx.stop()
+      this.videoRecord(i - 1)
+      setTimeout(() => {
+        console.log('videoTurnLeft')
+        i -= 1
+        let vsrc = this.videoSrcArr[i].url,
+            psrc = this.posterSrcArr[i]
+        this.setData({
+          videoSrc: vsrc,
+          posterSrc: psrc,
+          videoActiveIndex: i
+        })
+        this.videoCtx.play()
+      }, 100)
+    }
+  },
+
+  // video - turn right
+  videoTurnRight () {
+    let i = this.data.videoActiveIndex
+    if (i < this.videoSrcArr.length - 1) {
+      console.log('turn right')
+      this.videoCtx.stop()
+      this.videoRecord(i + 1)
+      setTimeout(() => {
+        console.log('videoTurnRight')
+        i += 1
+        let vsrc = this.videoSrcArr[i].url,
+            psrc = this.posterSrcArr[i]
+        this.setData({
+          videoSrc: vsrc,
+          posterSrc: psrc,
+          videoActiveIndex: i
+        })
+        this.videoCtx.play()
+      }, 100)
+    }
+  },
+
+  // video - turn small
+  onVideoTurnSmall () {
+    this.videoCtx.pause()
+    this.setData({ videoBottom: true })
+    setTimeout(() => { this.setData({ videoBottom_timeout: true }) }, 350)
+  },
+
+  // video - turn big
+  onVideoTurnBig () {
+    this.setData({ videoBottom_timeout: false })
+    setTimeout(() => {
+      this.setData({ videoBottom: false })
+      this.videoCtx.play()
+    }, 350)
+  },
+
+  // video - change to another video
+  videoRecord (index) {
+    this.videoSrcArr[index].timeStamp = this.timeStamp
+    this.timeStamp = 0
+    this.timeStampCountFlag = false
+    this.timeStampRecord = 0
+    console.log(this.videoSrcArr)
+  },
+
+  // video - onPlay
+  onPlay() {
+    this.timeStampCountFlag = true
+    console.log('---- 视频开始播放')
+  },
+
+  // video - onPause
+  onPause() {
+    console.log('---- 视频播放暂停')
+    console.log('timeStamp', this.timeStamp)
+    this.videoRecord(this.videoActiveIndex)
+  },
+
+  // video - onEnded
+  onEnded(e) {
+    console.log('---- 视频播放结束', e)
+    this.videoRecord(this.videoActiveIndex)
+  },
+
+  // video - onPlayError
+  onPlayError(err) { console.warn('---- 视频播放错误', err) },
+
+  // video - onTimeUpdate
+  onTimeUpdate(e) {
+    if (!this.timeStampCountFlag) return
+    if (!this.timeStampRecord) this.timeStampRecord = e.timeStamp
+    else {
+      this.timeStamp += (e.timeStamp - this.timeStampRecord)
+      this.timeStampRecord = e.timeStamp
+    }
+  },
+
+  // video - onLoading
+  onLoading (e) {
+    console.log(e)
+  },
+
+  // 页面隐藏
+  onHide() {
+  },
+  
   // 显示通用弹层
   showCommonModal({ content, btnText, confirmCallback }) {
     this.setData({
@@ -127,6 +262,7 @@ Page({
       commonModalData: { content, btnText }
     });
   },
+
   // 跳转到天猫页面
   goTmallPage() { navigateToOutside(REDIRECT_URL['tmall']); },
 
@@ -158,7 +294,6 @@ Page({
   },
 
 
-
   onUnload() {
     // 页面被关闭
   },