HarmonyOS 鸿蒙Next:在一个页面时轮播组件里子元素正在播放视频,点击会让视频放大铺满并且继续播放,退出放大还能继续播放
HarmonyOS 鸿蒙Next:在一个页面时轮播组件里子元素正在播放视频,点击会让视频放大铺满并且继续播放,退出放大还能继续播放
整体大框架可以参考下面的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系统中,实现页面轮播组件内视频播放的点击放大及继续播放功能,通常需要以下步骤:
-
视频播放控制:确保视频子元素使用的是支持播放控制的组件,如
VideoPlayer
。在视频元素上绑定点击事件,用于触发视频放大逻辑。 -
页面跳转或弹窗:点击事件触发后,可以通过页面跳转或弹窗(如
Dialog
或Popup
)来展示放大的视频。跳转或弹窗中同样使用VideoPlayer
组件,并传递当前视频的播放状态(如当前播放时间、是否静音等)。 -
视频播放状态同步:在放大视频播放页面或弹窗中,根据传递的播放状态初始化
VideoPlayer
,确保视频从点击时的位置继续播放。 -
退出放大:在放大视频播放页面或弹窗中,提供返回或关闭按钮,用于退出放大模式。退出时,将
VideoPlayer
的播放状态(如当前播放时间)传回原页面,并更新原页面中的视频元素状态。 -
无缝切换:确保视频在放大和缩小过程中无缝切换,避免播放中断或卡顿。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html