• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import router from '@ohos.router'
17
18@Component
19export struct VideoPage {
20  @State videoSrc: Resource = $r('app.media.videos')
21  @State controls: boolean = false
22  @State isFull: boolean = false
23  @State isPause: boolean = true
24  @State isPlayClick: boolean = true
25  @State firstClick: boolean = true
26  @State isHidden: boolean = true
27  @Link isStart: boolean
28  @Consume('playTime') updateTime: number
29  detailVideoController: VideoController = new VideoController()
30
31  build() {
32    Column() {
33      Stack() {
34        Video({
35          src: this.videoSrc,
36          controller: this.detailVideoController,
37        })
38          .width('100%')
39          .backgroundColor(this.isHidden ? '#ffffff' : '#000000')
40          .aspectRatio(1.12)
41          .controls(this.controls)
42          .objectFit(ImageFit.Contain)
43          .onUpdate((e) => {
44            this.updateTime = e.time
45          })
46          .onPrepared((e) => {
47            console.info('VideoPage_onPrepared:' + e.duration)
48          })
49          .onClick(() => {
50            if (this.isPlayClick) { // 判断play按钮是否用过，没有用过，进入这层
51              if (this.firstClick) { // 第一次点击视频开始播放，再次点击进入全屏
52                this.detailVideoController.start()
53                this.isHidden = !this.isHidden
54                this.isStart = true
55                this.firstClick = !this.firstClick
56              } else {
57                router.replaceUrl({ url: 'pages/FullPage', params: { videoSrc: this.videoSrc,
58                  videoTime: this.updateTime } });
59              }
60            } else {
61              router.replaceUrl({ url: 'pages/FullPage', params: { videoSrc: this.videoSrc,
62                videoTime: this.updateTime } });
63            }
64          })
65          .onFinish(() => {
66            this.isHidden = true;
67            this.isStart = false;
68            this.updateTime = 0;
69          })
70
71        // 空白层预览
72        if (this.isHidden) {
73          Column() {
74            Image($r('app.media.previewImg'))
75              .id('previewImg')
76              .objectFit(ImageFit.Contain)
77          }
78          .width('100%')
79          .aspectRatio(1.12)
80          .backgroundColor('#ffffff')
81        }
82
83        // 视频上的play图标
84        if (this.isHidden) {
85          Column() {
86            Image($r('app.media.play'))
87              .id('playBtn')
88              .width(76).height(76)
89              .onClick(() => {
90                this.detailVideoController.start()
91                this.isHidden = !this.isHidden
92                this.isStart = true
93                this.isPlayClick = false
94              })
95          }
96        }
97      }
98      .width('100%')
99      .height('100%')
100    }
101  }
102}