Hugo网站在文章页面中插入视频

技术笔记

在 Hugo 搭建的网站中，在编辑文章页面 Markdown 文件时，可以使用以下两种方法在文件中插入视频：

  1. 使用 Hugo 短代码

Hugo 提供了 video 短代码来插入视频。使用 video 短代码，可以将视频的路径、类型、宽度和高度等属性指定为参数。

例如，以下代码将插入一个 MP4 视频：

{{< video src="/videos/example.mp4" type="mp4" width="320" height="240" >}}

  1. 使用 HTML 代码

也可以使用 HTML 代码来插入视频。例如，可以使用以下代码插入一个 MP4 视频：

<video width="320" height="240" controls>
  <source src="/videos/example.mp4" type="video/mp4">
</video>

视频的最佳存放目录是网站根目录下的 static 目录。这样做的原因是：

static 目录是 Hugo 网站默认的静态资源目录。将视频放在 static 目录下，可以确保视频能够被正确加载。 将视频放在 static 目录下，可以方便地管理视频资源。

注意事项

在插入视频时，请注意视频的格式。Hugo 网站支持的视频格式包括 MP4、MOV、AVI、WMV 和 FLV。 在插入视频时，请注意视频的大小。过大的视频会影响网站的加载速度。 在插入视频时，请注意视频的版权。如果您使用的是来自互联网上的视频，请确保您有权使用该视频。 以下是一些插入视频的示例：

{{< video src="/videos/example.mp4" type="mp4" width="320" height="240" >}}

<video width="320" height="240" controls>
  <source src="/videos/example.mp4" type="video/mp4">
</video>

下面是使用hugo短代码插入的Youtube视频

下面是使用自定义的 shortcode 来在 Markdown 文件中插入 Bilibili 视频：

具体步骤如下:

创建一个新的 shortcode 文件 在网站根目录下的/layouts/shortcodes/ 目录下创建一个名为 bilibili.html 的文件。

编写 shortcode 模板 在 bilibili.html 文件中，添加以下内容:

<!-- 使用容器包裹视频，并设置padding-top为56.25%（16:9的宽高比） -->
<div style="position: relative; width: 100%; padding-top: 56.25%;">
    <iframe src="//player.bilibili.com/player.html?bvid={{ .Get 0 }}&page=1" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
</div>

在 Markdown 中使用 shortcode
在需要插入 Bilibili 视频的地方,使用以下格式调用 shortcode:
{{< bilibili BV1B7411x7vx >}} 其中"BVxxxxxxxxx" 是某个视频的标识符，在视频的链接中可以找到