2020征文-手機零基礎鴻蒙開發4如何播放一個全屏視頻(JS版)
https://harmonyos.51cto.com/#zz
簡單的互動我們實現后，接下來來到整體了，先把視頻播放實現了。
跟Java的實現方法相比，JS版本的簡直簡單到逆天。
轉到index.hml，你會看到首頁的結構，其實分為2個部分：
一個容器元素(div)，一個文本元素(text)。一個頁面只有一個根元素，可以包含若干子元素，子元素還可以有一個或若干子元素，形成一個樹根型的結構。
class字段是兩個元素的樣式修飾，比如改變尺寸、顏色、邊框、內部子元素排列方式等等。
首先，我們來看下抖音首屏的UI結構：
不考慮上下刷多個視頻列表，我們只考慮一個頁面只有一個視頻播放器的場景，那么這個根容器，應該具備以下特性：
其中的元素，層疊排列的，僅不是水平也不是豎直排列。播放按鈕在視頻播放器之上， 視頻標題、右側”社交欄“其實也在播放器之上。
俏皮一點，可以稱之為按Z軸排列，3D排列等等。
那么，鴻蒙提供的JS組件中，有哪個容器可以堪此重任呢? 一番查找后，發現有一個可以完美勝任，快取酒來給這位英雄組件開路!
刪除index.hml中所有代碼，打上stack，其實打st就有語法提示，直接選就行：
然后給stack加上樣式，既然是根容器，那就占滿整個屏幕，代碼就是在style加入寬度和高度的描述(百分比)：
這時候我們需要導入一個短視頻，那么放在什么位置呢?
在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>
一個視頻播放器所需的屬性都寫完了，so easy，現在看看能不能播放吧!開一個Previewer試試：
馬薩卡?阿西吧，居然不能播放?預覽器又一次拉胯，開模擬器吧：
可想而知，遠程模擬器不給力，依然放不出來。不可能，我二弟天下無敵，上真機!我并不想炫耀的，逼我出招。
接上我刷好的的P40(其實是華為給的測試機)。
模擬器列表中的127.0.0.1:8888的是遠程模擬器，選擇第一個真機運行：
效果非常完美，當然你看到這里可能沒辦法像我這樣能真機運行。這個話題等大家真機都刷上咱們有機會再聊。 接著更新，各位繼續關注哈!
https://harmonyos.51cto.com/#zz
