Автор «Nuts», эксперт Huawei Cloud Enjoy, автор по контракту InfoQ, эксперт Runhe Software KOL, энтузиаст электроники Хунмэн MVP, блоггер-эксперт 51CTO, эксперт блога Alibaba Cloud, один из участников проекта с открытым исходным кодом gin-vue-admin

Поскольку в проектах часто используются видеоресурсы, в конце этого руководства создается простой проигрыватель.

Video

Поскольку использование локальных видеофайлов повлияет на размер пакета приложения, наши видеофайлы обычно поступают с сетевых адресов, и нам необходимо добавить разрешение на использование сети ohos.permission.INTERNET в «способностях», соответствующих config или Module.json.

"abilities":[
  {
    "permissions": ["ohos.permission.INTERNET"],
  }
]

При использовании объект VideoController может управлять одним или несколькими видео.

//Объект VideoController может управлять одним или несколькими видео.
controller: VideoController = new VideoController();

интерфейс

declare interface VideoOptions {
 
  src?: string | Resource;

  currentProgressRate?: number | string | PlaybackSpeed;
 
  previewUri?: string | PixelMap | Resource;

  controller?: VideoController;
}

image-20220813095416631

из которых толькоsrc( Путь к источнику воспроизведения видео ) Этот параметр является обязательным.

• Поддержка локального пути видео и сетевого пути.
• Поддерживает размещение медиа-ресурсов в папке видео или необработанных файлов в разделе ресурсов.
• Поддерживает префикс пути dataability:// для доступа к путям видео, предоставляемым через Dataability.

currentProgressRate:number Скорость воспроизведения видео увеличена вдвое, поддерживаются версии 0,75, 1,0, 1,25, 1,75, 2,0.

previewUri:string Путь к изображению предварительного просмотра можно использовать в качестве обложки, когда видео не воспроизводится.

controller:VideoController контроллер. Объект VideoController может управлять одним или несколькими видео Если вам нужно управлять воспроизведением видео через код.、Пауза и подождите,Вы можете установить этот параметр для компонента Видео.,Затем управляйте статусом воспроизведения видео через следующий интерфейс контроллера:

Здесь мне для пояснения нужно разделить PlaybackSpeed ​​и VideoController.

Скорость воспроизведения Тип Описание Интерфейс

declare enum PlaybackSpeed {

  Speed_Forward_0_75_X,

 
  Speed_Forward_1_00_X,

  Speed_Forward_1_25_X,


  Speed_Forward_1_75_X,

  Speed_Forward_2_00_X,
}

VideoController

Объект VideoController может управлять одним или несколькими видео.

• start(): void Начать игру.
• пауза(): void Приостановить воспроизведение.
• stop(): void Остановить воспроизведение.
• setCurrentTime(value: number, seekMode: SeekMode)Укажите позицию прогресса воспроизведения видео и укажите режим перехода.valueЭто прогресс,seekModeЭто режим прыжка
• requestFullscreen(): boolean() Запрашивает полноэкранное воспроизведение, true для горизонтального экрана, false для вертикального экрана.
• exitFullscreen() : void Выход из полноэкранного режима.

Здесь мне также нужно отделить setCurrentTime

setCurrentTime8+

setCurrentTime(value: number, seekMode: SeekMode)

Укажите позицию прогресса воспроизведения видео и укажите режим перехода.

• параметр Имя параметра Тип параметра Обязательно Значение по умолчанию параметрописыватьvaluenumberда-Позиция прогресса воспроизведения видео。seekModeSeekModeда-Режим прыжка。
• SeekMode8+ Тип интерфейса Описание имяописыватьPreviousKeyframeПерейти к предыдущему последнему ключевому кадру。NextKeyframeПерейти к следующему последнему ключевому кадру。ClosestKeyframeПерейти к самому последнему ключевому кадру。AccurateТочный прыжок,Независимо от того, ключевой это кадр или нет.

declare enum SeekMode {

  PreviousKeyframe,


  NextKeyframe,


  ClosestKeyframe,

 
  Accurate,
}

Видео собственность

отключен звук (отключить звук), autoPlay (автоматическое воспроизведение), элементы управления (панель управления), objectFit (режим отображения), цикл (зацикливание воспроизведения). Среди них, если для параметра objectFit установлено значение ImageFit.Cover, весь контейнер будет покрыт.

Подробное введение

.muted(boolean) Значение по умолчанию ложь Заглушать или нет.

.autoPlay(boolean) Значение по умолчанию ложь Будет ли играть автоматически.

.controls(boolean) Значение по умолчанию true Отображается ли панель управления воспроизведением видео.

