需求背景：在正在進(jìn)行的項(xiàng)目中需要對(duì)手機(jī)上的游戲視頻進(jìn)行展示，問題在于視頻有橫屏和豎屏兩種，這取決于你咋玩這款游戲（比如：吃雞、王者農(nóng)藥的錄屏是橫屏視頻；跳一跳、神廟逃亡等則為豎屏視頻）

如下圖：橫屏則不需要處理，width，height 100%打滿即可，豎屏就比較雞肋了，需要首先拿到width、height的值進(jìn)行比較，然后定位video（背景圖片設(shè)置filter: blur(3px)）

解決方案：

html

css

利用異步的方式返回width和height，好處就是可以你需要的任何地方隨時(shí)調(diào)用，解耦！

以上代碼的意思大概就是：點(diǎn)擊playicon標(biāo)簽，通過異步函數(shù)獲取傳入視頻鏈接的尺寸進(jìn)行判斷

如果width < height? 就判為豎屏、否則為橫屏

參考鏈接：https://stackoverflow.com/questions/4129102/html5-video-dimensions