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

前言

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

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

HTML语法

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

HTML 复制代码
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

或者

HTML 复制代码
<video src="movie.mp4.mp4" controls="controls" width="500" height="300"></video>

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

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ -
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ -

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

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

用法:

HTML 复制代码
1. <video width="500" height="250" controls="controls">

2. <source src="movie.ogg" type="video/ogg">

3. <source src="movie.mp4" type="video/mp4">

4. </video>

其次,这是对一些参数的说明:

HTML 复制代码
autoplay: 出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"

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

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

loop:自动重播,用法:loop="loop"

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

src: 要播放视频的url

video 标签插入本地视频

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

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

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

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

HTML 复制代码
<video src="/videos/your-video-filename.mp4" autoplay="true" controls="controls" width="800" height="600">
</video>

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

  1. 保存并关闭文件。

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

bash 复制代码
hugo
  1. 在生成的博客中查看文章或页面,视频应该嵌入其中。

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

iframe 标签插入本地视频

如果想使用 <iframe> 标签来嵌入本地视频,可以按照以下步骤进行操作:

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

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

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

  4. 在要插入视频的位置,使用以下Markdown语法添加 <iframe> 标签:

HTML 复制代码
<iframe src="/videos/your-video-filename.mp4" width="640" height="360" frameborder="0" allowfullscreen></iframe>

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

  1. 调整 <iframe> 标签的宽度(width)和高度(height)属性,以适应希望视频显示的尺寸。

  2. 保存并关闭文件。

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

bash 复制代码
hugo
  1. 在生成的博客中查看文章或页面,的视频应该嵌入其中。

请注意,使用 <iframe> 嵌入本地视频时,需要确保视频文件格式与浏览器兼容,并且浏览器支持该视频格式。另外,某些安全策略可能会限制在 <iframe> 中加载本地文件。如果遇到问题,可以尝试将视频文件上传到可公开访问的文件托管服务,并使用其提供的嵌入代码。

相关推荐
Bolt11 小时前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
Go_error15 小时前
Datatypes:Go 轻松支持数据库JSON类型
后端·go
任沫1 天前
Agent之Function Call
javascript·人工智能·go
唐青枫2 天前
别再把 interface 当万能盒子:Go 接口从隐式实现到项目解耦
go
anOnion2 天前
构建无障碍组件之Menu Button pattern
前端·html·交互设计
米丘3 天前
微前端之 Web Components 完全指南
微服务·html
tyung5 天前
Go 手写有界 SPSC 环形队列:无 CAS、无锁、Cache 友好的无锁模型
后端·go
喵个咪5 天前
技术复盘:基于 go-wind-cms 的官网+商城双业务渐进拆分实战
后端·架构·go
止语Lab5 天前
Go context 超时传播:你以为设了就安全了
go
Metaphor6926 天前
使用 Python 将 PDF 转换为 HTML
python·pdf·html