(三) 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它还支持其他的格式,但对于不同的浏览器支持的格式不一样,见下表:

格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+-
MPEG49.0+NoNo5.0+3.0+
WebMNo4.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,则忽略preloadsrc: 要播放视频的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. 在生成的博客中查看文章或页面,视频应该嵌入其中。
    在这里插入图片描述

请注意,视频格式支持可能因使用的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> 中加载本地文件。如果遇到问题,可以尝试将视频文件上传到可公开访问的文件托管服务,并使用其提供的嵌入代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/149074.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Java架构师职责和技能

目录 1 架构师简介2 架构师职责2.1 架构师是技术领导架构设计做决策2.2 架构师可以是团队或者组织2.3 架构师必须掌握足够的技术知识2.4 架构师必须掌握足够的架构设计技能2.5 架构师必须具备很好的编程能力2.6 架构师必须深入理解业务及其业务的领域知识2.7架构师应该具备很好…

基于Java的驾校收支管理可视化平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

二层VLAN配置实验

四台PC的IP地址如图所示&#xff0c;子网掩码均为255.255.255.0&#xff0c;四台PC处在同一个局域网之中&#xff0c;在配置VLAN之前能够彼此ping通。配置的目的是将PC1和PC3划分到VLAN10中&#xff0c;PC2和PC4划分到VLAN20中。 在配置之前需要进入系统视角。 创建VLAN 在两…

设计加速!11个Adobe XD插件推荐!

你是否一直在寻找可以提升 Adobe XD 工作流程和体验的方法&#xff1f;如果是&#xff0c;一定要试试这些 Adobe XD 插件&#xff01;本文将介绍 11 款好用的 Adobe XD 插件&#xff0c;这些插件可以为 UI/UX 设计添加很酷的新功能&#xff0c;极大提升你的工作效率和产出。让我…

SQL与关系数据库基本操作

SQL与关系数据库基本操作 文章目录 第一节 SQL概述一、SQL的发展二、SQL的特点三、SQL的组成 第二节 MySQL预备知识一、MySQL使用基础二、MySQL中的SQL1、常量&#xff08;1&#xff09;字符串常量&#xff08;2&#xff09;数值常量&#xff08;3&#xff09;十六进制常量&…

论文学习:RT-DETR

RT-DETR 摘要 DETR取得显著性能&#xff0c;但高成本计算使其无法发挥无NMS的优势&#xff0c;无法实际应用。本文分析了NMS对准确性和速度的负面影响&#xff0c;并建立端到端的速度基准。第一个实时端到端检测器&#xff0c;高效处理多尺度特征&#xff0c;并提出IoU-aware…

osgPBR(十五)镜面IBL--查看不同级别的HDR环境贴图

首先&#xff0c;设置可以使用Mipmap&#xff0c;启用三线性过滤&#xff0c;设置最大级别和最小级别 osg::ref_ptr<osg::TextureCubeMap> tcm new osg::TextureCubeMap; tcm->setTextureSize(128, 128);tcm->setFilter(osg::Texture::MIN_FILTER, osg::Texture:…

《幸福之路》罗素(读书笔记)

目录 作者简介 作者的感悟 经典摘录 一、不幸福的成因 1、一部分要归咎于社会制度 2、一部分则得归咎于个人心理——当然&#xff0c;你可以说个人心理是社会制度的产物。 二、欠缺某些想要的东西&#xff0c;是快乐的必要条件 三、无聊与刺激 四、现代人的精神疲劳 五…

【C++】vector相关OJ

文章目录 1. 只出现一次的数字2. 杨辉三角3. 电话号码字母组合 ヾ(๑╹◡╹)&#xff89;" 人总要为过去的懒惰而付出代价ヾ(๑╹◡╹)&#xff89;" 1. 只出现一次的数字 力扣链接 代码展示&#xff1a; class Solution { public:int singleNumber(vector<i…

【“栈、队列”的应用】408数据结构代码

王道数据结构强化课——【“栈、队列”的应用】代码&#xff0c;持续更新 链式存储栈&#xff08;单链表实现&#xff09;&#xff0c;并基于上述定义&#xff0c;栈顶在链头&#xff0c;实现“出栈、入栈、判空、判满”四个基本操作 #include <stdio.h> #include <…

