HarmonyOS 鸿蒙Next:在一个页面时轮播组件里子元素正在播放视频,点击会让视频放大铺满并且继续播放,退出放大还能继续播放

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next:在一个页面时轮播组件里子元素正在播放视频,点击会让视频放大铺满并且继续播放,退出放大还能继续播放

在一个页面时轮播组件里子元素正在播放视频,点击会让视频放大铺满并且继续播放,退出放大还能继续播放交互场景过于复杂

2 回复

整体大框架可以参考下面的demo

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct ListExample {
 private arr: number[] = [0, 1, 2]
 [@State](/user/State) isFull: boolean = false

 build() {
   Column() {
     List({ space: 0, initialIndex: 0 }) {
       ForEach(this.arr, (item: number) => {
         ListItem() {
     
           if (item == 1) {

             Text('我是轮播视图行')
               .width('100%').height(350).fontSize(16)
               .textAlign(TextAlign.Center).backgroundColor(Color.Yellow).onClick(() => {
               this.isFull = !this.isFull
             }) //用于测试切换全屏状态

           } else {

             if (this.isFull) {
               if (item == 0) {
                 Text('我是全屏上部分视图行')
                   .width('100%')
                   .height(250)
                   .fontSize(16)
                   .textAlign(TextAlign.Center)
                   .backgroundColor(Color.White)
                   .fontColor(Color.Black)
               } else if (item == 2) {
                 Text('我是全屏下部分视图行')
                   .width('100%')
                   .height(100)
                   .fontSize(16)
                   .textAlign(TextAlign.Center)
                   .backgroundColor(Color.White)
                   .fontColor(Color.Black)
               }
             } else {
               if (item == 0) {
                 Text('上部分视图行')
                   .width('100%')
                   .height(200)
                   .fontSize(16)
                   .textAlign(TextAlign.Center)
                   .backgroundColor(Color.Red)
                   .fontColor(Color.White)
               } else if (item == 2) {
                 Text('下部分视图行')
                   .width('100%')
                   .height(200)
                   .fontSize(16)
                   .textAlign(TextAlign.Center)
                   .backgroundColor(Color.Green)
                   .fontColor(Color.White)
               }

             }

           }

           }
       }, (item: string) => item)
     }
     .listDirection(Axis.Vertical) // 排列方向
     .scrollBar(BarState.Off)
     .friction(0.6)
     .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
     .width('100%')
   }
   .width('100%')
   .height('100%')
   .backgroundColor(0xDCDCDC)
 }
}

更多关于HarmonyOS 鸿蒙Next:在一个页面时轮播组件里子元素正在播放视频,点击会让视频放大铺满并且继续播放,退出放大还能继续播放的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,实现页面轮播组件内视频播放的点击放大及继续播放功能,通常需要以下步骤:

  1. 视频播放控制:确保视频子元素使用的是支持播放控制的组件,如VideoPlayer。在视频元素上绑定点击事件,用于触发视频放大逻辑。

  2. 页面跳转或弹窗:点击事件触发后,可以通过页面跳转或弹窗(如DialogPopup)来展示放大的视频。跳转或弹窗中同样使用VideoPlayer组件,并传递当前视频的播放状态(如当前播放时间、是否静音等)。

  3. 视频播放状态同步:在放大视频播放页面或弹窗中,根据传递的播放状态初始化VideoPlayer,确保视频从点击时的位置继续播放。

  4. 退出放大:在放大视频播放页面或弹窗中,提供返回或关闭按钮,用于退出放大模式。退出时,将VideoPlayer的播放状态(如当前播放时间)传回原页面,并更新原页面中的视频元素状态。

  5. 无缝切换:确保视频在放大和缩小过程中无缝切换,避免播放中断或卡顿。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!