如何在您HTML中嵌入视频和音频

by Abhishek Jakhar

通过阿比舍克·贾卡(Abhishek Jakhar)

如何在您HTML中嵌入视频和音频 (How to embed video and audio in your HTML)

HTML allows us to create standards-based video and audio players that don’t require the use of any plugins. Adding video and audio to a webpage is almost as easy as adding an image or formatting some text.

HTML使我们可以创建基于标准的视频和音频播放器，而无需使用任何插件。 将视频和音频添加到网页几乎与添加图像或格式化某些文本一样容易。

There are two different ways to include video elements. We will be discussing both of them below.

包含视频元素有两种不同的方法。 我们将在下面讨论它们两个。

视频元素 (Video Element)

The <video> element allows us to embed video files into an HTML, very similar to the way images are embedded.

<vid eo>元素允许我们将视频文件嵌入到HTML中，这与图像的嵌入方式非常相似。

Attributes we can include are:

我们可以包括的属性是：

• src This attribute stands for the source, which is very similar to the src attribute used in the image element. We will add the link to a video file in the src attribute.

  src此属性代表源，它与image元素中使用的src属性非常相似。 我们将在src属性中将链接添加到视频文件。

• type This is going to be video/mp4 because .mp4 is the format of the video we are using. We can also use different video formats like .ogg or .webm, then the value of type attribute will change to video/ogg or video/WebM respectively.

  type这将是video / mp4，因为.mp4是我们正在使用的视频的格式。 我们还可以使用.ogg或.webm等不同的视频格式，然后type属性的值将分别更改为video / ogg或video / WebM。

Note: some common video formats are WebM, Ogg, MP4.

注意：某些常见的视频格式是WebM，Ogg，MP4。

We now have this video on our page. But there’s a problem. This video isn’t playing automatically and there are also no controls to start the video.We will have to add controls manually by using the controls attribute to our video element.

现在，我们的页面上有此视频。 但是有一个问题。 该视频不会自动播放，也没有任何控件可以开始播放视频。我们将必须通过对视频元素使用controls属性来手动添加控件。

This attribute doesn’t take any value, because it’s a boolean attribute. That means it can either be true or false.

该属性没有任何值，因为它是布尔值属性。 这意味着它可以为真也可以为假。

Now, by having the controls attribute in our video element, it means that it’s true and it will display playback controls.

现在，通过在视频元素中具有controls属性，就意味着它是正确的，它将显示回放控件。

Now, if we remove the controls we could also make the video autoplay, by using the autoplay attribute. This is also a boolean attribute.

现在，如果我们删除控件，我们还可以通过使用autoplay属性使视频自动播放。 这也是一个布尔属性。

Now, as you can see the video is playing by itself, and there’s no control. So, we didn’t actually start the video, but we also can’t stop the video.

现在，您可以看到视频正在单独播放，并且无法控制。 因此，我们实际上并未开始播放视频，但也无法停止播放视频。

We can also have controls and autoplay together.

我们也可以同时具有控件和自动播放功能。

You can provide different attributes to the video element, depending on the requirement.

您可以根据需要为video元素提供不同的属性。

I mentioned above that there are two different ways to add the video element. Let’s try the other way.

上面我提到过，有两种不同的方法来添加视频元素。 让我们尝试另一种方式。

源元素 (Source Element)

Earlier we used a video element with self-closing tag, but here we will close the video element. So we have an opening and closing tag now.

之前我们使用了带有自动关闭标签的video元素，但是在这里我们将关闭video元素。 因此，我们现在有一个开始和结束标签。

We will also remove the type and source attributes from the video element and paste it into another element.

我们还将从video元素中删除type和source属性，并将其粘贴到另一个元素中。

<video>  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>

We just moved the attributes over to the source element.

我们只是将属性移到了source元素上。

Now, why would we want to do that?

现在，我们为什么要这样做？

Well, in most cases, with the video we will have multiple sources because we need to provide different file types depending on which browser is viewing your video because different browsers support different file types.

好吧，在大多数情况下，对于视频，我们将有多个来源，因为我们需要根据正在查看视频的浏览器提供不同的文件类型，因为不同的浏览器支持不同的文件类型。

The video will look exactly the same. But now we have broader browser support.

视频看起来完全一样。 但是现在我们有了更广泛的浏览器支持。

Now, if we want to add attributes like controls, autoplay, loop etc, we will add it to the <video> element.

现在，如果我们想添加诸如controls ， autoplay ， loop等属性，我们将其添加到<vid eo>元素中。

音频元素 (Audio Element)

The <audio> element is very similar to the video element. However, the only major difference is that there are no visuals.

<aud io>元素与video元素非常相似。 但是，唯一的主要区别是没有视觉效果。

We can use the audio element to play an audio file on our web page — such as an mp3 file.

我们可以使用audio元素在网页上播放音频文件，例如mp3文件。

Now, just like the video tag, there are two different ways to do this.

现在，就像视频标签一样，有两种不同的方法可以执行此操作。

• Use a single tag representing the entire element.
  使用代表整个元素的单个标签。
• Opening and closing tag with the child elements in between.
  在子元素之间插入和关闭标签。

Now, we’ll have an opening and closing audio tag, and then we will add the source element in between.

现在，我们将有一个打开和关闭音频标签，然后在这两个标签之间添加source元素。

The folder structure might look like this:

文件夹结构可能如下所示：

|-- project    |-- audio      |-- sample.mp3      |-- sample.ogg    |-- css      |-- main.css      |-- normalize.css    index.html

There is no controls attribute given to the <audio> element in the example above, so the &lt;audio> element won’t show up in the HTML document.

在上面的示例中，没有对<aud io>元素提供任何控件属性， o the & lt; audio>元素不会显示在HTML文档中。

Now, you can see that there are only a few key differences here. The value in type attribute is changed from “video/mp4” to “audio/mp3”. In the src attribute, we’ve changed from a video file with .mp4 extension to an audio file with .mp3 extension.

现在，您可以看到这里只有几个主要区别。 type属性中的值从“ video / mp4”更改为“ audio / mp3”。 在src属性中，我们已将扩展名为.mp4的视频文件更改为扩展名为.mp3的音频文件。

Now, just like the video element, we won’t actually be able to stop or start the audio without any controls. So, we will be adding the controls attribute to the audio element.

现在，就像视频元素一样，如果没有任何控件，我们实际上将无法停止或启动音频。 因此，我们将把controls属性添加到audio元素。

You can also add other attributes in the <audio> element like autoplay, loop etc.

您还可以在<aud io>元素中添加其他属性，例如自动播放，循环等。

We have covered the essentials of audio and video elements in HTML.

我们已经介绍了HTML中音频和视频元素的基本知识。

You can learn more about audio and video in the links given below:

您可以通过以下链接了解有关音频和视频的更多信息：

• MDN Web docs — Video

  MDN Web文档— Video by

• MDN Web docs — Audio

  MDN Web文档-音频

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

希望您发现这篇文章对您有帮助。 我希望听到您的反馈！

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/video-audio-in-html-a-short-guide-69f721878b47/