.loop(boolean) Будет ли одно видео воспроизводиться циклично.

.objectFit(ImageFit) Значение по умолчаниюCover Установите режим отображения видео. ImageFit имеет следующие значения перечисления на выбор

Описание перечисления ImageFit

событие

onStart() => void Это событие срабатывает во время игры。

onPause() => void Это событие срабатывает при паузе。

onFinish() => void Это событие срабатывает, когда воспроизведение заканчивается.

onError() => void Это срабатывает, когда воспроизведение не удается。

onFullscreenChange(event?: { fullscreen: boolean }) => void) Это срабатывает, когда видео входит и выходит из полноэкранного режима.

onPrepared(event?: { duration: number }) => void Это срабатывает, когда видео готово.,Вы можете получить продолжительность видео через продолжительность,Единица измерения — секунды (с).

onSeeking(event?: { time: number }) => void Информация о времени сообщается при работе с индикатором выполнения, единица измерения — с.

onSeeked(event?: { time: number }) => void После завершения работы индикатора выполнения операции информация о времени воспроизведения отображается в секундах.

onUpdate(event?: { time: number }) => void Это срабатывает, когда изменяется ход воспроизведения.,Единица измерения: с.,Интервал обновления составляет 250 мс.

лист

Полный пример

@Entry
@Component
struct Index {
  @State message: string = «Предварительный просмотр видео»
  @State previewUris: Resource = $r('app.media.openharmony'); //предварительный просмотр обложки
  controller: VideoController = new VideoController();
  @State currentProgressRate: number = 1
  @State muted: boolean = false
  @State autoPlay: boolean = true
  @State controls: boolean = true
  @State startStatus: boolean = true
  @State loop: boolean = true

  aboutToAppear() {
    this.controller.requestFullscreen(true)
    this.controller.start()
  }

  build() {

    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Video({
        src: $r('app.media.video'),
        previewUri: this.previewUris, // Видео обложка
        currentProgressRate: this.currentProgressRate, // Скорость воспроизведения видео
        controller: this.controller,

      })
        .muted(this.muted) // Отключить ли звук
        .autoPlay(this.autoPlay) // Играть ли автоматически
        .controls(this.controls) // Отображается ли панель управления, управляющая воспроизведением видео
        .objectFit(ImageFit.Contain) // Режим отображения видео
        .loop(this.loop) // Зацикливать ли одно видео
        .height("60%")
        .onStart(() => {
          // Это событие срабатывает во время игры
          console.info('onStart');
        })
        .onPause(() => {
          // Это событие срабатывает при паузе
          console.info('onPause');
        })
        .onFinish(() => {
          console.info('onFinish');

        })
        .onError(() => {
          // Это срабатывает, когда воспроизведение не удается
          console.error('onError');
        })
        .onFullscreenChange((e) => {
          console.info('Это срабатывает, когда видео переходит в полноэкранный режим и выходит из него:' + e.fullscreen)
        })
        .onPrepared((e) => {
          console.info('Это срабатывает, когда видео готово:' + e.duration)
        })
        .onSeeking((e) => {
          console.info('Сообщать информацию о времени при работе с индикатором выполнения:' + e.time)
        })
        .onSeeked((e) => {
          console.info('После завершения работы индикатора выполнения операции сообщите информацию о времени воспроизведения:' + e.time)
        })
        .onUpdate((e) => {
          console.info('Это срабатывает, когда изменяется ход воспроизведения:' + e.time)
        })
      Row({}) {
        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
          Кнопка («играть»)
            .onClick(() => {
              this.controller.start()
            }).margin(8)
          Кнопка («Пауза»)
            .onClick(() => {
              this.controller.pause()
            })
          Кнопка("Петля")
            .onClick(() => {
              this.loop=!this.loop
            })
          Кнопка("2x скорость")
            .onClick(() => {
              this.currentProgressRate=2
            })
          Кнопка («Отключить звук»)
            .onClick(() => {
              this.muted=!this.muted
            })

          Кнопка («Стоп»)
            .onClick(() => {
              this.controller.stop()
            })

          Кнопка("Воспроизвести в полноэкранном режиме")
            .onClick(() => {
              this.controller.requestFullscreen(true)
            })
          Кнопка("Выйти из полноэкранного режима")
            .onClick(() => {
              this.controller.exitFullscreen()
            }).margin(8)

          Button("Отображается ли панель управления")
            .onClick(() => {
              this.controls = !this.controls
            }).margin(8)

          Кнопка("Указать ход воспроизведения видео")
            .onClick(() => {
              this.controller.setCurrentTime(9)
            })
        }
      }
    }
    .width('100%').height('100%')
  }
}