大数据-玩转数据-Flink SQL编程实战 (热门商品TOP N)

一、需求描述 每隔30min 统计最近 1hour的热门商品 top3, 并把统计的结果写入到mysql中。 二、需求分析 1.统计每个商品的点击量, 开窗2.分组窗口分组3.over窗口 三、需求实现 3.1、创建数据源示例 input/UserBehavior.csv 543462,1715,1464116,pv,1511658000 662867,22…

基于阶梯碳交易的含P2G-CCS耦合和燃气掺氢的虚拟电厂优化调度(matlab代码)

目录 1 主要内容 系统结构图 P2G-CCS 耦合模型 其他算例对比 2 部分代码 3 下载链接 1 主要内容 该程序复现《基于阶梯碳交易的含P2G-CCS耦合和燃气掺氢的虚拟电厂优化调度》模型&#xff0c;以碳交易和碳封存成本、燃煤机组启停和煤耗成本、弃风成本、购气成本之和为目标…

vertx的学习总结6

Beyond the event bus 一、章节覆盖&#xff1a; 如何在事件总线之上公开服务 verticles和事件总线服务的异步测试 动态代理&#xff1a; MyService 接口 package porxy.test;import io.vertx.codegen.annotations.ProxyGen;ProxyGen public interface MyService {void he…

智慧公厕:城市公共厕所的未来之路

随着城市化进程的不断推进&#xff0c;人们对城市环境质量的要求也越来越高。在城市管理中&#xff0c;公厕作为一个必不可少的公共设施&#xff0c;不仅关乎城市的文明形象&#xff0c;还与市民的生活质量密切相关。为了解决传统公厕存在的问题&#xff0c;智慧公厕应运而生。…

Go-Python-Java-C-LeetCode高分解法-第八周合集

前言 本题解Go语言部分基于 LeetCode-Go 其他部分基于本人实践学习 个人题解GitHub连接&#xff1a;LeetCode-Go-Python-Java-C 欢迎订阅CSDN专栏&#xff0c;每日一题&#xff0c;和博主一起进步 LeetCode专栏 我搜集到了50道精选题&#xff0c;适合速成概览大部分常用算法 突…

大模型部署手记(3)通义千问+Windows GPU

1.简介 组织机构&#xff1a;阿里 代码仓&#xff1a;GitHub - QwenLM/Qwen: The official repo of Qwen (通义千问) chat & pretrained large language model proposed by Alibaba Cloud. 模型&#xff1a;Qwen/Qwen-7B-Chat-Int4 下载&#xff1a;http://huggingface…

【AI视野·今日Sound 声学论文速览 第十八期】Wed, 4 Oct 2023

AI视野今日CS.Sound 声学论文速览 Wed, 4 Oct 2023 Totally 4 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Mel-Band RoFormer for Music Source Separation Authors Ju Chiang Wang, Wei Tsung Lu, Minz Won最近&#xff0c;基于多频段频谱图的方法…

windows server 2012 服务器打开系统远程功能

服务器上开启远程功能 进入服务器&#xff0c;选择“添加角色和功能” 需要选择安装的服务器类型&#xff0c;如图所示 然后在服务器池中选择你需要使用的服务器。 选择完成后&#xff0c;在图示列表下勾选“远程桌面服务” 再选择需要安装的功能和角色服务。 选择完成确认内容…

大模型部署手记(4)MOSS+Jetson AGX Orin

1.简介 组织机构&#xff1a;复旦大学 代码仓&#xff1a;GitHub - OpenLMLab/MOSS: An open-source tool-augmented conversational language model from Fudan University 模型&#xff1a;fnlp/moss-moon-003-sft-int4 下载&#xff1a;https://huggingface.co/fnlp/mos…

C++_pen_友元

友元&#xff08;破坏封装&#xff09; 我故意让别人能使用我的私有成员 友元类 friend class B;友元函数 friend void func();友元成员函数 friend void A::func();例 #include <stdio.h>class A;class C{ public:void CprintA(A &c); };class B{ public:void Bpri…