鸿蒙OS 短视频轮播结果及会话控制

种地  论坛元老 | 2025-2-14 14:57:55 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1048|帖子 1048|积分 3144

代码拜见
gitee: https://gitee.com/jimmy_enjoy/hamonyos_video_demo/tree/master
结果


     鸿蒙模拟器-视频轮播结果
  
数据定义

  1. export interface  VideoItem{
  2.   name: string
  3.   url?: string // 网址播放
  4.   video?: string // rawfile 播放
  5.   head: Resource
  6.   index: number
  7. }
复制代码
组件

包含Swiper的父组件

  1. Swiper(this.swiperController) {
  2.           ForEach(videoDataList, (item: VideoItem, index: number) => {
  3.             VideoPlayer({
  4.               curSource: item,
  5.               isPageShow: this.isPageShow,
  6.               curTitle: item.name,
  7.               curIndex: this.curVideoIndex,
  8.               index: index,
  9.               total: this.total,
  10.               onShowPrevious: () => this.showPrevious(index),
  11.               onShowNext: () => this.showNext(index)
  12.             })
  13.           })
  14.         }
  15.         .cachedCount(2)
  16.         // .disableSwipe(true)
  17.         .vertical(true)
  18.         .indicator(false)
  19.         .loop(false)
  20.         .curve(Curve.Ease)
  21.         .duration(300)
  22.         .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
  23.           Logger.info(TAG,
  24.             `onAnimationStart index: ${index},curIndex: ${targetIndex},extraInfo: ${JSON.stringify(extraInfo)}.`);
  25.           this.curVideoIndex = targetIndex;
  26.           // this.curTitle = this.data.getData(this.curVideoIndex)?.name ?? ''
  27.         })
  28.         .width('100%')
  29.         .height('100%')
