视频

概述

您可以使用 {{< video >}} 短代码在文档中嵌入视频。例如，这里我们嵌入了一个YouTube视频：

{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}

视频可以是指向视频文件（例如 .mp4）的链接，也可以是指向YouTube、Vimeo或Brightcove上发布的视频的链接。

以下是一些使用不同视频源和选项的额外示例：

{{< video local-video.mp4 >}}

{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}

{{< video https://vimeo.com/548291297 >}}

{{< video https://youtu.be/wo9vZccmqwc width="400" height="300" >}}

{{< video https://www.youtube.com/embed/wo9vZccmqwc
    title="什么是CERN？"
    start="116"
    aspect-ratio="21x9" 
>}}

在HTML格式中，视频将嵌入到文档中。对于其他格式，将渲染一个指向视频的简单链接。

接下来，我们将介绍视频嵌入的各种可用选项。有关在Revealjs演示文稿中使用视频的更多详细信息（包括如何创建带有全屏视频背景的幻灯片），请参阅下面的Revealjs部分。

视频URL

视频URL可以指定视频文件的路径（例如 .mp4），远程URL到视频文件，或者指向视频服务（YouTube、Vimeo或Brightcove）的URL。

以下是视频文件的有效URL：

{{< video local-video.mp4 >}}
{{< video https://videos.example.com/video.mp4 >}}

对于视频服务，支持多种URL形式。例如，以下所有视频服务URL都是有效的：

{{< video https://youtu.be/wo9vZccmqwc >}}
{{< video https://www.youtube.com/watch?v=wo9vZccmqwc >}}
{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}
{{< video https://vimeo.com/548291297 >}}
{{< video https://players.brightcove.net/1460825906/default_default/index.html?videoId=5988531335001 >}}

请注意，YouTube视频支持在观看视频时地址栏中可用的URL，以及用于链接和嵌入的标准URL。Brightcove视频使用标准的iframe嵌入代码进行嵌入。

选项

宽高比

视频会自动响应式地使用文档主文本列的全部宽度进行渲染。aspect-ratio 指定了高度应如何随着宽度的变化而变化。例如：

{{< video https://youtu.be/wo9vZccmqwc aspect-ratio="4x3" >}}

可用的宽高比包括 1x1, 4x3, 16x9（默认）, 和 21x9。

宽度和高度

您可以通过提供明确的 width 和 height 属性来禁用响应式尺寸。例如：

{{< video https://youtu.be/wo9vZccmqwc width="250" height="175" >}}

这将生成一个以指定尺寸渲染的视频，并且不具备响应性。请注意，当未指定 height 或 width 时，视频将根据可用空间进行响应式调整大小。

开始时间

对于YouTube视频，您可以指定 start 选项来指示您希望从视频的多少秒开始播放：

{{< video https://youtu.be/wo9vZccmqwc start="10" >}}

帧标题

title 选项为视频 <iframe> 添加一个 title 属性：

{{< video https://www.youtube.com/embed/wo9vZccmqwc 
    title='什么是CERN？' 
>}}

Revealjs

您可以通过以下两种方式之一在 Revealjs 演示文稿中包含视频：

出现在幻灯片内容中的视频。
占据整个幻灯片背景的视频。

幻灯片内容

以下是一个没有标题的幻灯片上的视频：

---

{{< video https://youtu.be/wo9vZccmqwc width="100%" height="100%" >}}

请注意，我们明确地将 width 和 height 设置为100%，以便视频填满幻灯片。

以下是一个带有标题的幻灯片上的视频。

## 视频幻灯片

{{< video https://youtu.be/wo9vZccmqwc width="100%" height="85%" >}}

请注意，我们将 height 设置为85%，以便为标题留出空间。

背景

对于没有标题的幻灯片上的视频，您可能更希望视频填满整个幻灯片的背景。您可以通过使用 background-video 属性来实现这一点。例如：

## {background-video="intro-cern.mp4"}

## {background-video="https://videos.example.com/intro-cern.mp4"}

## {background-video="https://youtu.be/wo9vZccmqwc?autoplay=1"}

## {background-video="https://vimeo.com/548291297"}

请注意，在使用 background-video 用于视频文件时（与 YouTube 等服务不同），您可以指定许多其他属性，包括：

属性	默认值	描述
`background-video`		单个视频源，或以逗号分隔的视频源列表。
`background-video-loop`	false	标记视频是否应重复播放。
`background-video-muted`	false	标记音频是否应静音。
`background-size`	cover	使用 `cover` 表示全屏并进行部分裁剪，或使用 `contain` 表示信箱模式。
`background-opacity`	1	背景视频的不透明度，范围为0-1。0表示完全透明，1表示完全不透明。

例如：

## 幻灯片标题 {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}

此幻灯片的背景视频将循环播放且音频静音。

交叉引用

要为视频添加交叉引用，请使用交叉引用 div 语法，并将其视为一个图形。例如：

::: {#fig-cern}

{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}

视频 "CERN: The Journey of Discovery"

:::

在 @fig-cern...

渲染效果如下：

截图显示了一个 YouTube 视频，紧接着是标题 '图 1: 视频 CERN: The Journey of Discovery'。标题下方是文本 '在图 1 ...'。

如果你希望为视频分配一个不同于图形的标签和计数器，请考虑定义自定义交叉引用类型。