基于ArkTS语言的OpenHarmony APP应用开发：多媒体管理2 原创

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
1.

controller: VideoController = new VideoController()
1.

start(): void
1.

pause(): void
1.

stop(): void
1.

exitFullscreen()
1.

setCurrentTime(value: number)
1.

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]
1.
2.
3.
4.
5.

import { MainPage } from "@ohos/video-component"

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Column() {
      MainPage()
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)');
1.

async aboutToAppear() {
  this.portraitFunc = this.onPortrait.bind(this) // 绑定
  this.listenerIsPhone.on('change', this.portraitFunc)
}
1.
2.
3.
4.

Swiper() {
  // 视频界面，调用自定义的VideoPage.ets
  VideoPage({ isStart: $openFirst })
  // 模拟Swiper数据
  LazyForEach(new MyDataSource(this.arrSwiper), (item) => {
    Text(item.toString())
      .width('100%')
      .aspectRatio(1.12)
      .backgroundColor(0xAFEEEE)
      .textAlign(TextAlign.Center)
      .fontSize(20)
  }, item => item)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

Column() {
  SmallVideo({ isHidden: $isHidden, isCancel: $isCancel })
}
.width('100%')
.alignItems(HorizontalAlign.End)
1.
2.
3.
4.
5.

Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  Image($r('app.media.broadcast'))
    .objectFit(ImageFit.Contain)
    .width('24')
    .height('24')
    .margin({ top: 10 })
  Text($r("app.string.in_live"))
    .fontSize(10)
    .fontColor('#000000')
    .margin({ top: 5 })
}
.width(58)
.height(58)
.backgroundColor('#FFFFFF')
.border({ color: 'rgba(0,0,0,0.2)' })
.borderRadius(16)
.borderWidth(1.3)
.key('directVideo')
.onClick(() => {
  router.push({ url: 'pages/LivePage' })
})
.position({ x: '86%', y: '20%' })
}.width('100%').height('100%').backgroundColor(0xDCDCDC)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

@State videoSrc: Resource = $rawfile('video_4.mp4')   // 视频播放文件
detailVideoController: VideoController = new VideoController()  // 设置视频播放的控制器，比如控制视频开始，暂停等
1.
2.

Video({
  src: this.videoSrc,                       // 设置视频文件地址
  controller: this.detailVideoController,   // 设置视频播放的控制器，比如控制视频开始，暂停等
})
1.
2.
3.
4.

.onClick(() => {                          // 单击按钮事件
  if (this.isPlayClick) {                 // 判断play按钮是否用过，没有用过，进入这层
    if (this.firstClick) {                // 第一次点击视频开始播放，再次点击进入全屏
      this.detailVideoController.start()  // Video开始播放
      this.isHidden = !this.isHidden
      this.isStart = true
      this.firstClick = !this.firstClick
    } else {
      // 页面跳转
      router.push({ url: 'pages/FullPage', params: { videoSrc: this.videoSrc, videoTime: this.updateTime } })
    }
  } else {
    // 页面跳转
    router.push({ url: 'pages/FullPage', params: { videoSrc: this.videoSrc, videoTime: this.updateTime } })
  }
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

@State smallVideoSrc: Resource = $rawfile('video_4.mp4')        // 视频数据源文件
smallVideoController: VideoController = new VideoController()   // 设置视频控制器
1.
2.

Video({
  src: this.smallVideoSrc,                // 视频播放源的路径，支持本地视频路径和网络路径
  controller: this.smallVideoController   // 设置视频控制器
})
  .controls(false)
  .autoPlay(true)                         // 设置自动播放
  .muted(true)                            // 设置静音
  .onFinish(() => {                       // 播放结束时触发该事件
    this.isHidden = false
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)');
1.

async aboutToAppear() {
  this.portraitFunc = this.onPortrait.bind(this) // bind current js instance
  this.listenerIsPhone.on('change', this.portraitFunc)

  try {
    let a = await Live()  // http连接请求
    this.mData = JSON.parse(a.result.toString())
    this.liveInfoList = this.mData.data
  } catch (error) {
    console.log('http resquest is fail:' + error)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

ForEach(this.liveInfoList, (item, index) => {
  Stack() {
    if (this.active == index) {
      Video({ src: item.uri })
        .autoPlay(true)
        .loop(false)
        .controls(false)
        .objectFit(ImageFit.Contain)
        .width('100%')
        .height('100%')
    }
    ......
  }
  ......
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)')
fullVideoController: VideoController = new VideoController()
1.
2.

aboutToAppear() {
  this.fullParams = router.getParams()
  this.fullSrc = this.fullParams['videoSrc']
  this.playTime = this.fullParams['videoTime']

  this.portraitFunc = this.onPortrait.bind(this) // bind current js instance
  this.listenerIsPhone.on('change', this.portraitFunc)
}
1.
2.
3.
4.
5.
6.
7.
8.

Video({
  src: this.fullSrc,
  controller: this.fullVideoController
})
  .width('100%')
  .height('100%')
  .autoPlay(true)
  .loop(true)
  .controls(false)
  .objectFit(ImageFit.Contain)
  .onPause(() => {
    this.isHidden = true
  })
  .onFullscreenChange((e) => {
    this.isHidden = false
  })
  .onStart(() => {
    this.isHidden = false
  })
  .onPrepared((e) => {
    this.fullVideoController.setCurrentTime(this.playTime)
    this.maxValue = e.duration
  })
  .onUpdate((e) => {
    this.nowValue = e.time
  })
  .onClick(() => {
    this.fullVideoController.pause();
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.