
說明:
該組件從API version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。
接口
Video(value: {src?: string, currentProgressRate?: number | string, previewUri?: string, controller?: VideoController})




示例代碼:
// @ts-nocheck
@Entry
@Component
struct VideoExample {
@State src: Resource = $rawfile('video1.mp4')
@State currentProgressRate: number = 1
@State muted: boolean = false
@State autoPlay: boolean = false
@State controls: boolean = true
@State startStaus: boolean = true
myVideoController: VideoController = new VideoController()
build() {
Column({ space: 10 }) {
Video({
src: this.src,
previewUri: '../../../../resources/rawfile/video1.mp4',
currentProgressRate: this.currentProgressRate,
controller: this.myVideoController
})
.muted(this.muted)
.autoPlay(this.autoPlay)
.controls(this.controls)
.objectFit(ImageFit.Contain)
.loop(true)
.width(320)
.height(200)
.onStart(() => {
console.info('onStart')
})
.onPause(() => {
console.info('onPause')
})
.onFinish(() => {
console.info('onFinish')
})
.onError(() => {
console.info('onError')
})
.onFullscreenChange((e) => {
console.info('onFullscreenChange:' + e.fullscreen)
})
.onPrepared((e) => {
console.info('onPrepared:' + e.duration)
})
.onSeeking((e) => {
console.info('onSeeking' + e.time)
})
.onSeeked((e) => {
console.info('onSeeked' + e.time)
})
.onUpdate((e) => {
console.info('onUpdate' + e.time)
})
Row() {
Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems:ItemAlign.Start }) {
Button("src")
.onClick(() => {
if (this.src == $rawfile('video1.mp4')) {
this.src = $rawfile('video2.mp4')
} else {
this.src = $rawfile('video1.mp4')
}
})
.margin({bottom:10})
Button("controls")
.onClick(() => {
this.controls = !this.controls
})
Button("play")
.onClick(() => {
this.myVideoController.start()
})
Button("pause")
.onClick(() => {
this.myVideoController.pause()
})
Button("stop")
.onClick(() => {
this.myVideoController.stop()
})
.margin({bottom:10})
Button("requestFullscreen")
.onClick(() => {
this.myVideoController.requestFullscreen(true)
})
Button("exitFullscreen")
.onClick(() => {
this.myVideoController.exitFullscreen()
})
Button("setCurrentTime")
.onClick(() => {
this.myVideoController.setCurrentTime(9)
})
}.padding(15)
}
}.width('100%')
}
}
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
Video
+關注
關注
0文章
196瀏覽量
45726 -
組件
+關注
關注
1文章
529瀏覽量
18285 -
HarmonyOS
+關注
關注
79文章
2052瀏覽量
32091
發布評論請先 登錄
相關推薦
熱點推薦
基于eTS的HamronyOS應用開發
隨著HarmonyOS 3.0 Beta版的發布,API Version 8新增了大批JS/eTS API接口,相信很多開發者已經迫不及待想體驗基于eTS的HamronyOS應用

HarmonyOS應用開發-eTS-Navigator組件練習
說明:路由容器組件,提供路由跳轉能力。接口:Navigator(value?: {target: string, type?: NavigationType})接口參數:屬性:案例:創建新的ets
發表于 12-21 09:36
HarmonyOS應用開發-eTS文件說明
1. 目錄結構FA應用的ets模塊(entry/src/main)的典型開發目錄結構如下:目錄結構中文件分類如下:·.ets結尾的ETS(Extended TypeScript)文件,
發表于 12-23 10:40
HarmonyOS應用開發資料(Svg組件)
1、HarmonyOS應用開發-Svg組件circle 該組件從API version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。2、
發表于 03-17 14:49
HarmonyOS應用開發資料(eTS文件/資源)
1、HarmonyOS應用開發-eTS文件說明1. 目錄結構FA應用的ets模塊(entry/src/main)的典型開發目錄結構如下:2、
發表于 03-17 15:04
100行代碼實現HarmonyOS“畫圖”應用,eTS開發走起!
本期我們給大家帶來的是“畫圖”應用開發者Rick的分享,希望能給你的HarmonyOS開發之旅帶來啟發~
介紹
2021年的華為開發者大會(HDC2021)上,
發表于 03-30 14:28
基于HarmonyOS ets開發的簡易視頻播放器
。使用組件,具體細節和更詳細的屬性,讀者自己在學習中摸索。通過相信本次的學習,你能有所收獲。希望視頻能幫助你快速了解Harmony的ET,開發的播放器制作學習。本篇最后會貼上參考原文鏈接。最初的演講列表
發表于 04-18 10:41
HarmonyOS應用開發-ets-video組件案例
說明:該組件從API version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。接口Video(value: {src?: string
發表于 05-26 10:37
HarmonyOS應用開發-ets-video組件案例
說明:該組件從API version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。接口Video(value: {src?: string
發表于 05-27 14:51
想學習eTS開發?教你開發一款IQ-EQ測試應用
開發者Mack基于HarmonyOS的ArkUI框架開發的IQ- EQ測試應用。此應用采用eTS語言開發,包含啟動頁面、測試入口頁面、答題頁
發表于 06-23 12:01
基于eTS高效開發HarmonyOS課程類應用
隨著HarmonyOS 3.0 Beta版的發布,API Version 8新增了大批JS/eTS API接口,相信很多開發者已經迫不及待想體驗基于eTS的HamronyOS應用
發表于 07-15 11:33
HarmonyOS/OpenHarmony應用開發-Web組件開發體驗
;) }}}*附件:HarmonyOSOpenHarmony應用開發-Web組件開發體驗.docx示例效果:參考文檔:https
發表于 12-12 15:14
評論