video標籤寬高那些事兒

2021-09-24 07:45:43 字數 642 閱讀 5367

今天開發小哥哥找我調樣式,一看,video,心裡有點慌啊,之前沒有接觸video標籤,小哥哥說給video設定了和左邊一樣的高度,但就是比矮一截,好吧,調了兩下高度,調不動,哎呀回去研究一下吧,然後就回來自己測試了一下。

以下內容摘抄自w3school中對video標籤的介紹

提示:可以在開始標籤和結束標籤之間放置文字內容,這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。

"movie.ogg" controls="controls">

您的瀏覽器不支援 video 標籤。

複製**

屬性如下所示

接著背景說,回來自己寫了個頁面還原了一下場景,給video設定了高度,發現和一樣高,並沒有出現開發小哥哥的問題,在神奇的作用力下,我給video設定了個寬度,發現video變矮了是怎麼回事,調高度也調不動。

總結:video標籤會保持替換內容的長寬比。

那怎麼辦呢,一定有解決辦法的,上網查了一下,果然,被我找到了這篇文章 blog.csdn.net/qq_39292868… ,通過這篇文章,我新了解了屬性object-fit,文章對於這個屬性的幾個值的解釋也很清楚,我就不多說了。

mdn對於object-fit屬性的介紹:developer.mozilla.org/zh-cn/docs/…

HTML5的Video標籤的屬性,方法和事件彙總

上海 優化 audio和video都可以通過js獲取物件,js通過id獲取video和audio的物件 獲取video物件 media document.getelementbyid media media方法和屬性 htmlvideoelement和htmlaudioelement 均繼承自htm...

HTML5的Video標籤的屬性,方法和事件彙總

preload 預載入 controls 瀏覽器自帶的控制條 html media src controls width 400px heigt 400px video audio和video都可以通過js獲取物件,js通過id獲取video和audio的物件 獲取video物件 media doc...

canvas需要在標籤裡直接定義寬高

以前用canvas畫圖時,都是直接在canvas標籤裡直接寫上寬高,沒有問題,但也沒有 過為什麼寬高要直接寫在canvas標籤裡,因為各個資料的例子上都是這麼寫的。今天王sir提出了一ounmhmko個問題 如果把寬高寫在www.cppcns.comtyle 裡,看看會有什麼不同。自己試了以下,果然...