数据结构
网络
关系数据库管理系统 (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
广告