(三) 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.rhkb.cn/news/147679.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

osg实现鼠标框选

目录 1. 需求的提出 2. 具体实现 2.1. 禁止场景跟随鼠标转动 2.2. 矩形框前置绘制 3. 附加说明 3.1. 颜色设置说明 3.2.矩形框显示和隐藏的另一种实现 1. 需求的提出 有时需要在屏幕通过按住键盘上的某个键如Ctrl键且按住鼠标左键&#xff0c;拖出一个矩形&#xff0c;实现框…

Java自学(二)

目录 一、数组逆置&#xff08;临时变量法&#xff09; 二、基本类型和引用类型传参的区别 一、数组逆置&#xff08;临时变量法&#xff09; 二、基本类型和引用类型传参的区别 基本类型传参&#xff0c;形参一般不会改变实参。 形参是实参的一份数据拷贝&#xff0c;改变形…

(unordered)map和set封装(底层红黑树)

map和set封装 文章目录 map和set封装设计问题&#xff08;知其所以然&#xff09;为什么要对iterator进行封装&#xff1f;为什么要引入Self Ref Ptr这些模板参数&#xff1f;为什么是试图从non_const转变为const&#xff0c;而不是const转为non_const如何解决 为什么说能加con…

黑马头条项目环境搭建

注册中心网关配置 spring:cloud:gateway:globalcors:add-to-simple-url-handler-mapping: truecorsConfigurations:[/**]:allowedHeaders: "*"allowedOrigins: "*"allowedMethods:- GET- POST- DELETE- PUT- OPTIONroutes:# 平台管理- id: useruri: lb://…

Redis最常见的5种应用场景

Redis作为当今最流行的内存数据库&#xff0c;已经成为服务端加速的必备工具之一。对于Redis为什么那么快&#xff1f;以及Redis采用单线程&#xff0c;但为什么反而获得更高的性能的疑问&#xff0c;在之前的Redis为什么那么快&#xff1f;一文中&#xff0c;已经有所介绍。 …

postgresql-自增字段

postgresql-自增字段 标识列IdentitySerial类型Sequence序列 标识列Identity -- 测试表 create table t_user( -- 标识列自增字段user_id integer generated always as identity primary key,user_name varchar(50) not null unique );-- 自动生成序列 CREATE SEQUENCE public…

专业PDF编辑阅读工具PDF Expert mac中文特点介绍

PDF Expert mac是一款专业的PDF编辑和阅读工具。它可以帮助用户在Mac、iPad和iPhone等设备上查看、注释、编辑、填写和签署PDF文档。 PDF Expert mac软件特点 PDF编辑&#xff1a;PDF Expert提供了丰富的PDF编辑功能&#xff0c;包括添加、删除、移动、旋转、缩放、裁剪等操作…

Ai4science学习、教育和更多

11 学习、教育和更多 人工智能的进步为加速科学发现、推动创新和解决各个领域的复杂问题提供了巨大的希望。然而&#xff0c;要充分利用人工智能为科学研究带来的潜力&#xff0c;我们需要面对教育、人才培养和公众参与方面的新挑战。在本节中&#xff0c;我们首先收集了关于每…

Java下正面解除警告Unchecked cast: ‘java.lang.Object‘ to ‘java.util.ArrayList‘

就是我在反序列化时&#xff0c;遇到这样一个警告&#xff1a; Unchecked cast: java.lang.Object to java.util.ArrayList<com.work1.Student>然后我去网上查&#xff0c;有些人说用SuppressWarnings(“unchecked”)去忽略警告&#xff0c;但是我觉得作为一名合格的程序…

阅读LINGO-1: Exploring Natural Language for Autonomous Driving

1 背景2 Motivation3 具体过程 1 背景 wayve在9月14日公布了大语言模型和自动驾驶的结合模型LINGO-1&#xff0c;可以用自然语言解释自动驾驶的决策原因。 网页链接&#xff1a;https://wayve.ai/thinking/lingo-natural-language-autonomous-driving/ 但是目前没有论文和开源…

力扣 -- 279. 完全平方数(完全背包问题)

解题步骤&#xff1a; 参考代码&#xff1a; 未优化代码&#xff1a; class Solution { public:int numSquares(int n) {const int INF0x3f3f3f3f;int msqrt(n);//多开一行&#xff0c;多开一列vector<vector<int>> dp(m1,vector<int>(n1));//初始化第一行…

证书显示未受信任,生成的证书过期

此时若是导入证书后&#xff0c;证书显示未受信任&#xff0c;则说明我们缺失最新的AppleWWDRCA证书 解决方案&#xff1a; 重新下载AppleWWDRCA并安装。即下载最新的AppleWWDRCA证书&#xff0c;双击安装到“登录”项的钥匙串下&#xff1b;然后再安装你的开发证书或者发布证书…

MySQL-MVCC(Multi-Version Concurrency Control)

MySQL-MVCC&#xff08;Multi-Version Concurrency Control&#xff09; MVCC&#xff08;多版本并发控制&#xff09;&#xff1a;为了解决数据库并发读写和数据一致性的问题&#xff0c;是一种思想&#xff0c;可以有多种实现方式。 核心思想&#xff1a;写入时创建行的新版…

同学苹果ios的ipa文件应用企业代签选择签名商看看这篇文章你再去吧

同学我们要知道随着互联网的发展&#xff0c;苹果应用市场的火爆&#xff0c;越来越多的开发者加入到苹果应用开发行业中来。同时&#xff0c;苹果应用市场上的应用也在不断增多&#xff0c;用户数量也在不断增加&#xff0c;苹果应用代签是指通过第三方公司为开发者的应用进行…

电商项目常用的五个设计模式场景及分析实现

电商设计模式总结 1 单点登录模 1 业务介绍 单点登录&#xff08;Single Sign-On, SSO&#xff09;模块允许用户在多个相关应用系统之间进行无缝的身份验证。用户只需登录一次&#xff0c;然后可以访问所有连接的应用程序而无需重新登录。在电商应用中&#xff0c;这对于提供…

【React】组件实例三大属性state、props、refs

state React 把组件看成是一个状态机&#xff08;State Machines&#xff09;。通过与用户的交互&#xff0c;实现不同状态&#xff0c;然后渲染 UI&#xff0c;让用户界面和数据保持一致。 React 里&#xff0c;只需更新组件的 state&#xff0c;然后根据新的 state 重新渲染用…

互联网Java工程师面试题·ZooKeeper 篇·第一弹

目录 1. ZooKeeper 面试题&#xff1f; 2. ZooKeeper 提供了什么&#xff1f; 3. Zookeeper 文件系统 4. ZAB 协议&#xff1f; 5. 四种类型的数据节点 Znode 6. Zookeeper Watcher 机制 -- 数据变更通知 7. 客户端注册 Watcher 实现 8. 服务端处理 Watcher 实现 9. 客…

CharacterEncodingFilter的用法

CharacterEncoding是SpringMVC提供的一个一个过滤器,用于设置请求和响应的字符编码,解决乱码问题,他本身是一个过滤器 那么在SpringBoot中,CharacterEncoding就有一个很好的秒用 setEncoding("UTF-8")设置编码 setForceEncoding(true) 设置请求和响应编码 还需要在配…

uniapp项目实践总结(二十五)苹果 ios 平台 APP 打包教程

导语:当你的应用程序开发完成后,在上架 ios 应用商店之前,需要进行打包操作,下面就简单介绍一下打包方法。 目录 准备工作注册账号生成证书打包配置准备工作 在打包之前,请保证你的 uniapp 应用程序编译到 ios 模拟器或者是真机调试基座环境下是可以正常运行的,苹果打包…

《C和指针》笔记30:函数声明数组参数、数组初始化方式和字符数组的初始化

文章目录 1. 函数声明数组参数2. 数组初始化方式2.1 静态初始化2.2 自动变量初始化 2.2 字符数组的初始化 1. 函数声明数组参数 下面两个函数原型是一样的&#xff1a; int strlen( char *string ); int strlen( char string[] );可以使用任何一种声明&#xff0c;但哪个“更…