为 HTML5 中定义在 video 或 audio 元素内的媒体元素创建媒体资源。
htmlweb developmentfront end technology更新于 2026/1/16 3:24:17
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 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>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
