• (三) Markdown插入互联网或本地视频解决方案

    前言

    不论博客系统是WordPress还是Typecho，绕不开的是两种书写语言，一种称之为富文本，一种叫做Markdown。

    Markdown有很多好处，也有很多坏处，比如Markdown本身不具备段落居中的功能，以及Markdown也不具有插入视频的功能。

    HTML语法

    庆幸的是Markdown支持HTML的标签，可以在HTML中通过标签插入视频，在Markdown中，我们同样可以使用标签插入视频，具体格式如下：

    

    • 1
    • 2
    • 3

    或者

    

    • 1

    当然，除了.mp4它还支持其他的格式，但对于不同的浏览器支持的格式不一样，见下表：

    格式IEFirefoxOperaChromeSafari
    OggNo3.5+10.5+5.0+-
    MPEG49.0+NoNo5.0+3.0+
    WebMNo4.0+10.6+6.0+-

    此外，还有编码等限制，这里就不再介绍，感兴趣的小伙伴可以百度上学习一下。

    video 标签允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式，这样我们只要多准备几个不同格式的视频就可以了。

    用法：

    1. 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    其次，这是对一些参数的说明：

    autoplay: 出现该属性意味着视频在就绪后将自动播放，用法：autoplay="autoplay"

controls: 出现该属性意味着向用户显示控件，如播放按钮等，用法：controls="controls"

height: 设置高度     
width:设置宽度

loop:自动重播，用法：loop="loop"

preload: 视频在页面加载时进行加载并预备播放，用法：
        preload="auto" - 当页面加载后载入整个视频；
        preload="meta" - 当页面加载后只载入元数据；
        preload="none" - 当页面加载后不载入视频。
        注意：若使用了autoplay，则忽略preload

src: 要播放视频的url

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    video 标签插入本地视频

    1. 将视频文件复制到Hugo博客的项目文件夹中的一个特定位置，例如static/videos/目录下。确保视频文件在该目录下可用。

    2. 在Hugo博客的内容文件夹中找到想要添加视频的文章或页面。通常，这些文件位于content/目录下，具有.md或.markdown扩展名。

    3. 使用文本编辑器打开文章或页面文件。

    4. 在要插入视频的位置，使用以下Markdown语法添加视频标记：

    

    • 1
    • 2

    确保将 your-video-filename.mp4 替换为实际的视频文件名。请注意，路径以 /videos/ 开头，这是视频文件在静态文件夹中的相对路径。

    1. 保存并关闭文件。

    2. 运行Hugo命令以生成的博客。可以使用以下命令：

    hugo

    • 1
    1. 在生成的博客中查看文章或页面，视频应该嵌入其中。
      在这里插入图片描述

    请注意，视频格式支持可能因使用的Hugo主题而异。确保视频文件格式与主题兼容（通常支持常见的视频格式如MP4、WebM等）。

    iframe 标签插入本地视频

    如果想使用

    • 1

    确保将 your-video-filename.mp4 替换为实际的视频文件名。请注意，路径以 /videos/ 开头，这是视频文件在静态文件夹中的相对路径。

    1. 调整