[[359804]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

簡單的互動我們實現(xiàn)后，接下來來到整體了，先把視頻播放實現(xiàn)了。

跟Java的實現(xiàn)方法相比，JS版本的簡直簡單到逆天。

轉(zhuǎn)到index.hml，你會看到首頁的結(jié)構(gòu)，其實分為2個部分：

一個容器元素(div)，一個文本元素(text)。一個頁面只有一個根元素，可以包含若干子元素，子元素還可以有一個或若干子元素，形成一個樹根型的結(jié)構(gòu)。

class字段是兩個元素的樣式修飾，比如改變尺寸、顏色、邊框、內(nèi)部子元素排列方式等等。

首先，我們來看下抖音首屏的UI結(jié)構(gòu)：

不考慮上下刷多個視頻列表，我們只考慮一個頁面只有一個視頻播放器的場景，那么這個根容器，應(yīng)該具備以下特性：

其中的元素，層疊排列的，僅不是水平也不是豎直排列。播放按鈕在視頻播放器之上， 視頻標(biāo)題、右側(cè)”社交欄“其實也在播放器之上。

俏皮一點，可以稱之為按Z軸排列，3D排列等等。

那么，鴻蒙提供的JS組件中，有哪個容器可以堪此重任呢? 一番查找后，發(fā)現(xiàn)有一個可以完美勝任，快取酒來給這位英雄組件開路!

刪除index.hml中所有代碼，打上stack，其實打st就有語法提示，直接選就行：

然后給stack加上樣式，既然是根容器，那就占滿整個屏幕，代碼就是在style加入寬度和高度的描述(百分比)：

這時候我們需要導(dǎo)入一個短視頻，那么放在什么位置呢?

在JS目錄上右擊菜單，New - Directory，新建一個Res目錄用以存放工程所需資源文件，比如視頻、圖片、音樂等等

在其下再新建一個子目錄video，把我準(zhǔn)備好的視頻mp4文件(你自己可以找一個或多個任何能播放的短視頻文件)拖入video目錄中，效果如圖：

工程中加入視頻后，就可以用一個新角色來播放了。

現(xiàn)在Stack之中，加入一個Video組件，這名字非常直觀哈。

<stack style="width: 100%; height: 100%;"> 
    <video> 
         
    </video> 
</stack> 

那么你自然可以想到，video組件本身的尺寸、視頻填充方式(拉伸、平鋪、居中)、是否一開始就自動播放、是否顯示播放橫條(暫停、進(jìn)度條、全屏)，所以有以下代碼：

<video style="height: 100%;width: 100%; object-fit: cover;" autoplay="true" controls="false"> 
     
</video> 

這其中，style="height: 100%;width: 100%; object-fit: cover;" ， 樣式style中有3個屬性，object-fit是指視頻的填充方式，cover是指拉伸視頻適應(yīng)容器大小。

autoplay="true" 指一開始就自動播放，controls="false"不顯示自帶的播放控制條。

[[359807]]

沒想到一個簡單的視頻展示，居然有這么多花樣，這時候我好想打開抖音研究幾分鐘...

10分鐘過去了... 短視頻為什么能讓人這么上癮，可能你看這個教程后做一個類似的App最大的價值了，真的讓人上癮啊

不要忘了，視頻源，視頻播放啥很關(guān)鍵。加上Video組件的src屬性，完整Video代碼如下：

<video style="height: 100%;width: 100%; object-fit: cover;" autoplay="true" controls="false" src="/res/video/高崖跳水.mp4"> 
     
</video> 

一個視頻播放器所需的屬性都寫完了，so easy，現(xiàn)在看看能不能播放吧!開一個Previewer試試：

馬薩卡?阿西吧，居然不能播放?預(yù)覽器又一次拉胯，開模擬器吧：

可想而知，遠(yuǎn)程模擬器不給力，依然放不出來。不可能，我二弟天下無敵，上真機(jī)!我并不想炫耀的，逼我出招。

接上我刷好的的P40(其實是華為給的測試機(jī))。

模擬器列表中的127.0.0.1:8888的是遠(yuǎn)程模擬器，選擇第一個真機(jī)運行：

效果非常完美，當(dāng)然你看到這里可能沒辦法像我這樣能真機(jī)運行。這個話題等大家真機(jī)都刷上咱們有機(jī)會再聊。 接著更新，各位繼續(xù)關(guān)注哈!

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz