如何在 WordPress 中插入视频

已发表: 2020-11-27

创建有趣且引人入胜的内容是让访问者参与其中并想要了解更多关于您和您的产品的关键。之前，我已经提到了一些创建让你坠入爱河的页面的技巧，并且我明确提到了包含视觉元素的重要性。

事实上，去年，Zenith 的一项研究预测，到 2021 年，每天的视频观看量将增加 100 分钟，视频广告支出将增加 35%。据思科称，到 2022 年，80% 的互联网流量将采用视频格式。恐怕所有这些预测都无法满足当前的大流行。

因此，不用多说将视频添加到您网站的帖子和页面的重要性，让我们看看在 WordPress 中添加视频是多么容易，以及最新版本的 Gutenberg 9.2.2 提供了哪些新功能。

复制视频的 URL

我们很幸运，WordPress 编辑器允许您非常轻松地嵌入来自任何平台的视频。在浏览器中，从视频所在的平台，可以直接复制其网址。

如何选择 YouTube 视频的 URL 的屏幕截图 — 选择并复制您要嵌入的视频的 URL。

您还可以通过单击找到的共享按钮来复制 URL，以共享视频，您可以使用该按钮添加其他选项，例如指示视频的开始时间。

然后，您只需将其直接粘贴到文本块中，或者您还可以选择先前选择要插入的视频类型的块。因此，例如，如果我想在 Matt Mullenweg 出现的那一刻开始嵌入来自 YouTube 的 WordCamp US 2019 – State of the Word 视频，我将创建一个新的 YouTube 块并插入 URL https://youtu.be/gS6_xOABTWo?t=2085 （或者网址https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085 ）。

请注意，时间必须以秒为单位。此外，您还可以根据需要在页面中对齐视频。

您会在帖子中获得一个新的嵌入式视频：

但不仅如此，当您添加 YouTube 块（或其他类型的视频）时，您还有其他选项可以添加到视频显示中，并且取决于播放它的平台。

因此，例如，在 YouTube 的情况下，您拥有的可用选项（通过 URL 中的附加参数）是：

要嵌入具有适合主题的默认宽度和高度的视频：https: https://www.youtube.com/gS6_xOABTWo
要明确指定宽度和高度： https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240 ://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240
仅指定宽度： https://www.youtube.com/watch?v=gS6_xOABTWo&w=320 ://www.youtube.com/watch?v=gS6_xOABTWo&w=320
要将播放器向左对齐： https://www.youtube.com/watch?v=gS6_xOABTWo&align=left ://www.youtube.com/watch?v=gS6_xOABTWo&align=left
要将播放器向右对齐： https://www.youtube.com/watch?v=gS6_xOABTWo&align=right ://www.youtube.com/watch?v=gS6_xOABTWo&align=right
要在完成视频后仅显示来自同一频道的相关视频： https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0 ://www.youtube.com/watch?v=gS6_xOABTWo&rel=0
要指定视频的开始和结束时间，请添加开始和结束时间： https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500 ://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

在您的 WordPress 中上传和查看您的视频

有时您可能不想将自己的视频上传到第三方平台，而是希望将它们专门放在您的 WordPress 服务器上。将视频上传到您的媒体库并添加它就像上传任何其他图像一样简单。单击媒体或添加视频类型块：

就像添加图片时一样，您可以选择直接上传视频、从媒体库中选择视频或插入其 URL。

然后，在媒体库上，我们只需要选择我们想要插入的视频，我们就会在我们的页面或帖子上提供它。

WordPress 媒体库中可用视频文件的屏幕截图 — 所有可嵌入的视频都将显示在媒体库中。

一旦被选中，我们将为所有访问者提供它。

此外，新版本的古腾堡 9.2.2。为视频插入添加了新功能。特别是，它允许您从编辑菜单添加<track>类型的 HTML 元素。

您肯定已经注意到，如果您下载了视频，则包含它的文件夹中还包含一个SRT文件。这些字幕文件不包含在视频中，但视频播放器能够提取并与您正在观看的视频同步显示。因此， track元素用于指示这些SRT文件的位置和一些附加功能。

插入视频时，生成的 HTML 类似于：

 <!-- wp:video {"id":15850} --> <figure class="wp-block-video"> <video controls="" src="/my-site.com/.../my-video.mp4"></video></figure> <!-- /wp:video -->

有了这个新版本的 Gutenberg，现在您可以从编辑菜单中将曲目元素添加到视频中，而无需进行任何 HTML 编辑。因此，例如，您可以为视频添加英文字幕，HTML 代码将包含带有字幕信息的轨道。

 <video controls="" src="/my-site.com/.../my-video.mp4"> <track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en"> </video>

可以在轨道上指示的属性如下：

srclang – 曲目文本数据的语言。它必须是有效的 BCP 47 语言标签代码。
label – 播放器界面的标题。
kind - 如何使用轨道文本。它可以有以下关键字：
- 字幕
  - 为不懂语言的人设计的视频内容翻译字幕（例如，当视频为英语时，为西班牙语字幕）。
- 字幕
  - 转录视频中听到的内容（对话和其他声音），供听力有问题的人使用。
- 说明
  - 为盲人或无法观看视频的人准备的视频内容的文字说明。
- 章节
  - 章节标题旨在在用户浏览多媒体资源时使用。
- 元数据
  - 脚本使用的轨道。对用户不可见。
src – 文本文件的 URL。

我们如何添加这些曲目？很简单，添加一段视频类型并选择我们要显示的视频后，视频编辑菜单中会出现一个新选项，即Add Track ，选项为Open Media Library或Upload 。

将文件上传到媒体库后，您就可以选择它了。

如何从 WordPress 媒体库中选择包含要与视频同步的文本的轨道的屏幕截图 — 从媒体库中选择包含要与视频同步的文本的轨道。

您将看到它已经出现在视频编辑菜单中，您可以编辑轨道的属性：

单击编辑按钮并根据需要修改属性。现在，您的视频中包含的文本轨道将与视频显示同步。

因此，您不仅可以在媒体库中拥有自己的视频，还可以轻松包含有关它们的其他信息。

您已经看到，只需复制视频所在位置的 URL，即可轻松包含您在第三方平台上托管的视频。但是，如果出于某种原因，您更喜欢将视频托管在自己的 WordPress 安装中，那么使用最新版本的 Gutenberg，您现在可以以舒适的方式展示您的视频。

照片由 CardMapr 在 Unsplash 上拍摄。