[[359804]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

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

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

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

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

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

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

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

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

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

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

俏皮一點(diǎn)，可以稱之為按Z軸排列，3D排列等等。

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

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

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

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

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

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

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

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

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

那么你自然可以想到，video組件本身的尺寸、視頻填充方式(拉伸、平鋪、居中)、是否一開始就自動(dòng)播放、是否顯示播放橫條(暫停、進(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個(gè)屬性，object-fit是指視頻的填充方式，cover是指拉伸視頻適應(yīng)容器大小。

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

[[359807]]

沒想到一個(gè)簡(jiǎn)單的視頻展示，居然有這么多花樣，這時(shí)候我好想打開抖音研究幾分鐘...

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

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

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

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

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

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

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

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

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

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

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

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