前言：

各位同學(xué)有段時(shí)間沒有見面 因?yàn)橐恢焙苊λ跃蜎]有去更新博客。最近有在學(xué)習(xí)這個(gè)鴻蒙的ark ui開發(fā) 因?yàn)轼櫭刹皇前l(fā)布了一個(gè)鴻蒙next的測試版本 明年會啟動純血鴻蒙應(yīng)用 所以我就想提前給大家寫一些博客文章

概述

在手機(jī)、平板或是智慧屏這些終端設(shè)備上，媒體功能可以算作是我們最常用的場景之一。無論是實(shí)現(xiàn)音頻的播放、錄制、采集，還是視頻的播放、切換、循環(huán)，亦或是相機(jī)的預(yù)覽、拍照等功能，媒體組件都是必不可少的。以視頻功能為例，在應(yīng)用開發(fā)過程中，我們需要通過ArkUI提供的Video組件為應(yīng)用增加基礎(chǔ)的視頻播放功能。借助Video組件，我們可以實(shí)現(xiàn)視頻的播放功能并控制其播放狀態(tài)。常見的視頻播放場景包括觀看網(wǎng)絡(luò)上的較為流行的短視頻，也包括查看我們存儲在本地的視頻內(nèi)容

效果圖

image.png

image.png

具體實(shí)現(xiàn)：

• 1 添加網(wǎng)絡(luò)權(quán)限

在module.json5 里面添加網(wǎng)絡(luò)訪問權(quán)限

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

image.png

如果你是播放本地視頻那么可以不添加這個(gè) 為了嚴(yán)謹(jǐn)我這邊就提一下

我們要播放視頻需要用到 video 組件

video 組件里面參數(shù)說明

其他屬性說明 ：
.muted(false) //是否靜音。默認(rèn)值：false
.controls(true)//不顯示控制欄
.autoPlay(false) // 手動點(diǎn)擊播放
.loop(false) // 關(guān)閉循環(huán)播放
.objectFit(ImageFit.Cover) //設(shè)置視頻顯示模式。默認(rèn)值：Cover

具體代碼

@Entry
@Component
struct Index {


  @Styles
  customMargin() {
    .margin({ left: 20, right: 20 })
  }

  @State message: string = 'Hello World'
  private controller: VideoController = new VideoController();
  build() {
    Row() {
      Column() {
        Video({
          src: $rawfile('video1.mp4'),
          previewUri: $r('app.media.image3'),
          controller: this.controller
        })
          .muted(false) //是否靜音。默認(rèn)值：false
          .controls(true)//不顯示控制欄
          .autoPlay(false) // 手動點(diǎn)擊播放
          .loop(false) // 關(guān)閉循環(huán)播放
          .objectFit(ImageFit.Cover) //設(shè)置視頻顯示模式。默認(rèn)值：Cover
          .customMargin()// 樣式
          .height(200) // 高度
      }
      .width('100%')
    }
    .height('100%')
  }
}

最后總結(jié)

鴻蒙的視頻播放和安卓還有iOS .里面差不多都有現(xiàn)成的組件使用, 但是底層還是有ffmpeg 的支持。 我們作為上層開發(fā)者只需要熟練掌握api使用即可做出來 一個(gè)實(shí)用的播放器 app, 還有很多細(xì)節(jié) 由于篇幅有限我就展開講了 我們下一期再見 最后呢 希望我都文章能幫助到各位同學(xué)工作和學(xué)習(xí) 如果你覺得文章還不錯(cuò)麻煩給我三連 關(guān)注點(diǎn)贊和轉(zhuǎn)發(fā) 謝謝