Github markdown 中的视频在 Chrome 中不显示，但在 Safari 中工作得很好

Question

我想在我的 github 投资组合中添加视频，我通过使用来做到这一点

![](/files/recording.mp4)

（mp4文件保存在files文件夹中）

但是，该视频在 Chrome/Edge 中无法显示，但在 Safari 中运行良好。 我尝试直接将视频拖到 Markdown 中，它以预览模式显示，但在所有浏览器中仅显示一个链接。

我该如何解决这个问题？

Answer 1

添加此主题hugo-video

了解主题

git submodule add https://github.com/martignoni/hugo-video.git themes/hugo-video

编辑config.yml

theme: ["hugo-video", "my-theme"]

使用它

{{< video src="sample-video.mp4" >}}

或

试试这个博客

它在hugo中添加了速记

video

layouts/shorthand/video.html

它利用 JS 视频播放器库clappr根据视频文件的 URL 创建一个播放器

layouts/shorthand/video.html

<div class="container">
    <div id="player-wrapper"></div>
</div>

<script 
type="text/javascript" 
src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"
>
</script>

<script>
    var playerElement = document.getElementById("player-wrapper");

    var player = new Clappr.Player({
        source: {{ .Get 0 }},
        
        mute: true,
        height: 360,
        width: 640
    });

    player.attachTo(playerElement);  
</script>

然后在您需要视频的帖子中您可以做

this is my video
{{< video "video.mp4" "my-5" >}}

两者都以相似的方式完成任务！前者使用视频 html 标签，在我看来很干净，后者使用 JS 库，感觉有点混乱。

Answer 2

我同意@philipmathieu。通常github会加载视频预览。然而，有时，特别是在上传视频后，我只会收到文本，而没有视频预览，如下所示：

your_project/assets/28913157/bc4e9639-43a5-4937-bb64-ffa0c9f64a21

要强制视频预览，请将其放在您的 Markdown 文件中。

<video src='your_project/assets/28913157/bc4e9639-43a5-4937-bb64-ffa0c9f64a21' />

Answer 3

在 Markdown 文件中显示视频的最稳定方式：

1. 将视频上传到 Github CDN（而不是将其放在您的存储库中）。

   最简单的方法是打开一个新问题并将文件拖到字段中。复制创建的URL；他们应该以

   https://github.com/user-attachments/

   开头

2. 将原始链接粘贴到您的 Markdown 文件中。您需要上方有一个空行，下方有一个空行:

## My video

https://github.com/user-attachments

您可以在这里找到一个工作示例：https://github.com/manolo-lolo/sudoku-simulated-annealing

Answer 4

由于 Markdown 规范因平台而异，视频支持可能不一致。最简单的解决方案是使用 HTML 视频标签：

<video src='/files/recording.mp4' />

这还有一个额外的好处，那就是允许您使用 HTML/CSS 设置样式。