用swiper包裹一个video组件实现一个类似于短视频的功能

用swiper包裹一个video组件实现一个类似于短视频的功能。

HarmonyOS
2024-11-13 11:52:00
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

如下是一个短视频的核心代码,可以参考看看,里面可以看到在aboutToAppear方法进行了媒体资源的加载。

import { router } from '@kit.ArkUI'; 
import { mediaquery } from '@kit.ArkUI'; 
import { LiveInfoDataModel } from '../model/LiveDataModel'; 
import { LiveData } from '../mock/LiveData'; 
import { Live } from '../net/Utils'; 
import { CommentPage } from './CommentPage'; 
import { Callback } from '@kit.BasicServicesKit'; 
 
class LiveInfoResponse { 
  code: number = 0; 
  data: Array<Info> = []; 
} 
 
class Info { 
  uri: string = ''; 
  name: string = ''; 
  peopleNum: string = ''; 
} 
 
@Entry 
@Component 
export struct LivePage { 
  @State active: number = 0; 
  @State liveInfoList: Array<LiveInfoDataModel> = []; 
  @State mData: LiveInfoResponse = { 
    code: 0, 
    data: [{ uri: '', name: '', peopleNum: '' }] 
  } 
  @State isPhone: boolean = false; 
  portraitFunc: Callback<mediaquery.MediaQueryResult> = (mediaQueryResult: mediaquery.MediaQueryResult): void => { 
    this.onPortrait(mediaQueryResult); 
  }; 
  listenerIsPhone = mediaquery.matchMediaSync('(orientation:landscape)'); 
 
  onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { 
    this.isPhone = !mediaQueryResult.matches; 
  } 
 
  async aboutToAppear() { 
    //媒体资源加载 
    LiveData.forEach((item) => { 
      this.liveInfoList.push(new LiveInfoDataModel(item)); 
    }) 
    this.listenerIsPhone.on('change', this.portraitFunc); 
 
    try { 
      let a = await Live(); 
      this.mData = JSON.parse(a.result.toString()); 
      this.liveInfoList = this.mData.data; 
    } catch (error) { 
      console.log('http resquest is fail:' + error); 
    } 
  } 
 
  build() { 
    Scroll() { 
      Column() { 
        Swiper() { 
          ForEach(this.liveInfoList, (item: LiveInfoDataModel, index) => { 
            Stack() { 
              if (this.active === index) { 
                Video({ src: item.uri }) 
                  .autoPlay(true) 
                  .loop(false) 
                  .controls(false) 
                  .objectFit(ImageFit.Contain) 
                  .width('100%') 
                  .height('100%') 
              } 
 
              Row() { 
                Row() { 
                  Row() { 
                    Image($r('app.media.live_author')) 
                      .width(38) 
                      .height(38) 
 
                    Column() { 
                      Text(item.name) 
                        .fontSize(16) 
                        .fontColor('#ffffff') 
                      Row() { 
                        Text(item.peopleNum) 
                          .id(item.peopleNum as string) 
                          .fontSize(12) 
                          .fontColor('#ffffff') 
                        Text($r('app.string.watch')) 
                          .fontSize(12) 
                          .fontColor('#ffffff') 
                      } 
                    } 
                    .alignItems(HorizontalAlign.Start) 
                    .padding({ left: '3%' }) 
                  } 
 
                  Image($r('app.media.live_attention')) 
                    .height(35) 
                    .width(59) 
                } 
                .justifyContent(FlexAlign.SpaceBetween) 
                .padding({ left: this.isPhone ? '2%' : '1%', right: this.isPhone ? '2%' : '1%' }) 
                .width(this.isPhone ? '57.2%' : '30%') 
                .aspectRatio(this.isPhone ? 5.15 : 7) 
                .backgroundColor('rgba(0,0,0,0.40)') 
                .borderRadius(this.isPhone ? 26 : 36) 
 
                Column() { 
                  Image($r('app.media.live_share')) 
                    .width(42) 
                    .height(42) 
                } 
                .margin({ left: this.isPhone ? '12%' : '49%' }) 
 
                Column() { 
                  Image($r('app.media.live_close')) 
                    .id('close') 
                    .width(42) 
                    .height(42) 
                    .onClick(() => { 
                      router.back(); 
                    }) 
                } 
                .margin({ left: '4%' }) 
              } 
              .position({ x: '4.4%', y: '5.1%' }) 
 
              Column() { 
                CommentPage() 
 
              } 
              .position({ x: '4.4%', y: this.isPhone ? '72%' : '62%' }) 
            } 
            .backgroundColor('#D8D8D8') 
            .width('100%') 
            .height('100%') 
          }) 
        } 
        .width('100%') 
        .height('100%') 
        .loop(false) 
        .indicator(false) 
        .vertical(true) 
        .onChange((index: number) => { 
          this.active = index; 
        }) 
      } 
    } 
  } 
}

​下面参考链接就是短视频的示例demo:​https://gitee.com/harmonyos_samples/video-show

分享
微博
QQ
微信
回复
2024-11-13 16:16:19
相关问题
想要实现一个图片裁剪功能
339浏览 • 1回复 待解决
鸿蒙-如何实现类似于HOME键功能
10756浏览 • 2回复 待解决
实现一个虚线边框组件
533浏览 • 1回复 待解决
如何实现一个折叠组件
960浏览 • 1回复 待解决
如何实现一个仪表盘样式组件
402浏览 • 1回复 待解决
如何实现一个组件不停地旋转
2204浏览 • 1回复 待解决
如何实现一个带动画弹窗?
458浏览 • 1回复 待解决
求告知如何全屏播放一个视频
461浏览 • 1回复 待解决
如何指定一个组件宽高比例?
232浏览 • 1回复 待解决