复制代码
SwiperItem 子组件

  1. Stack({alignContent: Alignment.BottomStart}){
  2.       Column(){
  3.         XComponent({
  4.           id: 'XComponent',
  5.           type: XComponentType.SURFACE,
  6.           controller: this.xComponentController
  7.         })
  8.           .onLoad(async () => {
  9.             // this.xComponentController.setXComponentSurfaceRect({
  10.             //   surfaceWidth: CommonConstants.SURFACE_WIDTH,
  11.             //   surfaceHeight: CommonConstants.SURFACE_HEIGHT
  12.             // })
  13.             this.surfaceID = this.xComponentController.getXComponentSurfaceId()
  14.             hilog.info(0x0000, TAG,
  15.               'surfaceID=' + this.surfaceID + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  16.             this.initAVPlayer()
  17.           })
  18.           .aspectRatio(CommonConstants.ASPECT)
  19.           .width('100%')
  20.           .height(240)
  21.       }
  22.       .justifyContent(FlexAlign.Center)
  23.       .width(CommonConstants.WIDTH_FULL_PERCENT)
  24.       .height(CommonConstants.HEIGHT_FULL_PERCENT)
  25.       .zIndex(CommonConstants.Z_INDEX_BASE)
  27.       // 播放控制，这里需要设置更高的Z-Index，防止事件被最上层的手势监听覆盖
  28.       Column(){
  29.         this.PlayControl()
  30.       }
  31.       .zIndex(CommonConstants.Z_INDEX_MAX)
  32.     }
  33.     .gesture(
  34.     // 监听滑动手势
  35.       PanGesture({direction: PanDirection.Horizontal})
  36.         .onActionStart((event: GestureEvent) => {
  37.           this.isSliderGesture = true
  38.           this.panStartX = event.offsetX
  39.           this.panStartTime = this.currentTime
  40.           this.sliderOnchange(this.panStartTime, SliderChangeMode.Begin)
  41.         })
  42.         .onActionUpdate((event: GestureEvent) => {
  43.           this.isSliderGesture = true
  44.           let panTime = this.panStartTime +
  45.             (this.panStartX + event.offsetX) / this.slideWidth * this.durationTime
  46.           this.panEndTime = Math.min(Math.max(0, panTime), this.durationTime)
  47.           this.sliderOnchange(this.panEndTime, SliderChangeMode.Moving)
  48.         })
  49.         .onActionEnd(() => {
  50.           this.sliderOnchange(this.panEndTime, SliderChangeMode.End)
  51.           this.isSliderGesture = false
  52.         })
  53.     )
  55.   @Builder
  56.   PlayControl(){
  57.     Column(){
  58.     // 滑动时显示，当前时长/总时长
  59.       Row(){
  60.         Text(this.currentStringTime)
  61.           .fontSize($r('app.float.font_size_14'))
  62.           .fontColor(Color.White)
  63.           .opacity($r('app.float.opacity_9'))
  64.           .margin({ left: CommonConstants.TEXT_MARGIN_LEFT })
  65.           .width(CommonConstants.TEXT_LEFT_WIDTH)
  66.           .textAlign(TextAlign.End)
  67.           .zIndex(CommonConstants.SLIDER_INDEX)
  68.         Divider()
  69.           .vertical(true)
  70.           .height($r('app.float.padding_14'))
  71.           .width(CommonConstants.DIVIDER_WIDTH)
  72.           .backgroundBlurStyle(BlurStyle.Regular, { colorMode: ThemeColorMode.LIGHT })
  73.           .color(Color.White)
  74.           .opacity($r('app.float.opacity_9'))
  75.           .margin({ left: $r('app.float.margin_small'), right: $r('app.float.margin_small') })
  76.           .rotate({
  77.             x: CommonConstants.DIVIDER_X,
  78.             y: CommonConstants.DIVIDER_Y,
  79.             z: CommonConstants.DIVIDER_Z,
  80.             centerX: CommonConstants.DIVIDER_CENTER_X,
  81.             centerY: CommonConstants.DIVIDER_CENTER_Y,
  82.             angle: CommonConstants.DIVIDER_ANGLE
  83.           })
  84.         Text(this.durationStringTime)
  85.           .fontSize($r('app.float.font_size_14'))
  86.           .fontColor(Color.White)
  87.           .margin({ right: CommonConstants.TEXT_MARGIN_LEFT })
  88.           .width(CommonConstants.TEXT_LEFT_WIDTH)
  89.           .textAlign(TextAlign.Start)
  90.           .opacity($r('app.float.opacity_4'))
  91.           .zIndex(CommonConstants.SLIDER_INDEX)
  92.       }
  93.       .margin({ bottom: $r('app.float.margin_small') })
  94.       .alignItems(VerticalAlign.Center)
  95.       .opacity(this.isTimeDisplay)
  97.       Column() {
  98.         Row() {
  99.           Image(this.isPlaying ? $r('sys.media.ohos_ic_public_pause') :
  100.           $r('app.media.ic_video_menu_play'))
  101.             .width($r('app.float.size_24'))
  102.             .height($r('app.float.size_24'))
  103.             .fillColor(Color.White)
  104.             .margin({ right: $r('app.float.margin_small') })
  105.             .onClick(() => {
  106.               this.iconOnclick();
  107.             })
  108.             .visibility(
  109.               // this.isFloatWindow || this.isFullLandscapeScreen || this.isFullScreen ||
  110.             this.isSliderDragging ? Visibility.None : Visibility.Visible)
  111.           Slider({
  112.             value: this.isSliderGesture ? this.panEndTime : this.currentTime,
  113.             step: CommonConstants.SLIDER_STEP,
  114.             min: CommonConstants.SLIDER_MIN,
  115.             max: this.durationTime,
  116.             style: this.sliderStyle
  117.           })
  118.             .id('video_slider')
  119.             .height(this.isSliderDragging ? $r('app.float.side_width') : $r('app.float.size_24'))
  120.             .trackColor($r('app.color.white_opacity_1_color'))
  121.             .showSteps(false)
  122.             .blockSize({ width: this.blockSize, height: this.blockSize })
  123.             .blockColor($r('sys.color.background_primary'))
  124.             .layoutWeight(1)
  125.             .trackThickness(this.trackThicknessSize)
  126.             .trackBorderRadius(CommonConstants.TRACK_BORDER_RADIUS)
  127.             .selectedBorderRadius(CommonConstants.TRACK_BORDER_RADIUS)
  128.             .zIndex(CommonConstants.SLIDER_INDEX)
  129.             .onAreaChange(() => {
  130.               let videoSlider: componentUtils.ComponentInfo = componentUtils.getRectangleById('video_slider');
  131.               this.slideWidth = px2vp(videoSlider.size.width);
  132.               // this.offsetY = px2vp(videoSlider.localOffset.y);
  133.               // this.beginX = px2vp(videoSlider.localOffset.x);
  134.             })
  135.             .onChange((value: number, mode: SliderChangeMode) => {
  136.               this.sliderOnchange(value, mode);
  137.             })
  138.         }
  139.         .width(CommonConstants.WIDTH_FULL_PERCENT)
  140.       }
  142.     }
  143.   }
复制代码
AVPlayer

创建AVPlayer

  1.   async initAVPlayer(){
  2.     hilog.info(0x0000, TAG, 'createAVPlayer begin')
  3.     media.createAVPlayer().then((video: media.AVPlayer) => {
  4.       if(video !== null){
  5.         Logger.info(TAG, 'initAVPlayer video')
  6.         this.avPlayer = video
  7.         this.avPlayerStart(this.curSource, this.avPlayer)
  8.         this.setAVPlayerCallback(this.avPlayer)
  9.       }
  10.     }).catch((error: BusinessError) => {
  11.       Logger.error(TAG, `AVPlayer catchCallback, error message:${error.message}`);
  12.     })
  13.   }
复制代码
注册AVPlayer回调函数

  1.   setAVPlayerCallback(avPlayer: media.AVPlayer){
  2.           // 更新视频当前时间状态
  3.     avPlayer.on('timeUpdate', (time: number) => {
  4.       if(time > this.currentTime * 1000){
  5.         animateTo({duration: 1000, curve: Curve.Linear}, () => {
  6.           this.currentTime = Math.floor(time / 1000)
  7.         })
  8.       } else {
  9.         this.currentTime = Math.floor(time / 1000)
  10.       }
  11.       this.currentStringTime = secondToTime(Math.floor(time / CommonConstants.SECOND_TO_MS))
  12.     })
  14.         // 错误监听
  15.     avPlayer.on('error', (err: BusinessError) => {
  16.       hilog.error(0x0000, TAG, `Invoke avPlayer failed, code is ${err.code}, message is ${err.message}` +
  17.         `----state:${avPlayer.state} this.curIndex:${this.curIndex} this.index: ${this.index}`);
  18.       avPlayer.reset();
  19.     })
  20.     this.setAVPlayerStateListen(avPlayer)
  21.   }
  23.   setAVPlayerStateListen(avPlayer: media.AVPlayer){
  24.           // 监听状态变化
  25.     avPlayer.on('stateChange', async (state: string) => {
  26.       Logger.info(TAG, 'avplayer stateChange')
  27.       switch (state){
  28.         case 'idle': // call reset into idle state
  29.           hilog.info(0x0000, TAG, 'AVPlayer state idle called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}`)
  30.           break
  31.         case 'initialized':
  32.           hilog.info(0x0000, TAG,
  33.             'AVPlayer state initialized called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  34.           avPlayer.surfaceId = this.surfaceID;
  35.           avPlayer.prepare();
  36.           break;
  37.         case 'prepared':
  38.           avPlayer.audioInterruptMode = audio.InterruptMode.INDEPENDENT_MODE;
  39.           hilog.info(0x0000, TAG,
  40.             'AVPlayer state prepared called.' +
  41.               ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  42.           this.flag = true;
  43.           avPlayer.loop = true;
  44.           this.duration = avPlayer.duration;
  45.           this.durationTime = Math.floor(this.duration / CommonConstants.SECOND_TO_MS);
  46.           this.durationStringTime = secondToTime(this.durationTime);
  47.           if (this.curIndex === this.index) {
  48.             this.playVideo()
  49.             // this.firstFlag = false;
  50.           }
  51.           break;
  52.         case 'completed':
  53.           hilog.info(0x0000, TAG,
  54.             'AVPlayer state completed called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  55.           this.isPlaying = false;
  56.           break;
  57.         case 'playing':
  58.           this.isPlaying = true;
  59.           hilog.info(0x0000, TAG,
  60.             'AVPlayer state playing called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}` +
  61.               ', source=' + this.curSource);
  62.           break;
  63.         case 'paused':
  64.           this.isPlaying = false
  65.           Logger.info(TAG,
  66.             'AVPlayer state paused called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  67.           break;
  68.         case 'stopped':
  69.           Logger.info(TAG,
  70.             'AVPlayer state stopped called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  71.           break;
  72.         case 'released':
  73.           Logger.info(TAG,
  74.             'AVPlayer state released called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  75.           break;
  76.         case 'error':
  77.           Logger.info(TAG, 'AVPlayer state error called' + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  78.           // avPlayer.reset();
  80.           break;
  81.         default:
  82.           Logger.info(TAG,
  83.             'AVPlayer state unknown called.' + ` this.curIndex:${this.curIndex} this.index:${this.index}`);
  84.           break;
  85.       }
  86.     })
  87.   }
复制代码
AVSession会话控制



  • 需要申请长时使命
  • 在通知栏可以由系统视频控制器举行视频的控制，包括进度条滑动、快进、快退、暂停、下一首、上一首。
后台长时使命申请

需要在module.json中注册
  1.       {
  2.         "name": "ohos.permission.KEEP_BACKGROUND_RUNNING",
  3.         "reason": "$string:reason_background",
  4.         "usedScene": {
  5.           "abilities": [
  6.             "EntryAbility"
  7.           ],
  8.           "when": "always"
  9.         }
  10.       }
复制代码
  1. export class BackgroundTaskManager{
  3.   public static startContinuousTask(context?: common.UIAbilityContext): void{
  4.     if(!context) return
  5.     let wantAgentInfo: wantAgent.WantAgentInfo = {
  6.       wants: [
  7.         {
  8.           bundleName: context.abilityInfo.bundleName,
  9.           abilityName: context.abilityInfo.name
  10.         }
  11.       ],
  12.       actionType: wantAgent.OperationType.START_ABILITY,
  13.       requestCode: 0,
  14.       actionFlags: [wantAgent.WantAgentFlags.UPDATE_PRESENT_FLAG]
  15.     }
  17.     wantAgent.getWantAgent(wantAgentInfo).then((wantAgentObj) => {
  18.       try {
  19.       // 启动后台任务
  20.         backgroundTaskManager.startBackgroundRunning(context, backgroundTaskManager.BackgroundMode.AUDIO_PLAYBACK,
  21.           wantAgentObj).then(() => {
  22.           Logger.info(TAG, 'startBackgroundRunning succeeded');
  23.         }).catch((err: BusinessError) => {
  24.           Logger.error(TAG, `startBackgroundRunning failed Cause:  ${JSON.stringify(err)}`);
  25.         })
  26.       }catch (error){
  27.         Logger.error(TAG, `Operation startBackgroundRunning failed. code is ${error.code} message is ${error.message}`);
  28.       }
  29.     })
  30.   }
  32.   public static stopContinuousTask(context?: common.UIAbilityContext){
  33.     try {
  34.       if (!context) {
  35.         return
  36.       }
  37.       backgroundTaskManager.stopBackgroundRunning(context).then(() => {
  38.         Logger.info(TAG, 'stopBackgroundRunning succeeded');
  39.       }).catch((err: BusinessError) => {
  40.         Logger.error(TAG, `stopBackgroundRunning failed Cause:  ${JSON.stringify(err)}`);
  41.       });
  42.     } catch (error) {
  43.       Logger.error(TAG, `stopBackgroundRunning failed. code is ${error.code} message is ${error.message}`);
  44.     }
  45.   }
  46. }
复制代码
AVSession

AVSession 在整个应用中，全局共享实例。
创建

  1. export class AvSessionController{
  2.   private static instance: AvSessionController | null
  3.   private context: common.UIAbilityContext | undefined = undefined;
  4.   private avSession: avSession.AVSession | undefined = undefined;
  5.   private avSessionMetadata: avSession.AVMetadata | undefined = undefined;
  7.   private constructor() {
  8.     this.initAvSession()
  9.   }
  11.   public getAvSession() {
  12.     return this.avSession;
  13.   }
  15.   public getAvSessionMetadata() {
  16.     return this.avSessionMetadata;
  17.   }
  19.   public static getInstance(): AvSessionController{
  20.     if(!AvSessionController.instance){
  21.       AvSessionController.instance = new AvSessionController()
  22.     }
  23.     return AvSessionController.instance
  24.   }
  26. // 初始化
  27.   public initAvSession(){
  28.     this.context = AppStorage.get('context')
  29.     if(!this.context){
  30.       Logger.info(TAG, `session create failed : conext is undefined`)
  31.       return
  32.     }
  33.     avSession.createAVSession(this.context, "SHORT_AUDIO_SESSION", 'video').then(async (avSession) => {
  34.       this.avSession = avSession
  35.       Logger.info(TAG, `session create successed : sessionId : ${this.avSession.sessionId}`);
  36.       // 启动后台长任务
  37.       BackgroundTaskManager.startContinuousTask(this.context);
  38.       // 设置点击后启动的activity
  39.       this.setLaunchAbility();
  40.       this.avSession.activate();
  41.     })
  42.   }
  43.   
  44.   private setLaunchAbility(){
  45.     if(!this.context) return
  46.     const wantAgentInfo: wantAgent.WantAgentInfo = {
  47.       wants: [
  48.         {
  49.           bundleName: this.context.abilityInfo.bundleName,
  50.           abilityName: this.context.abilityInfo.name
  51.         }
  52.       ],
  53.       actionType: wantAgent.OperationType.START_ABILITIES,
  54.       requestCode: 0,
  55.       actionFlags: [wantAgent.WantAgentFlags.UPDATE_PRESENT_FLAG]
  56.     }
  57.     wantAgent.getWantAgent(wantAgentInfo).then((agent) => {
  58.       if(this.avSession) this.avSession.setLaunchAbility(agent)
  59.     })
  60.   }
复制代码
在AVPlayer中结合AVSession

初始化

  1.   async initAVPlayer(){
  2.     hilog.info(0x0000, TAG, 'createAVPlayer begin')
  3.     media.createAVPlayer().then((video: media.AVPlayer) => {
  4.       if(video !== null){
  5.         // ...
  6.         if(this.curIndex === this.curSource.index){
  7.                 // 设置媒体显示信息
  8.           this.avSessionController.setAVMetadata(this.curSource, 0)
  9.         }
  10.         this.setAvSessionListener()
  11.       }
  12.     }).catch((error: BusinessError) => {
  13.       Logger.error(TAG, `AVPlayer catchCallback, error message:${error.message}`);
  14.     })
  15.   }
  16.         // 设置会话控制的监听，进行相应媒体播放器调整
  17.   public async setAvSessionListener(){
  18.     if(!this.avSessionController) return
  19.     this.avSessionController.getAvSession()?.on('play', () => this.sessionPlayCallback())
  20.     this.avSessionController.getAvSession()?.on('pause', () => this.sessionPauseCallback())
  21.     this.avSessionController.getAvSession()?.on('stop', () => this.sessionStopCallback())
  22.     this.avSessionController.getAvSession()?.on('fastForward',
  23.       (time?: number) => this.sessionFastForwardCallback(time))
  24.     this.avSessionController.getAvSession()?.on('rewind', (time?: number) =>                 this.sessionRewindCallback(time))
  25.     this.avSessionController.getAvSession()?.on('seek', (seekTime: number) => this.sessionSeekCallback(seekTime))
  26.     if(this.index < this.total - 1){
  27.       this.avSessionController.getAvSession()?.on('playNext', () => this.sessionPlayNextCallback())
  28.     }else {
  29.       this.avSessionController.getAvSession()?.off('playNext')
  30.     }
  31.     if(this.index > 0){
  32.       this.avSessionController.getAvSession()?.on('playPrevious', () => this.sessionPlayPreviousCallback())
  33.     }else {
  34.       this.avSessionController.getAvSession()?.off('playPrevious')
  35.     }
  36.   }
复制代码
上一首和下一首实现

通过父容器传递的showNext 和 showPrevious，具体为通过SwiperController实现切换
  1.   showNext(index: number): void{
  2.     if(this.swiperController && index < this.total - 1){
  3.         this.swiperController.changeIndex(index + 1, true)
  4.         getContext(this).eventHub.emit('videoShow', index + 1)
  5.     }
  6.   }
  8.   showPrevious(index: number): void{
  9.     if(this.swiperController && index > 0){
  10.       this.swiperController.changeIndex(index - 1, true)
  11.       getContext(this).eventHub.emit('videoShow', index + 1)
  12.     }
  13.   }
复制代码
重要公共方法实现

  1. // 播放视频
  2.   playVideo(){
  3.     if(this.avPlayer && this.curIndex === this.index){
  4.       if(this.avPlayer.state != AVPlayerState.PREPARED && this.avPlayer.state != AVPlayerState.PAUSED &&
  5.       this.avPlayer.state != AVPlayerState.COMPLETED){
  6.         return
  7.       }
  8.       // 重置会话监听状态
  9.       this.setAvSessionListener()
  10.       this.avSessionController.setAVMetadata(this.curSource, this.duration)
  11.       this.updateIsPlay(true)
  12.       this.avPlayer.play((err: BusinessError) => {
  13.         if(err){
  14.           this.updateIsPlay(false)
  15.           Logger.error(TAG, `playVideo failed, code is ${err.code}, message is ${err.message}`);
  16.         } else {
  17.           Logger.info(TAG, `playVideo success , this.curIndex:${this.curIndex}`);
  18.         }
  19.       })
  20.     }
  21.   }
  23. // 更新播放状态
  24.   updateIsPlay(isPlay: boolean){
  25.     if(this.curIndex !== this.curSource.index) return
  26.     this.isPlaying = isPlay
  27.     // 更新会话控制中，媒体播放状态。
  28.     this.avSessionController.setAvSessionPlayState({
  29.       state: isPlay ? avSession.PlaybackState.PLAYBACK_STATE_PLAY : avSession.PlaybackState.PLAYBACK_STATE_PAUSE,
  30.       position: {
  31.         elapsedTime: this.currentTime * 1000, // 已播放时长
  32.         updateTime: new Date().getTime() // 更新时间
  33.       },
  34.       duration: this.duration
  35.     })
  36.   }
复制代码
注


  • 完备代码
  • 可以用LazyForEach结合Swiper的cachecount实现懒加载与缓存。
  • 这里没有实现屏幕旋转的环境。
  • 更完备的示例可以参考 鸿蒙官方示例

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

种地

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表