HTML媒体 – 将照片和视频添加到网页

今天的每个网站，都是非常丰富的媒体内容。无论是照片，视频还是其他形式的媒体。所有这一切都可以通过在网页中放置媒体来实现。

因此，在本文中，让我们看看一些媒体标签以及我们如何在我们的网页中使用照片和视频。

在网页中使用图像

所述<IMG> 标记可用于在网页中插入的图像。它是一个空标签，因此您无需关闭它。以下是如何使用图像标记的示例。

<img src=”salman.jpeg”>

上面的代码在我的浏览器中输出以下内容。

如果你想知道，那就是Salman Khan（我最喜欢的演员）。从代码中，您可以看出我们已经使用了img标记，并src=”salman.jpeg” 指定了文件的名称，在我们的例子中是salman.jpeg。

你可以用图像做很多东西。您可以看到我已设置图像的自定义宽度和高度，并将其放在中心。

<img src="salman.jpg" width="400px" height="250px" alt="salman khan">

此外，还有一段代码称alt =“salman khan” 。因此，有时您的图像可能由于连接不良问题而无法加载。alt属性用于存储最能描述图像的文本，并且在无法加载图像时显示文本。

视频可以在与图像非常相似的网页中使用。

<video width="400" height="300" src="cartoon.webm" type="video" controls>

上面的代码产生以下输出。

您可以看到屏幕上显示视频，并且有一些用于音量控制，全屏和播放/暂停的控制按钮。

我提供了元素的宽度和高度，因此视频包含在该维度中。我们src="cartoon.webm" 告诉HTML我们的视频文件所在的位置。

最后，我们有一个控件属性，可以启用各种控件，如音量和播放暂停控件。

虽然上面给出的代码工作得非常好，但是会出现用户的互联网连接不稳定或可能有其他原因导致视频根本无法加载的情况。在这种情况下，最好显示一些文本代替视频。您可以使用以下代码执行此操作。

<video width="400" height="300" controls>

<source src="cartoon.webm" type="video/webm">

Unable to load video

</video>

您还会注意到我type=”video/webm”在source元素中添加了一个属性，以指定我们正在处理的视频类型。

同样，您也可以通过将视频标签替换为音频标签来插入音频文件。

媒体文件已成为主要的消费模式，HTML在网页中整合照片和视频方面非常丰富。img，音频和视频标签分别用于将照片，音频和视频插入网页。如果您有任何与此相关的问题，可以在评论部分与我联系，我会在那里为您服务。