都2020年了,现在最流行的就是什么直播弹幕短视频,你的博客要是还不支持插视频那可就OUT啦! 我的博客目前使用Markdown写文,可惜它原生的语法并不支持视频,于是只能自己来实现这功能了。 视频好处都有啥?视频是个好东西啊,它要不好现在的直播弹幕短视频怎么火的……咳咳,扯远了,就说写博客,比如写教程啊总会遇到需要动态演示的东西吧,比如我自己的纯CSS解决图片加载的布局移动问题里一开头的动图(其实是视频啦),要用图片或者文字来说明文本下移的现象肯定没有动态的演示好。 另外玩过Twitter的都知道它里面插入的GIF图会转换为视频,GIF是1987年发明的东西,在我看来早是就该进入垃圾堆的技术,因为当年浏览器不支持视频才得以流行。动图这一技术完全能被视频所替代,视频本身就不是一连串图像的序列吗(当然还包括声音)。 在性能上,H.246编码的视频体积仅为GIF的13分之一,虽然GIF也有gifsicle能压缩一下,但效果仍不如视频。 从我的实际经验来看,技术类文章里大部分动态演示都来源于录屏,录屏软件生成的本来就是视频格式,把它们转GIF多此一举。综上所述,视频的支持是一个现代化博客必需的功能。 语法的选择Markdown版本演进已经有其它的文章写过了https:///post/5baa5b346fb9a05d2d0225cc#heading-6 主要的几个Markdown版本原生都不支持视频,我不知道它的作者是怎么想的,如此重要的功能竟然能没有。既然官方没有,那就自己做呗,于是种各样的实现方案就跑了出来,按照本人强迫症的做法当然要对比一番。 直接插HTML这是我看到的最多的做法,其优势就是简单,现有的转换库都支持写HTML,但我认为这种方式并不好。
这缺点太多,所以我决定还是得用Markdown的方式来做。 GitLab Flavored MarkdownGitLab Flavored Markdown(下称GFM)是Markdown的一种修改版,它复用了图片的语法,以扩展名来区分媒体的类型,比如 GFM的支持也很广泛,实现又简单,还有GitLab背书,自然也是个不错的选择。 但它的缺点也很明显,强制了链接的文件名必须是视频常用的扩展名,然而并不是所有链接都是如此,Twitter的视频链接就没有扩展名。另外既然都修改了原始的Markdown语义,何不直接另起一个新语法呢? 自己编个语法关于自定义的语法有很多讨论,我认为比较好的一种是使用通用指令语法,它的格式是 最终我决定使用这种语法,它跟原生的图片语法一样简洁,又给足了自由发挥的余地。 通常来说,新的语法最好还是跟现有的保持相似,这里就以语法比较像的图片为基准。圆括号仍然跟图片一样包含视频的链接,方括号里填标签(GIF)或者poster(视频)。 通用指令语法里,花括号用来放置 指令类型包含GIF视频和普通视频,另外Markdown同样不支持插入音频这里也给补上,所以最终的语法为:
解析器的实现我的博客使用markdown-it来转换Markdown为HTML,markdown-it 的流程分为解析和渲染两部分,所以要给这两个地方编写自己的函数实现。 首先是怎么识别 综上所述,我决定不支持计数了,斜杠转义用一个前向环视
把它们三个连起来就可以匹配通用指令语法啦。 Markdown有块 最后要注意一下的是反转义和XSS检查,这些函数在markdown-it库里已有提供。 解析器代码见kaciras-blog/web-server/packages/server/lib/markdown-media.ts 不同的渲染目标Markdown渲染出来的HTML是跟场景相关的,比如在RSS里渲染的结果应尽量简单,毕竟阅读器的样式是没法由我来控制的;而在我的博客网站里,会有一些额外的样式和元素来展现更好的效果,比如提前固定宽高比防止布局移动、居中等。 在我的博客,GIF视频通过隐藏控制面板、静音、给下面加标签、以及IntersectionObserver实现的自动播放/暂停,实现了跟GIF图片一样的效果。另外由于RSS阅读器不会加载我的博客的样式表,也不会运行JS,所以RSS阅读器里的GIF视频只能跟普通视频一样。 除了这俩之外,我还准备让评论系统也使用Markdown(暂未实现),这又是一个新的渲染目标,用户评论属于第三方输入,对其的渲染必须加入一些限制以防滥用。 对无法控制的前端,渲染实现跟解析器写在一起,见上面的链接。 我博客的渲染实现见kaciras-blog/website/blob/master/src/markdown/media.js |
|