吸引眼球

MOHANAVAMSI CHIDIPILLI

4.00/5 (2投票s)

2014年5月6日

CPOL

3分钟阅读

13853

在 HTML 中使用 Audio 和 Video 标签

引言

通过使用每天都在更新的最新功能，每个网站看起来都很棒。

不同的网站设计师采用不同类型的引人注目的内容，一些使用 Flash 播放器，一些使用背景音乐，还有一些在网页上使用自定义动画，例如

当我在网站上右键单击时，字体颜色会变为鲜艳的颜色，或者您的网站上会落下一些花哨的雨。这看起来不错。

在本文中，我将详细说明在您的 HTML 代码中使用媒体元素，并将它们与一些基本的 CSS 相结合。

1. HTML5 音频标签

2. HTML5 视频标签

背景

如果您使用背景音乐或描述您的网站的示例视频来介绍您的博客或网站，用户会感觉很好。通过在您的网页中添加音频和视频，将有助于吸引用户对您的网站或博客的关注。

让我们开始吧

对于 HTML，您必须遵循一些基本的逐步流程才能完成您的工作。
HTML 中的每个页面都应该包含一些基本标签。
没有这些基本标签，它也可以工作，但是您必须遵循它才能从您的浏览器中获得良好的响应。
对于一个好的程序员或好的设计师，对您的代码进行注释是一个好习惯。
在 HTML 中，注释是通过使用以下方式完成的

<!-- This is Simple Comment "Which is not visible on your browser"-->

如何使用 HTML5 音频标签

代码片段 1

观察此屏幕截图，您将观察到 HTML 的基本标签，例如

html、head、title 和 body 标签，以及在您的 HTML 页面中编写注释。

<head> <title>Title is Given Here</title> </head>

代码片段 2

现在您知道获得一个 HTML 页面的基本要求了，现在您可以准备在其中添加不同的标签和元素了。

观察此带有音频标签的屏幕截图。

---
这里我们使用了音频标签，它必须以 <audio> 开头，以 </audio> 结尾。
音频标签需要源文件。您必须通过使用您在网站位置中的文件路径或您系统中文件的位置来给出源文件路径。
您可以在我在此处放置的屏幕截图中观察到传递给 “<src” 标签的参数。

您在这里无法控制更改宽度和高度，但在视频标签中，您可以为您的视频设置宽度和高度。

如何使用 HTML5 视频标签

代码片段 3

在此屏幕截图中，您可以观察到视频标签，您可以在其中观察到新的控件，例如宽度和高度，而源与您在上面的屏幕截图中观察到的音频标签一样是通用的。

注意

您可以在 HTML 代码中观察到“不支持音频标签”和“不支持视频标签”，但用户在桌面上看不到。

如果您的浏览器不支持这些标签，您将在浏览器上看到此消息。这只是对用户的一个提示。

这些概念的示例

代码片段 4

此 HTML 页面的源代码

<html> 
<pre> <!-- This is a commenting of your HTML page -->
<head>
<style>
table,th,td
{
border:2px solid black;
}
</style>
<title>
 <title>HTML5 audio tag</title>
</title>
</head>
<body>
<h1>This is Simple Audio Tag</h1>
<table>
<tr border="1">
<th>Song Name</th>
<th>Play Me</th>
</tr>
<tr>
<td>Song 1</td>
<td><audio width="320" height="240" controls>
  <source src="C:\Users\miracle\Desktop\CODE SNIPPETS\TEST.mp3" type="audio/ogg">
"AUDIO TAG NOT SUPPORTED"
</audio></td>
</tr>
<tr>
<td>Song 1</td>
<td><audio width="320" height="240" controls>
  <source src="C:\Users\miracle\Desktop\CODE SNIPPETS\TEST.mp3" type="audio/ogg">
"AUDIO TAG NOT SUPPORTED"
</audio></td>
</tr>
<tr>
<td>Song 1</td>
<td><audio width="320" height="240" controls>
<source src="C:\Users\miracle\Desktop\CODE SNIPPETS\TEST.mp3" type="audio/ogg">
"AUDIO TAG NOT SUPPORTED"
</audio></td>
</tr>
</table>
</body>
</html>

您可以在上面的 HTML 文档中观察到样式标签，该标签为您的 HTML 文档应用样式，以这种方式，我们可以通过使用 CSS 文件来使此样式可用。

连接 HTML 和 CSS

我们如何做到这一点……我们已经在 <head></head> 中讨论了标签，这里我们放置您的 CSS 文件的链接。

观察此示例

我正在使用相同的场景，但通过使用 CSS 文件来链接样式。

HTML 文档源代码

<html> 
 <!-- This is a commenstarting of your HTML page -->
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\miracle\Desktop\CODE SNIPPETS\stylesheet.css">
<title>
 <title>HTML5 Audio and Videotag</title>
</title>
</head>
<body>
<h1>This is Simple Audio AND Video Tag</h1>
<table>
<tr border="1">
<th>Song Name</th>
<th>Play Me</th>
</tr>
<tr>
<td>Song 1</td>
<td><audio controls>
  <source src="C:\Users\miracle\Desktop\CODE SNIPPETS\TEST.mp3" type="audio/ogg">
"AUDIO TAG NOT SUPPORTED"
</audio></td>
</tr>
<tr>
<td>Video 1</td>
<td><video width="320" height="240" controls>
<source src="C:\Users\miracle\Downloads\New folder\ee\BIRTHDAY WISH.mp4" type="audio/ogg">
"VIDEO TAG NOT SUPPORTED"
</video></td>
</tr>
</table>
</body>
</html>

CSS 文件源代码

 table,th,td
{
border:2px solid black;
}
audio
{
border:5px solid blue;
background-color:red;
}
video
{
border:2px solid yellow;
background-color:red;
}

最终输出

注意：观察此源代码中的链接标签，该标签将 HTML 文档与 CSS 映射。

感谢您阅读我的文章