資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML5中顯示影片控制元件？
HTML 使用 embed、object 和 iframe 標籤在 HTML5 中顯示影片控制元件。有時我們想觀看影片並使用停止按鈕暫停影片，但我們不知道究竟發生了什麼。布林屬性定義為controls，該屬性包括播放、暫停、音量、軌道、全屏模式和字幕開關。
視覺化表示
語法
以下語法用於示例：
<video controls> <source src = "paste the path of video" type = "video/mention the type format" > </video>
video 元素用於在 HTML 文件中顯示影片。source 元素具有 src 屬性，允許使用者貼上影片的連結/路徑。type 屬性用於提及影片格式的型別。例如：mp3、mp4、wav 等。
<embed src="https://www.youtube.com/embed/G3pdpsJxE-A?controls"></embed>
embed 元素用於插入外部資源，例如 pdf、音訊和影片。
<object data="https://www.youtube.com/embed/3giyUDx2Yik?controls"></object>
object 元素執行與 embed 標籤相同的函式，也用於插入外部資源。
使用的屬性
示例中使用的屬性：
height − 此屬性定義影片的高度。
width − 此屬性定義影片的寬度。
color − 此屬性定義文字的顏色。
font-weight − 此屬性將文字定義為粗體。
示例 1
在下面的示例中，我們將使用一個設定了 controls 屬性的 video 元素。此屬性定義網頁輸出中的所有功能，例如音量開關、播放、暫停等。然後設定影片的高度和寬度屬性，以表示水平和垂直兩側的最佳長度。
<!DOCTYPE html>
<html>
<title>Video tag to display the video controls</title>
<body>
<center>
<h1>Tutorialspoint</h1>
<video width="420" height="240" controls>
<source src="https://tutorialspoint.tw/videos/sample720.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
示例 2
在下面的示例中，將使用 embed 元素，該元素設定三個屬性：src（用於貼上連結並在連結末尾新增?controls）、height 和 width，以設定影片的最佳長度。
<html>
<title>Video controls using embed element</title>
<body>
<center>
<h1>Tutorialspoint</h1>
<embed src="https://tutorialspoint.tw/videos/sample720.mp4?controls" height="320px" width="500px"></embed>
</center>
</body>
</html>
示例 3
在下面的示例中，我們將使用新的趨勢元素，即 object，它可用於在 HTML 中顯示影片控制元件。此元素具有一個名為 data 的屬性，用於儲存影片的連結/路徑以及一些屬性，例如 height 和 width，這些屬性透過覆蓋良好的長度來設定影片的最佳可見性。
<!DOCTYPE html>
<html>
<title>Display the video control using </title>
<body>
<center>
<h1>Tutorialspoint</h1>
<object data="https://tutorialspoint.tw/videos/sample720.mp4?controls" height="320px" width="500px"></object>
</center>
</body>
</html>
結論
我們透過在 HTML 中顯示影片控制元件來探索了三個不同的標籤。在第一個示例中，我們僅從 iframe 標籤顯示影片。在第二個示例中，我們使用三個不同的標籤（iframe、embed 和 object）透過使用控制所有影片功能的“controls”屬性來顯示影片。
314 次檢視
