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@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 = (mediaQueryResult) => this.onPortrait(mediaQueryResult); 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 .id('fullVideo') 70 .onPause(() => { 71 this.isHidden = true 72 }) 73 .onFullscreenChange((e) => { 74 this.isHidden = false 75 }) 76 .onStart(() => { 77 this.isHidden = false 78 }) 79 .onPrepared((e) => { 80 this.fullVideoController.setCurrentTime(this.playTime) 81 this.maxValue = e.duration 82 }) 83 .onUpdate((e) => { 84 this.nowValue = e.time 85 }) 86 .onClick(() => { 87 this.fullVideoController.pause(); 88 }) 89 90 // 暂停按钮 91 if (this.isHidden) { 92 Column() { 93 Image($r('app.media.play')) 94 .id('fullPlayBtn') 95 .width(78).height(78) 96 .onClick(() => { 97 this.fullVideoController.start() 98 this.isHidden = !this.isHidden 99 }) 100 } 101 .position({ x: this.isPhone ? '42%' : '47%', y: '45%' }) 102 } 103 }.width('100%').height('100%') 104 105 // 返回上一页按钮 106 Column() { 107 Image($r('app.media.back')) 108 .id('backBtn') 109 .width(42).height(42) 110 .onClick(() => { 111 router.replaceUrl({ url: 'pages/Index' }); 112 }) 113 } 114 .position({ x: '5%', y: '5%' }) 115 116 // 分享按钮 117 Column() { 118 Image($r('app.media.share')) 119 .width(42).height(42) 120 } 121 .position({ x: this.isPhone ? '86%' : '95%', y: '5%' }) 122 123 // 底部时间条 124 Row() { 125 Text(this.changTime(this.nowValue.toFixed(0))).fontSize(18).fontColor(Color.White) 126 Slider({ 127 value: this.nowValue, 128 min: 0, 129 max: this.maxValue, 130 style: SliderStyle.OutSet 131 }) 132 .width('75%') 133 .blockColor(Color.White) 134 .trackColor('#cccccc') 135 .selectedColor('#E92F4F') 136 .showSteps(false) 137 .onChange((value: number, mode: SliderChangeMode) => { 138 this.nowValue = value 139 this.fullVideoController.setCurrentTime(value) 140 console.info('value:' + value + 'mode:' + mode.toString()) 141 }) 142 Text(this.changTime(this.maxValue.toFixed(0))).fontSize(18).fontColor(Color.White) 143 } 144 .padding({ top: 50 }) 145 .width('100%') 146 .position({ x: this.isPhone ? '3%' : '10%', y: '88%' }) 147 } 148 .width('100%') 149 .height('100%') 150 .backgroundColor('#000000') 151 } 152 } 153}