创建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>标签：

Open Compiler
<!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>标签的示例程序：

Open Compiler
<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

<source>标签

所有媒体元素都包含source元素，用于附加多媒体文件。

语法

以下是<source>标签的用法：

<source src=” “ type= “ “>
text….
</source>

示例

以下是<source>标签的示例：

Open Compiler
<!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元素用法的示例：

Open Compiler
<!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>

示例

以下程序演示了多个媒体资源的用法：

Open Compiler
<!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

启动您的职业生涯

完成课程获得认证

开始学习
广告