前言

前段时间写 MoviePy 系列博客的时候，要把处理的视频效果展示出来，我按照图片的写法去写视频发现并不能渲染出来，然后又用 HTML 的方式发现还是不行，经过一番研究找到了办法。

渲染 HTML

按照图片的方式不能渲染视频，我第一时间就想到了使用 html ，于是我在 markdown 中这么写

1
2
3

<video controls preload="auto" >
      <source src="input.mp4" type="video/mp4">
</video>

然后使用 hugo 生成文章，发现还是不能渲染视频，这就纳闷了，我记得 markdown 是可以直接渲染 html 的，怎么不行了。

使用浏览器的检查来查看发现确实 video 这个标签都没有，被替换成下面这样

1

<!--raw HTML omitted-->

经过一番搜索，原来是 hugo 为了安全默认不能直接渲染，如果要渲染需要在博客的配置 config.toml 中加入如下配置

1
2

[markup.goldmark.renderer]
    unsafe = true

修改之后再次使用 hugo 生成新的文章就可以显示视频了。音频也一样。

shortcode

除了上面的方法还可以使用 shortcode 来实现，最开始找了好久都没办法，所以采用了这个办法。

由于我使用的主题 even 没有实现音视频的 shortcode 所以要自己实现

在你主题的 layouts/shortcode 目录下新建 video.html 文件，内容如下

1
2
3
4
5

<video class="video-shortcode" preload="{{ .Get "preload" }}" controls>
    <source src="{{ .Get "src" }}" type="{{ .Get "type" }}">
    There should have been a video here but your browser does not seem
    to support it.
</video>

然后在 makrdown 中这么使用

{{< video src=“input.mp4” type=“video/mp4” preload=“auto” >}}

重新生成文章就能渲染视频了。

音频的类似，在主题的 layouts/shortcode 下新建 audio.html ，内容如下

1
2
3
4

<audio class="audio-shortcode" preload="{{ .Get "preload" }}" controls>
    <source src="{{ .Get "src" }}" type="{{ .Get "type" }}">
    Your browser does not support the audio element
</audio>

在 markdown 中可以这么写

{{< audio src=“input.mp3” type=“audio/mp3” preload=“auto” >}}

同样重新渲染就能显示音频了。

总结

两种方法各有优劣，我目前使用的是 shortcode 方法，少写很多代码，这样不容易出错。

还可以方便定制，对参数进行处理。

第一种方法就要多谢一些模板代码了，和写 html 没有区别，只有几个还能接受，多了就麻烦了。

不过这样写比较直观，如果写错了很容易就可以发现问题。 shortcode 就稍微麻烦，出错了还有可能是引擎的问题，需要不断调试。

参考