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