目錄：
#2020徵文-手機# 零基礎鴻蒙開發1 - IDE安裝
#2020徵文-手機# 零基礎鴻蒙開發2-第一個世界版Hello World
#2020徵文-手機# 零基礎鴻蒙開發3 - 第一個頁面互動（JS版）

簡單的互動我們實現後，接下來來到整體了，先把視訊播放實現了。

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

轉到index.hml，你會看到首頁的結構，其實分為2個部分：

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

class欄位是兩個元素的樣式修飾，比如改變尺寸、顏色、邊框、內部子元素排列方式等等。

首先，我們來看下抖音首屏的UI結構：

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

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

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

那麼，鴻蒙提供的JS元件中，有哪個容器可以堪此重任呢？ 一番查詢後，發現有一個可以完美勝任，快取酒來給這位英雄元件開路！

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

然後給stack加上樣式，既然是根容器，那就佔滿整個螢幕，程式碼就是在style加入寬度和高度的描述（百分比）：

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

這時候我們需要匯入一個短視訊，那麼放在什麼位置呢？

在JS目錄上右擊選單，New - Directory，新建一個Res目錄用以存放工程所需資原始檔，比如視訊、圖片、音樂等等

在其下再新建一個子目錄video，把我準備好的視訊mp4檔案（你自己可以找一個或多個任何能播放的短視訊檔案）拖入video目錄中，效果如圖：

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

現在Stack之中，加入一個Video元件，這名字非常直觀哈。

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

那麼你自然可以想到，video元件本身的尺寸、視訊填充方式（拉伸、平鋪、居中）、是否一開始就自動播放、是否顯示播放橫條（暫停、進度條、全屏），所以有以下程式碼：

<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是指拉伸視訊適應容器大小。

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

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

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

不要忘了，視訊源，視訊播放啥很關鍵。加上Video元件的src屬性，完整Video程式碼如下：

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

檢視更多章節

作者:yagamis
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社群https://harmonyos.51cto.com/#bky