文章目錄前言這份案例的核心結(jié)構(gòu)完整代碼為什么倍速功能本質(zhì)上是在服務(wù)“觀看節(jié)奏”speeds 數(shù)組為什么特別值得學(xué)setSpeed() 為什么比直接在按鈕里寫賦值更穩(wěn)按鈕高亮為什么能直接體現(xiàn)當(dāng)前狀態(tài)為什么說明區(qū)把每個速度都單獨(dú)寫出來關(guān)鍵代碼單獨(dú)講解State speed: number 1.0ForEach(this.speeds, ...)VideoController.setPlaybackSpeed(speed)小白最容易踩的坑1. 把倍速做成一堆寫死按鈕2. 選中態(tài)不明顯3. 倍速切換只改頁面文字不改真實(shí)播放器這份代碼能怎么改成真實(shí)業(yè)務(wù)動手改一改寫在最后前言倍速播放這件事很多人一開始會把它當(dāng)成一個“附加功能”。有當(dāng)然更好沒有好像也不是不能用。但你只要做過課程視頻、會議回放、長講解內(nèi)容就會很快發(fā)現(xiàn)倍速其實(shí)不是錦上添花而是影響觀看效率的基礎(chǔ)能力。不同用戶看同一段視頻節(jié)奏需求完全可能不一樣。這份案例很適合用來理解倍速選擇器最基礎(chǔ)的設(shè)計方式先把速度選項整理清楚再讓狀態(tài)和按鈕樣式聯(lián)動起來。這份案例的核心結(jié)構(gòu)頁面有兩個關(guān)鍵點(diǎn)Statespeed:number1.0privatespeeds:number[][0.5,0.75,1.0,1.25,1.5,2.0]一個表示當(dāng)前播放速度一個表示所有可選的速度檔位。你可以把這篇看成“倍速控制面板”的最小實(shí)現(xiàn)骨架。完整代碼/** * VideoSpeedSelector - Video 倍速播放 * 演示 Video 的播放速度控制 */import{PRESET_COLORS,generateListItems,PAGE_BG_COLOR,PANEL_BG_COLOR,ACCENT_COLOR,MUTED_TEXT_COLOR}from./typesEntryComponentstruct VideoSpeedSelector{StateisShow:booleantrueStatespeed:number1.0privatespeeds:number[][0.5,0.75,1.0,1.25,1.5,2.0]setSpeed(s:number):void{this.speeds}build(){Column(){if(this.isShow){Scroll(){Column({space:16}){Text(Video 倍速播放).fontSize(16).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)Column(){Column(){Text(視頻播放區(qū)域).fontSize(14).fontColor(#FFFFFF)Text(${this.speed}x 倍速).fontSize(24).fontColor(#4D96FF).fontWeight(FontWeight.Bold).margin({top:8})}.width(100%).height(160).backgroundColor(#333333).borderRadius(10).justifyContent(FlexAlign.Center)}.backgroundColor(PANEL_BG_COLOR).padding(12).borderRadius(12)Column(){Text(播放速度).fontSize(14).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold).margin({bottom:8})Row({space:6}){ForEach(this.speeds,(s:number){Button(${s}x).onClick((){this.setSpeed(s)}).fontSize(13).fontWeight(sthis.speed?FontWeight.Bold:FontWeight.Normal).backgroundColor(sthis.speed?ACCENT_COLOR:#E8E8E8).fontColor(sthis.speed?#FFFFFF:#666666).borderRadius(6)})}.width(100%).justifyContent(FlexAlign.SpaceEvenly)}.backgroundColor(#F0F0FF).padding(12).borderRadius(12)Column({space:6}){Text(倍速場景說明).fontSize(14).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)Text(0.5x - 慢速學(xué)習(xí)/回放).fontSize(12).fontColor(#333333)Text(0.75x - 稍慢播放).fontSize(12).fontColor(#333333)Text(1.0x - 正常速度).fontSize(12).fontColor(#333333)Text(1.25x - 稍快瀏覽).fontSize(12).fontColor(#333333)Text(1.5x - 快速瀏覽).fontSize(12).fontColor(#333333)Text(2.0x - 極速觀看).fontSize(12).fontColor(#333333)Text(API: VideoController.setPlaybackSpeed(speed)).fontSize(11).fontColor(MUTED_TEXT_COLOR).margin({top:4})}.width(100%).backgroundColor(#E8F4FD).padding(14).borderRadius(12)}.width(100%)}}Text(Video 倍速播放 - 用不同速度適配不同觀看節(jié)奏).fontSize(12).fontColor(MUTED_TEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}為什么倍速功能本質(zhì)上是在服務(wù)“觀看節(jié)奏”很多人會把倍速理解成單純的效率功能其實(shí)不止這樣。不同速度背后對應(yīng)的是不同的觀看意圖0.5x是為了看清細(xì)節(jié)1.0x是標(biāo)準(zhǔn)節(jié)奏1.5x或2.0x是為了快速瀏覽重點(diǎn)所以倍速不是一個技術(shù)參數(shù)面板而是用戶掌控內(nèi)容節(jié)奏的入口。speeds數(shù)組為什么特別值得學(xué)先看這段privatespeeds:number[][0.5,0.75,1.0,1.25,1.5,2.0]它把所有檔位統(tǒng)一放進(jìn)一個數(shù)組里再通過ForEach渲染按鈕。這種寫法很干凈原因有兩個倍速選項集中管理后續(xù)增刪方便。視圖不需要重復(fù)寫很多相似按鈕。以后你做分辨率選擇、清晰度選擇、字幕語言切換也可以沿用同樣思路。setSpeed()為什么比直接在按鈕里寫賦值更穩(wěn)案例專門寫了一個方法setSpeed(s:number):void{this.speeds}這看起來像多繞了一步但它是個好習(xí)慣。因為后面你很可能會繼續(xù)在這里追加邏輯比如同步調(diào)用播放器控制器記錄用戶最近一次倍速選擇上報用戶行為埋點(diǎn)處理不支持的速度范圍把更新入口集中起來后續(xù)維護(hù)會輕松很多。按鈕高亮為什么能直接體現(xiàn)當(dāng)前狀態(tài)這部分代碼很有代表性.backgroundColor(sthis.speed?ACCENT_COLOR:#E8E8E8).fontColor(sthis.speed?#FFFFFF:#666666).fontWeight(sthis.speed?FontWeight.Bold:FontWeight.Normal)它用顏色、文字粗細(xì)和前景色一起表達(dá)“當(dāng)前選中的速度”。這類狀態(tài)反饋非常重要因為倍速切換不像播放按鈕那樣只有兩個狀態(tài)它是一組選項必須讓用戶一眼看出當(dāng)前選的是哪一檔。為什么說明區(qū)把每個速度都單獨(dú)寫出來這一塊0.5x-慢速學(xué)習(xí)/回放1.0x-正常速度1.5x-快速瀏覽2.0x-極速觀看表面看是知識說明實(shí)際上是在強(qiáng)調(diào)不同倍速不是隨便配的。倍速檔位應(yīng)該和場景掛鉤而不是只為了“我能調(diào)數(shù)字”。關(guān)鍵代碼單獨(dú)講解State speed: number 1.0當(dāng)前播放器的速度主狀態(tài)默認(rèn)值設(shè)成1.0很合理因為它代表標(biāo)準(zhǔn)播放體驗。ForEach(this.speeds, ...)讓倍速選項數(shù)據(jù)驅(qū)動渲染是這篇最值得借走的結(jié)構(gòu)。VideoController.setPlaybackSpeed(speed)這是后面接入真實(shí)播放器時最關(guān)鍵的 API 方向。界面層把速度選出來播放器控制器去真正生效。小白最容易踩的坑1. 把倍速做成一堆寫死按鈕后期調(diào)整檔位時會很麻煩。2. 選中態(tài)不明顯用戶點(diǎn)了以后看不出當(dāng)前到底是1.25x還是1.5x。3. 倍速切換只改頁面文字不改真實(shí)播放器這樣會出現(xiàn)顯示和實(shí)際播放行為不一致的問題。這份代碼能怎么改成真實(shí)業(yè)務(wù)場景改法在線課程頁默認(rèn)保留1.0x、1.25x、1.5x會議回放頁增強(qiáng)1.75x、2.0x的快速瀏覽能力逐幀講解視頻保留0.5x做慢速學(xué)習(xí)品牌播放器改成彈窗式或底部抽屜式倍速面板動手改一改給當(dāng)前倍速加一句提示文案比如“適合快速瀏覽”。把倍速選擇從橫向按鈕改成列表彈層。保存用戶上一次選擇的速度下次進(jìn)入頁面時恢復(fù)。接入真實(shí)VideoController讓倍速真正作用到視頻播放。寫在最后倍速播放看上去只是一個小開關(guān)集合實(shí)際上它反映的是播放器有沒有把節(jié)奏控制權(quán)真正交給用戶。一個能調(diào)節(jié)觀看速度的視頻頁體驗上往往會成熟很多。如果你現(xiàn)在還在搭基礎(chǔ)播放器這篇建議別只看按鈕樣式。真正值得帶走的是“檔位數(shù)據(jù)化、狀態(tài)集中管理、選中態(tài)明確反饋”這三個思路。