• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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 */
15import router from '@ohos.router'
16import mediaQuery from '@ohos.mediaquery';
17
18@Entry
19@Component
20export struct FullPage {
21  @State fullParams: object = {}
22  @State fullSrc: Resource = $rawfile('video_1.mp4')
23  @State isHidden: boolean = false
24  @State maxValue: number = 0 // 底部时间条的总时长
25  @State nowValue: number = 0 // 底部时间条的当前秒数
26  @State playTime: number = 0 // 上个页面传过来的播放时间
27  @State isPhone: boolean = false
28  portraitFunc = null
29  listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)');
30  fullVideoController: VideoController = new VideoController()
31
32  onPortrait(mediaQueryResult) {
33    this.isPhone = !mediaQueryResult.matches
34  }
35
36  aboutToAppear() {
37    this.fullParams = router.getParams()
38    this.fullSrc = this.fullParams['videoSrc']
39    this.playTime = this.fullParams['videoTime']
40
41    this.portraitFunc = this.onPortrait.bind(this) // bind current js instance
42    this.listenerIsPhone.on('change', this.portraitFunc)
43  }
44
45  changTime(times: any) {
46    if (times <= 0) {
47      return '00:00';
48    } else {
49      let mm = Math.floor(times / 60);
50      let ss = Math.floor(times % 60);
51      return (mm < 10 ? '0' + mm : mm) + ':' + (ss < 10 ? '0' + ss : ss);
52    }
53  }
54
55  build() {
56    Scroll() {
57      Column() {
58        Stack() {
59          Video({
60            src: this.fullSrc,
61            controller: this.fullVideoController
62          })
63            .width('100%')
64            .height('100%')
65            .autoPlay(true)
66            .loop(true)
67            .controls(false)
68            .objectFit(ImageFit.Contain)
69            .onPause(() => {
70              this.isHidden = true
71            })
72            .onFullscreenChange((e) => {
73              this.isHidden = false
74            })
75            .onStart(() => {
76              this.isHidden = false
77            })
78            .onPrepared((e) => {
79              this.fullVideoController.setCurrentTime(this.playTime)
80              this.maxValue = e.duration
81            })
82            .onUpdate((e) => {
83              this.nowValue = e.time
84            })
85            .onClick(() => {
86              this.fullVideoController.pause();
87            })
88
89          // 暂停按钮
90          if(this.isHidden){
91            Column() {
92              Image($r('app.media.play'))
93                .width(78).height(78)
94                .onClick(() => {
95                  this.fullVideoController.start()
96                  this.isHidden = !this.isHidden
97                })
98            }
99            .position({ x: this.isPhone ? '42%' : '47%', y: '45%' })
100          }
101        }.width('100%').height('100%')
102
103        // 返回上一页按钮
104        Column() {
105          Image($r('app.media.back'))
106            .width(42).height(42)
107            .onClick(() => {
108              router.back()
109            })
110        }
111        .position({ x: '5%', y: '5%' })
112
113        // 分享按钮
114        Column() {
115          Image($r('app.media.share'))
116            .width(42).height(42)
117        }
118        .position({ x: this.isPhone ? '86%' : '95%', y: '5%' })
119
120        // 底部时间条
121        Row() {
122          Text(this.changTime(this.nowValue.toFixed(0))).fontSize(18).fontColor(Color.White)
123          Slider({
124            value: this.nowValue,
125            min: 0,
126            max: this.maxValue,
127            style: SliderStyle.OutSet
128          })
129            .width('75%')
130            .blockColor(Color.White)
131            .trackColor('#cccccc')
132            .selectedColor('#E92F4F')
133            .showSteps(false)
134            .onChange((value: number, mode: SliderChangeMode) => {
135              this.nowValue = value
136              this.fullVideoController.setCurrentTime(value)
137              console.info('value:' + value + 'mode:' + mode.toString())
138            })
139          Text(this.changTime(this.maxValue.toFixed(0))).fontSize(18).fontColor(Color.White)
140        }
141        .padding({ top: 50 })
142        .width('100%')
143        .position({ x: this.isPhone ? '3%' : '10%', y: '88%' })
144      }
145      .width('100%')
146      .height('100%')
147      .backgroundColor('#000000')
148    }
149  }
150}