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

这篇具有很好参考价值的文章主要介绍了(三) Markdown插入互联网或本地视频解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

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

HTML语法

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

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

或者

<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 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。

用法:

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>

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

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语法添加视频标记:

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

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

  1. 保存并关闭文件。

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

hugo
  1. 在生成的博客中查看文章或页面,视频应该嵌入其中。
    markdown 嵌入视频,Hugo 插入视频,Hugo,Hugo 博客教程,Markdown 插入视频,Changhui 博客,Go,HTML

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

iframe 标签插入本地视频

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

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

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

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

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

<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命令以生成的博客。可以使用以下命令:

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

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

到了这里,关于(三) Markdown插入互联网或本地视频解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 互联网中的商品超卖问题及其解决方案:Java中Redis结合UUID的应用

    在设计商品下单和库存扣减,你一定遇到过这样的问题,库存扣减为0了,可是消费者还能下单,并将订单信息保存到了数据库里,针对商品超卖问题,作此篇以解决。 随着互联网商业的飞速发展,商品超卖问题逐渐凸显为电商平台面临的一大挑战。尤其是在大型促销活动期

    2024年02月04日
    浏览(39)
  • 基于EasyCVR视频技术的“互联网+监管”非现场监管视频监控系统设计方案

    一、方案背景 1、行业痛点 1)智能化水平弱,管理效率低:传统监管方式比较落后,智能化水平弱,监管工作完全依赖人工,导致人力成本过高、监管盲点多、效率低、服务质量差; 2)缺乏感知、预警和应急联动等能力:各单位违规行为、违规现象等突发事件应急联动效率

    2024年02月02日
    浏览(50)
  • Android开发音视频方向学习路线及资源分享,学完还怕什么互联网寒冬?

    好了,回归正题。 光看大纲,大家都知道要学习音视频录制,编码,处理,但是具体不知道怎么做,也不知道怎么入门。我自己在入门的时候也一样,靠着搜索引擎自己一点一点的积累,在这里当然要谢谢在该领域无私奉献的大佬们。所以在这里,我会对知识进行细化,运用

    2024年04月11日
    浏览(54)
  • 产业互联网:补齐互联网的「短板」,重启互联网的「进化」

    尽管在互联网时代出现了诸多的乱象,但是,我们依然无法否认互联网时代给人们的生产和生活带来的影响和改变。即使如此,我们依然无法否认互联网本身其实是存在着诸多的问题和弊病的,这些问题和弊病所导致的一个最为直接的结果,便是互联网本身无法成为解决产业

    2024年02月02日
    浏览(58)
  • 互联网医院系统|互联网医院平台改善就医方式

    在当今快节奏的生活中,互联网已经渗透到各个领域,医疗行业也不例外。互联网医院的出现,为人们提供了便捷的医疗服务,改变了传统医疗模式。本文将介绍互联网医院的系统功能、特点和优势,让您对互联网医院能够产生浓厚的兴趣。 一、系统功能 互联网医院以数字

    2024年02月11日
    浏览(57)
  • 互联网医院源码|互联网医院软件体现智慧医疗的优势

    现在大家看病一般都会直接在互联网医院平台上去就诊,每次大家需要看病时,可以在手机上直接去预约指定的医生,同城周边的所有医院都是可以去直接选择的,这样也可以去帮助大家节省很多的看病时间,在互联网医院软件中所具备的功能一般都是比较齐全的,那么互联

    2023年04月18日
    浏览(54)
  • 产业互联网的时代,就是互联网蝶变新生的时代

    不知道你有没有发现一个现象,即,现在那些所谓的新技术,几乎都是衍生于互联网,几乎都是由互联网玩家们开始衍生和发展起来的。区块链如此,云计算如此,前段时间火爆的ChatGPT和大模型,几乎都是如此。这些现象的背后,其实正在告诉我们,互联网正在从一个独立的

    2024年02月10日
    浏览(61)
  • 供求重构是产业互联网的核心 个体崛起是产业互联网的终点

    文章开头提到的网约车市场缘何会出现这样的困境?其中一个很重要的原因在于,建构于互联网模式之下的供求关系业已走到了尽头,仅仅只是依靠撮合和中介,仅仅只是凭借平台和中心开始无法破解供求两端的矛盾和问题。如何解决这一问题,其中一个很重要的原因就在于

    2024年02月14日
    浏览(47)
  • 客观和理性地看待产业互联网,寻找产业互联网的发展新路径

    当产业互联网呱呱坠地的时候,人们仅仅只是将它看成是一个互联网的孪生体,人们仅仅只是将它看成是一个互联网的变种。正是因为如此,我们才看到了以S2B为代表的新平台模式的衍生与出现。实践证明,仅仅只是以互联网的视角来看待产业互联网,发展产业互联网,是无

    2024年02月09日
    浏览(59)
  • 以前的互联网时代,其实就是一个以互联网技术为主导的年代

    事实上,以往,我们所经历的那个互联网玩家频出的年代,其实就是一个以互联网技术为主导的年代。在那样一个年代里,互联网技术几乎是解决一切痛点和难题的万能解药,几乎是破解一切行业痛点和难题的杀手锏。任何一个行业,只要是与互联网技术产生了联系,便开始

    2024年02月01日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包