HTML媒體 – 将照片和視訊添加到網頁

今天的每個網站，都是非常豐富的媒體内容。無論是照片，視訊還是其他形式的媒體。所有這一切都可以通過在網頁中放置媒體來實作。

是以，在本文中，讓我們看看一些媒體标簽以及我們如何在我們的網頁中使用照片和視訊。

在網頁中使用圖像

所述<IMG> 标記可用于在網頁中插入的圖像。它是一個空标簽，是以您無需關閉它。以下是如何使用圖像标記的示例。

<img src=”salman.jpeg”>

上面的代碼在我的浏覽器中輸出以下内容。

如果你想知道，那就是Salman Khan（我最喜歡的演員）。從代碼中，您可以看出我們已經使用了img标記，并

src=”salman.jpeg” 

指定了檔案的名稱，在我們的例子中是salman.jpeg。

你可以用圖像做很多東西。您可以看到我已設定圖像的自定義寬度和高度，并将其放在中心。

<img src="salman.jpg" width="400px" height="250px" alt="salman khan">

此外，還有一段代碼稱alt =“salman khan” 。是以，有時您的圖像可能由于連接配接不良問題而無法加載。alt屬性用于存儲最能描述圖像的文本，并且在無法加載圖像時顯示文本。

在網頁中使用視訊

視訊可以在與圖像非常相似的網頁中使用。

<video width="400" height="300" src="cartoon.webm" type="video" controls>

上面的代碼産生以下輸出。

您可以看到螢幕上顯示視訊，并且有一些用于音量控制，全屏和播放/暫停的控制按鈕。

我提供了元素的寬度和高度，是以視訊包含在該次元中。我們

src="cartoon.webm" 

告訴HTML我們的視訊檔案所在的位置。

最後，我們有一個控件屬性，可以啟用各種控件，如音量和播放暫停控件。

雖然上面給出的代碼工作得非常好，但是會出現使用者的網際網路連接配接不穩定或可能有其他原因導緻視訊根本無法加載的情況。在這種情況下，最好顯示一些文本代替視訊。您可以使用以下代碼執行此操作。

<video width="400" height="300" controls>

<source src="cartoon.webm" type="video/webm">

Unable to load video

</video>

您還會注意到我

type=”video/webm”

在source元素中添加了一個屬性，以指定我們正在處理的視訊類型。

同樣，您也可以通過将視訊标簽替換為音頻标簽來插入音頻檔案。

結論

媒體檔案已成為主要的消費模式，HTML在網頁中整合照片和視訊方面非常豐富。img，音頻和視訊标簽分别用于将照片，音頻和視訊插入網頁。如果您有任何與此相關的問題，可以在評論部分與我聯系，我會在那裡為您服務。