資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學建立HTML5影片或音訊元素中定義的媒體元素的媒體資源
HTML5支援五種媒體元素，有助於建立媒體資源。不同的媒體標籤包括<audio>、<source>、<video>、<track>和<embed>。
這些標籤用於改變開發方式，讓我們詳細討論每個元素以及示例 -
<video>標籤
如果要在網頁上播放影片，可以使用HTML <video>元素。HTML <video>元素提供了一種在網頁中嵌入影片的標準方法。嵌入影片的簡單程式碼如下：
<video controls="controls"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogg"> Your browser does not support the HTML5 Video element. </video>
示例
以下示例演示了在HTML中使用<video>標籤：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Using Video tag</p>
<video width="300" height="250" controls preload>
<source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
<audio>標籤
假設，如果要將歌曲或聲音檔案新增到網頁中，則必須在HTML文件中使用<audio>標籤。
語法
以下是HTML中<audio>標籤的用法
<audio> <source src=”demo.mp3” type=”audio/mpeg”> </audio>
示例
以下是<audio>標籤的示例程式：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Using Audio tag</p>
<audio controls autoplay>>
<source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3" type="audio/mpeg">
</audio>
</center>
</body>
</html>
<source>標籤
所有媒體元素都包含source元素，用於附加多媒體檔案。
語法
以下是<source>標籤的用法：
<source src=” “ type= “ “> text…. </source>
示例
以下是<source>標籤的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font: 20px;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Usage of Source tag</p>
<audio controls autoplay>>
<source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3" type="audio/mpeg">
</audio>
</center>
</body>
</html>
<embed>標籤
為了嵌入Flash動畫等外掛，我們在HTML中使用<embed>標籤
語法
以下是HTML中embed標籤的用法：
<embed attribute>
示例
以下是HTML中embed元素用法的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font: 20px;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Usage of Embed tag</p>
<iframe src="https://giphy.com/embed/BfbUe877N4xsUhpcPc" width="250" height="150" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</center>
</body>
</html>
多個媒體資源
現在讓我們討論HTML5中的多個媒體資源。可以為媒體元素設定多個媒體資源。
語法
以下是HTML中多個媒體元素的用法：
<media_element> <source src="logo.jpg"> <source src="sample.mp3"> <source src="video.mp4"> </media_element>
示例
以下程式演示了多個媒體資源的用法：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font: 20px;
}
</style>
<title>Multiple Media Resources</title>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<div>
<h2>Multiple media resources in single HTML:</h2>
<div>
<audio controls>
<source src="sample.mp3">
<code>audio</code> element.
</audio>
</div>
<div>
<video width="300" height="250" controls preload>
<source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
</div>
</center>
</body>
</html>
更新於：2023年10月10日
瀏覽量：366
廣告