From d69d2ffa8530af42dfb7245aba04207ad15f0413 Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Wed, 14 Aug 2024 17:27:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0video=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E5=92=8C=E8=87=AA=E5=8A=A8=E5=8C=96=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/video/video.test.js |  20 ++++----
 pages/component/video/video.uvue    |  68 ++++++++++++++++++++--------
 static/test-video/fast-backward.png | Bin 0 -> 1093 bytes
 static/test-video/fast-forward.png  | Bin 0 -> 1100 bytes
 4 files changed, 62 insertions(+), 26 deletions(-)
 create mode 100644 static/test-video/fast-backward.png
 create mode 100644 static/test-video/fast-forward.png

diff --git a/pages/component/video/video.test.js b/pages/component/video/video.test.js
index e598fec3..983c41ed 100644
--- a/pages/component/video/video.test.js
+++ b/pages/component/video/video.test.js
@@ -105,10 +105,7 @@ describe('component-native-video', () => {
     if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
       return
     }
-    await page.setData({
-      pos: 10
-    });
-    await page.callMethod('seek');
+    await page.callMethod('seek', 10);
     start = Date.now();
     await page.waitFor(async () => {
       return (await page.data('eventWaiting')) && (await page.data('eventProgress')) || (Date.now() - start > 1000);
@@ -169,10 +166,7 @@ describe('component-native-video', () => {
     if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
       return
     }
-    await page.setData({
-      pos: 120
-    });
-    await page.callMethod('seek');
+    await page.callMethod('seek', 120);
     start = Date.now();
     await page.waitFor(async () => {
       return (await page.data('eventEnded')) || (Date.now() - start > 5000);
@@ -220,6 +214,16 @@ describe('component-native-video', () => {
     });
   });
 
+  it('test sub component', async () => {
+    if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) return
+    await page.setData({
+      subCompEnable: true,
+      subCompShow: true
+    });
+    await page.waitFor(100);
+    expect(await page.callMethod('hasSubComponent')).toBe(true);
+  });
+
   it('test format', async () => {
     page = await program.navigateTo('/pages/component/video/video-format');
     await page.waitFor(1000);
diff --git a/pages/component/video/video.uvue b/pages/component/video/video.uvue
index feedda44..47fb5e31 100644
--- a/pages/component/video/video.uvue
+++ b/pages/component/video/video.uvue
@@ -11,7 +11,8 @@
       @ended="onEnded" @timeupdate="onTimeUpdate" @waiting="onWaiting" @error="onError" @progress="onProgress"
       @fullscreenclick="onFullScreenClick" @controlstoggle="onControlsToggle" @fullscreenchange="onFullScreenChange">
       <!-- #ifdef APP-ANDROID -->
-      <image class="custom-play-btn" v-if="customPlayBtnEnable" v-show="customPlayBtnShow" src="/static/play.png" @tap="play" />
+      <image v-if="subCompEnable && subCompShow" class="img-fast-backward" src="../../../static/test-video/fast-backward.png" @tap="fastBackward"></image>
+      <image v-if="subCompEnable && subCompShow" class="img-fast-forward" src="../../../static/test-video/fast-forward.png" @tap="fastForward"></image>
       <!-- #endif -->
     </video>
     <scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
@@ -21,9 +22,9 @@
         </navigator>
       </view>
       <!-- #ifdef APP-ANDROID -->
-      <view class="uni-flex uni-btn-v" style="justify-content: space-between;">
-        <text class="uni-title">中间播放按钮是否替换为子组件</text>
-        <switch :checked="customPlayBtnEnable" :disabled="!customPlayBtnShow" @change="onCustomPlayBtnEnableChange" />
+      <view class="uni-flex uni-btn-v" style="justify-content: space-between;align-items: center;">
+        <text class="uni-title" style="width: 80%;">子组件实现快进、快退功能（全屏后显示）</text>
+        <switch :checked="subCompEnable" @change="onSubCompEnableChange" />
       </view>
       <!-- #endif -->
       <view class="uni-title">
@@ -37,7 +38,7 @@
       </view>
       <view class="uni-btn-v">
         <input class="input" placeholder="输入要跳转的位置,单位s" type="number" @input="onSeekInput"></input>
-        <button type="primary" @click="seek">跳转到指定位置</button>
+        <button type="primary" @click="seek(this.pos)">跳转到指定位置</button>
       </view>
       <view class="uni-btn-v">
         <enum-data title="选择进入全屏时的视频方向" :items="directionItemTypes" @change="onRequestFullScreenDirectionChange"></enum-data>
@@ -96,6 +97,9 @@
 
 <script>
   import { ItemType } from '@/components/enum-data/enum-data';
+  // #ifdef APP-ANDROID
+  import ViewGroup from 'android.view.ViewGroup';
+  // #endif
   export default {
     onReady() {
       this.videoContext = uni.createVideoContext('video');
@@ -176,8 +180,10 @@
         rate: 1,
         rateItemTypes: [{ "value": 0, "name": "0.5" }, { "value": 1, "name": "0.8" }, { "value": 2, "name": "1.0" }, { "value": 3, "name": "1.25" }, { "value": 4, "name": "1.5" }] as ItemType[],
         rateItems: [0.5, 0.8, 1.0, 1.25, 1.5],
-        customPlayBtnEnable: false,
-        customPlayBtnShow: true,
+        subCompEnable: false,
+        subCompShow: false,
+        curPos: 0,
+        endPos: 0,
         // 自动化测试
         autoTest: false,
         isPlaying: false,
@@ -208,9 +214,9 @@
         (uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
         // this.videoContext?.pause();
       },
-      seek: function () {
-        console.log("seek -> " + this.pos);
-        this.videoContext?.seek(this.pos);
+      seek: function (pos : number) {
+        console.log("seek -> " + pos);
+        this.videoContext?.seek(pos);
       },
       onSeekInput: function (event : UniInputEvent) {
         this.pos = parseInt(event.detail.value);
@@ -227,7 +233,6 @@
         console.log("stop");
         uni.getElementById<UniVideoElement>("video")?.stop(); //泛型写法测试
         // this.videoContext?.stop();
-        this.customPlayBtnShow = true;
       },
       sendDanmu: function () {
         console.log("sendDanmu -> " + this.danmu);
@@ -245,6 +250,16 @@
       onPlaybackRateChange: function (value : number) {
         this.rate = this.rateItems[value];
       },
+      fastBackward: function () {
+        let pos = this.curPos - 15;
+        if (pos < 0) pos = 0;
+        this.seek(pos);
+      },
+      fastForward: function () {
+        let pos = this.curPos + 15;
+        if (pos > this.endPos) pos = this.endPos;
+        this.seek(pos);
+      },
       // 属性
       onSrcComfirm: function (event : UniInputConfirmEvent) {
         let value = event.detail.value;
@@ -376,15 +391,14 @@
         this.header = json as UTSJSONObject;
         console.log("header -> " + JSON.stringify(this.header))
       },
-      onCustomPlayBtnEnableChange: function (event : UniSwitchChangeEvent) {
-      	this.customPlayBtnEnable = event.detail.value;
+      onSubCompEnableChange: function (event : UniSwitchChangeEvent) {
+      	this.subCompEnable = event.detail.value;
       },
       // 事件
       onPlay: function (res : UniEvent) {
         console.log(res.type);
         this.isPlaying = true;
         this.isPause = false;
-        this.customPlayBtnShow = false;
         if (this.autoTest) {
           this.eventPlay = {
             "tagName": res.target?.tagName,
@@ -414,6 +428,8 @@
       },
       onTimeUpdate: function (res : UniVideoTimeUpdateEvent) {
         console.log(res.type + " -> " + JSON.stringify(res.detail));
+        this.curPos = res.detail.currentTime;
+        this.endPos = res.detail.duration;
         if (this.autoTest) {
           this.eventTimeupdate = {
             "tagName": res.target?.tagName,
@@ -425,6 +441,7 @@
       },
       onFullScreenChange: function (res : UniVideoFullScreenChangeEvent) {
         console.log(res.type + " -> " + JSON.stringify(res.detail));
+        this.subCompShow = res.detail.fullScreen;
         if (this.autoTest) {
           this.eventFullscreenchange = {
             "tagName": res.target?.tagName,
@@ -498,7 +515,13 @@
             this.isError = true;
           }
         })
+      },
+      // #ifdef APP-ANDROID
+      hasSubComponent() : boolean {
+        const view = uni.getElementById('video')?.getAndroidView<ViewGroup>();
+        return view == null ? false : view.getChildCount() > 1;
       }
+      // #endif
     }
   }
 </script>
@@ -519,12 +542,21 @@
     margin: 10px;
   }
 
-  .custom-play-btn {
-    width: 60px;
-    height: 60px;
+  .img-fast-backward {
+    width: 40px;
+    height: 40px;
     top: 50%;
-    left: 50%;
+    left: 12%;
     transform: translate(-50%, -50%);
     position: absolute;
   }
+
+  .img-fast-forward {
+    width: 40px;
+    height: 40px;
+    top: 50%;
+    right: 12%;
+    transform: translate(50%, -50%);
+    position: absolute;
+  }
 </style>
diff --git a/static/test-video/fast-backward.png b/static/test-video/fast-backward.png
new file mode 100644
index 0000000000000000000000000000000000000000..79a650b4174548956b8d72356cd8adfbac2ea82a
GIT binary patch
literal 1093
zcmeAS@N?(olHy`uVBq!ia0vp^6(G#P1|%(0%q{^b#^NA%Cx&(BWL`2bF#q>-aSW-5
zdpkEb?^b|_OKzB(8FP}T?rMh(GgFcsQaio!S}XUR|6XkJclHy@^m9GF!dLp3|2wD~
zI9(RZTafTUD8PWVS)HNpIBT#$1=E9y7+P=(-m>UTKV7%|_S^pBkKdnC*(-B_d*9u>
z`{$n*+w&aWx#@wf%!H=+-2d}*w=GHF<+C`rdE5E-C!Vro7ariKyZmiZ(^g9b7X2-I
z=Ol3VU22lf)mOeTY4Mr|qPhBtH)buKli+wenETr!4b_Mn-?lW_T6%H3%c-_HC@Axi
zH9w<T>tLWvCad-q+tvpeeN&pI-jdU^V0PC!cq*4)cuuEsZ$k67c8+t$1odugc)PA?
zb5RSIS>Ep156;LaHqE`2r?-QteRsmqZS&*V>ep6i_x*a`yt-fq=e4Zg7Jc^LfB&tq
znp?N-`s*)t+TjPUTEwtqZ>#-xPb>eRsHG2U^p@H>>u*9aGY|W02)(_RHT-#ic+TB2
z{ev1ZtD3gn`d4AIZ<%=D+VJCH+cQM^H0?zX&dRly;fvSZSZ}{hSE4m}-u<+L_j0%I
za$Q{T$G$J`U|{Zbv7SR4ORm2blDS#t3p8iGTxM(&>-l}x9+zD17ht`A{Pt^(eRihp
zyB@qe!1It}U;9xd&T|Hnb$-YlX?_t^@H{ujR^e;{OZw7h0o4<yI&N|}wdxu7x!|cf
zJKkyWUEQzd+O>_#tzcbO#=);itkw3jb(;m}?2X*?AnIe2b=|2evJ+AbG-PJSr_^pz
z7Pz1qS+H-%&w2fF-h9CauW4`Kc^3Pa<+`wFSi!m-EA*Py&O1BpppK+aO!3x~gEK2x
zqu2Z_UG}<q)2hN9x;GxpG~3Jg{_FdMwQ=6Bg;nLnb>2VTI1L!)ykQqUDec?3m2Zp2
zo389GOD9%s``PwSmHE<KZ~U+6x;9Jtx@d6=cUjbC3yGBv*2rYCNUy)?TVU1~(!?A7
zK+8hd-RmHmHizJxM&-2$Peofe`<{8|M`W@-Y+7vL#Ss?a$OTLoOIh+G9JLP4lX=Qg
zzD{9of_~qordDkaZD4BJl5mhKh<n?U27x_Etg0;01qV3t)-32r$OR@#Zfy<qh;HVf
z53@z5h^#rts9UkEY2l~;HQQR5;|kutFAdz+*A(cZS3r+E1<tMY4BF4vER#R(7z->H
O7(8A5T-G@yGywo23)JlZ

literal 0
HcmV?d00001

diff --git a/static/test-video/fast-forward.png b/static/test-video/fast-forward.png
new file mode 100644
index 0000000000000000000000000000000000000000..91e389be97f6f052e7194f0e79f65490c6c58220
GIT binary patch
literal 1100
zcmeAS@N?(olHy`uVBq!ia0vp^6(G#P1|%(0%q{^b#^NA%Cx&(BWL`2bu&{Z$IEGZj
zy}gr|_sD^#?V(G|n!P+7!CP!uxu)NY<B3QORoSAHs<tsbE;_z`+S;GT&Ra~-yjyr7
z{1so%%JAh!d71q7akA(<cp~eu&&GE{!{l;>pPx()GWp$Wd~*6S3%5lj`y_pTVVWs0
zp8X(mmK}fl;q)tYuIKk(DffPG`~2h@*Oqz9G)w+XJMg)<)wzy=Z{~i}4}X6ia`?|K
zqgSv0AW`P{`_oT9mD<SdKe_%q_kqMu<;-;zNncF#8Qo9%Gq}Zn<7&A0)APUyb3@Ss
zC;pfu+%XAZdi*K4(eUyHA&JTJd3t8F@gC^-BiOLpubHvn`k%mt-M-C&1>65zY?v)?
zAi->YUY>8qSH@=3g4cg0HqMUuCet|ki95sj=a;tMew(Z5bMX7!K5OrWlRpIyv>#5K
zQ@_!U=de5Dv;6-@WOlL4m?O_z!=J>E+ZDs*bGDy(9<!vv?7P+1m@a=(ZuGpofo;YV
zd0w9xZMp|q{!}Ea&W!lYIce>Iy`S3|-<k4;9oYM+ooU;ww)s}B@3-kTRzKnAv}w1S
z>zBX#?z_Xk8;&sVNd33rz}jU8xp#!tG4dZS*c*3$y4^l$#vj}NBsP|I{&NriV)saL
z)A9Riy1B~|?M}zmd^pJ*?Y}E4Z>EhJP;-FrovbYR*-4ytl<OrP#O=PvwIjUFrr>?-
ze$gG}btWHv*8JQ2)NcE;tz|0(qZ>GXPCO8;pKhuiy8hmswTx;{-5H}}&OKXs_x<<x
z>mPW@uV++ycAO#l%`a2)KkFBGH?9N*$rJvyQyC_IR&I#*y_j@@?Z3AJr-5aC%7d%N
zOH38|4)}g*XWq8s>r2i%R`n(ip6$L@(KP!xKjWR^>(LC~&&V_Gc)iY?;oU5G?ws0$
zz|Xs)f8Sn`zEu<G4mox)-A2!!nFn^9j(n;rHC>+3r$)Fa-v?;AJ)^|l*WAEJ-_7WL
z^Q-rPz)#<q_%^>5Z#euUpG&6jx;>NonfpQ(PuA4~6VrX!ihnVao~r9yyLW!w-<>ah
z-fg^Y7H0qacH^r3CLekiy^@m^*x(-SXv)fS=tGB6LjSs^EG~(bhk~vL<YHN`iWqPl
zR_<!B-Nm&^GeMxuU4*f^L^LG$fC5jy2Gh3}S}T?{I7-L`vb?z%8sN*=Y+$p9<Hq9E
l3uZB~C04iy(!k()Mj5lXWsf^wP6rkb44$rjF6*2UngGi|`St(+

literal 0
HcmV?d00001

-- 
GitLab