HarmonyOS 列表视频滚动播放

列表视频播放是在每个ListItem里面创建一个Video组件吗?在列表中实现视频全屏切换?

HarmonyOS
21h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

​如果使用list做列表视频播放的话,是在每个ListItem里面创建一个Video组件,在列表中实现视频全屏切换。但有以下几点注意:

1、视频列表滑动中,如果刚完整进入可视区域,则进行播放,其他不在可视区域的停止播放listitem添加如下2个属性即可onEnterActionArea,onExitActionArea

参考文档链接​https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-listitem-V5

2、列表视频全屏,可以设置视频组件占住宽高100%,可能会出现状态栏问题,通过设置沉浸式状态栏可优化:​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-0000001820435461-V5#section202484117114

如果觉得list实现有难度,推荐使用swiper滑动,代码可参考:​https://gitee.com/harmonyos/codelabs/tree/master/SwiperArkTS

1、关于list这两个属性的使用可以参考文档:​https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-listitem-V5#%E7%A4%BA%E4%BE%8B2​。

2、计算可见item可以参考以下demo:​

// xxx.ets  
@Entry  
@Component  
struct ListExample {  
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  
  @State str:string = '完全不可见'  
  build() {  
    Column() {  
      Text(this.str)  
        .fontSize(24)  
      List({ space: 20, initialIndex: 0 }) {  
        ForEach(this.arr, (item: number,index:number) => {  
          ListItem() {  
            if(index==2){  
              Text('' + item)  
                .width('100%').height(100).fontSize(16)  
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)  
                // 组件可见区域变化事件  
                .onVisibleAreaChange([0,1],(isVisible: boolean, currentRatio: number)=>{  
                  if(currentRatio==0){  
                    this.str = '完全不可见'  
                  }else if (currentRatio==1){  
                    this.str = '完全可见'  
                  }else {  
                    this.str = '部分可见'  
                  }  
                })  
            }else {  
              Text('' + item)  
                .width('100%').height(100).fontSize(16)  
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)  
            }  
          }  
        }, (item: string) => item)  
      }  
      .listDirection(Axis.Vertical) // 排列方向  
      .scrollBar(BarState.Off)  
      .friction(0.6)  
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线  
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring  
      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {  
        console.info('first' + firstIndex)  
        console.info('last' + lastIndex)  
        console.info('center' + centerIndex)  
      })  
      .onScroll((scrollOffset: number, scrollState: ScrollState) => {  
        console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)  
      })  
      .width('90%')  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor(0xDCDCDC)  
    .padding({ top: 5 })  
  }  
}
分享
微博
QQ
微信
回复
15h前
相关问题
HarmonyOS 列表视频全屏播放实现
238浏览 • 1回复 待解决
HarmonyOS AvPlayer视频播放速度问题
267浏览 • 1回复 待解决
HarmonyOS webview如何播放本地沙箱视频
988浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
1035浏览 • 1回复 待解决
视频和直播播放HarmonyOS最佳实践
403浏览 • 1回复 待解决
AVPlayer实现视频播放
677浏览 • 1回复 待解决
avplayer播放视频demo
1165浏览 • 1回复 待解决
SDK问题,视频播放替代?
93浏览 • 1回复 待解决
HarmonyOS Media kit支持常见云视频播放
243浏览 • 1回复 待解决
创建多个视频组件无法播放
2049浏览 • 1回复 待解决
视频列表的不规则排列
537浏览 • 1回复 待解决
视频播放黑屏,下面是代码
9336浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人