视频
Overview|概述
您可以使用{{< 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="What is the CERN?"
start="116"
aspect-ratio="21x9" >}}
在 HTML 格式中,视频将嵌入文档中。对于其他格式,将呈现一个简单的视频链接。
接下来,我们将介绍视频嵌入的各种可用选项。有关在 Revealjs 演示中使用视频的其他详细信息(包括如何创建全屏视频背景的幻灯片),请参阅下面的 Revealjs 部分。
Video 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 embed code嵌入。
Options|选项
Aspect Ratio|高宽比
视频会使用文档主文本列的全宽自动呈现。宽高比
指定了高度随宽度变化而变化的方式。例如:
{{< video https://youtu.be/wo9vZccmqwc aspect-ratio="4x3" >}}
可用的 宽高比 包括 1x1
、4x3
、16x9
(默认)和 21x9
。
Width and Height|宽度和高度
您可以通过提供明确的 width
和 height
属性来禁用响应式大小。例如:
{{< video https://youtu.be/wo9vZccmqwc width="250" height="175" >}}
这将产生一个按指定尺寸渲染的视频,但不是响应式的。请注意,如果未指定 “高度”或 “宽度”,视频将根据可用空间大小进行调整。
Start Time|开始时间
对于 YouTube 视频,您可以指定一个 start
选项,用于指示视频开始播放的秒数:
{{< video https://youtu.be/wo9vZccmqwc start="10" >}}
Frame Title|框架标题
title
选项会为视频”
{{< video https://www.youtube.com/embed/wo9vZccmqwc
title='What is the CERN?' >}}
Revealjs
您可以通过以下两种方式之一在 Revealjs 演示中加入视频:
出现在幻灯片内容中的视频。
占据幻灯片整个背景的视频。
Slide Content|幻灯片
下面是一个没有标题的幻灯片视频:
---
{{< video https://youtu.be/wo9vZccmqwc width="100%" height="100%" >}}
请注意,我们将 width
and height
明确设置为 100%,以便视频填满幻灯片。
下面是带有标题的幻灯片上的视频。
## Video Slide
{{< video https://youtu.be/wo9vZccmqwc width="100%" height="85%" >}}
请注意,我们将 height
设置为 85%,以便为标题留出空间。
Backgrounds|背景
对于幻灯片上没有标题的视频,您可能更希望让视频充满整个幻灯片的背景。您可以使用 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"}
请注意,当对视频文件(有别于 YouTube 等服务)使用 background-video
时,您可以指定一些其他属性,包括:
Attribute | Default | Description |
---|---|---|
background-video |
A single video source, or a comma separated list of video sources. | |
background-video-loop |
false | Flags if the video should play repeatedly. |
background-video-muted |
false | Flags if the audio should be muted. |
background-size |
cover | Use cover for full screen and some cropping or contain for letterboxing. |
background-opacity |
1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
For example:
## Slide Title {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}
This slides's background video will play in a loop with audio muted.
Cross-References|交叉引用
要在视频中添加交叉引用,使用 cross-reference div 语法,并将其视为数字。例如
::: {#fig-cern}
{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}
The video "CERN: The Journey of Discovery"
:::
In @fig-cern...
渲染为:
如果您希望给视频加上不同于数字的标签和计数器,可以考虑定义自定义交叉引用类型。
视频 – Quarto 视频 – Quarto 视频 – Quarto Quarto