Link

自己写一个实况照片网页组件？

Fri, 15 May 2026 00:00:00 +0000

因为苹果官方给的LivePhotoKit JS实在是台阶吧难用，于是乎自己动手写了一个…

我chovy，你们做组件给我做好了呀

起因是前几天在别人那里看到个很有意思的组件，可以在网页上放实况照片，而且体验和在ios上的实况照片几乎一致，上网搜了搜，发现苹果官方就给了LivePhotoKit JS这样的组件。

看了一下文档发现很简单，只要创建一个div在里面声明图片和视频的链接就可以生成实况照片了，于是在相册装了一个试试，开始前两天用着挺好的，可是后面用着用着发现很多问题，于是乎就自己写了一个Web.LivePhoto，不依赖官方库，对图片和视频的格式要求更宽松。

什么问题？

在用LivePhotoKit JS的时候经常会遇到实况照片无法播放的问题，很多错误的地方都很难找到原因，导致debug非常困难，而且实现的原理比较复杂，众所周知越复杂越容易出错，现在已知的错误有以下几种：

资源跨域

浏览器本身是允许img和video资源跨域的，但LivePhotoKit是使用XMLHttpRequest方法来加载视频和图片，再通过canvas绘制成一张图片，这样一来就会用js加载资源就会发生浏览器禁止跨域的问题，如果大家使用的是一些非正规图床，通常都是不允许跨域的，那这就会导致无法播放，修复起来又很麻烦。

视频格式

再一个就是LivePhotoKit在反复多次播放之后可能出现无法播放的问题，具体原因无法复现，而且出现频率不低，需要刷新页面后才能修复。对视频的格式要求很高，而且在请求视频时HTTP Content-Type返回的响应头需要是video/quicktime，否则也容易导致无法播放，编码必须为H.264编码（这个没得说，因为大部分浏览器不支持如H.265等其他编码），但是同样一个视频，通过ffmpeg转换出来的H.264视频可以播放，另一个软件转换出来的又不行，后面比对了两者的视频元数据，并没发现异常，我也不清楚是什么导致的无法播放，而且兼容性不太好，试过比如QQ自带的浏览器无法播放动态。

最开始想着看看LivePhotoKit的源码，看看为什么同样的H.264视频一个能播，另一个又不能播，可是看了源码发现，官方的实现实在是太复杂了，看的让人眼花缭乱，而且组件好像很久也没人维护了。

沃德发

凭什么浏览器能放的视频，用这个组件又无法播放了？所以我决定放弃LivePhotoKit，决定自己写一个，以最简单的方式实现：一张图片和一个视频叠一起，长按让图片淡出，视频淡入，同时播放视频，结束后视频淡出图片淡入，于是就有了这个Web.LivePhoto组件。

因为本质上就是一张图片和一个视频叠在了一起，所以对视频的格式、图片尺寸、视频尺寸等等几乎没有什么要求，浏览器能看，就能用。并且没有跨域问题。动画和UI上都是像素级还原LivePhotoKit，毕竟果子这UI做的还是不错的。

为了方便大家修改来适配自己的网站样式，把CSS分开了，其实也没什么内容，不过肯定有人有想自定义样式的需求。

食用文档

安装

下载 live-photo.css 和 live-photo.js 文件，在页面中引入：

<link rel="stylesheet" href="path/to/live-photo.css">
<script src="path/to/live-photo.js"></script>

以下是初始化方式，你当然可以自定义其他匹配规则：

初始化

默认方式

<script>
    // 默认：自动扫描所有 .live-photo 容器并初始化
    LivePhoto.init();
</script>

<script>
    // 指定选择器或元素，如查找所有id为myLivePhoto的元素
     LivePhoto.init('#myLivePhoto');
</script>

展示实况照片

展示！！以下方的html格式编写

<div class="live-photo" id="myLivePhoto">
    <img class="live-photo-img" src="https://example.com/cover.jpg" alt="...">
    <video class="live-photo-video" playsinline muted preload="auto" poster="https://example.com/cover.jpg">
        <source src="https://example.com/video.mp4" type="video/mp4">
    </video>
</div>

当然还可以用简写成：

<div class="live-photo" id="myLivePhoto">
    <img class="live-photo-img" src="https://example.com/cover.jpg" alt="...">
    <video class="live-photo-video" src="https://example.com/video.mp4" type="video/mp4" playsinline muted preload="auto"></video>
</div>

实际上就是一个div容器包裹了一张照片和一个视频，js会在默认情况下会自动寻找类名为live-photo的div容器，把类名为live-photo-img的图片和类名为live-photo-video的视频包装成实况照片。

目前在小米自带浏览器上会出现video标签被劫持的情况，具体表现是会破坏原有样式、显示出浏览器自带的播放控件（太流氓了），其他浏览器都正常显示~~（奇怪了劫持视频标签干嘛呀，不会是为了插播广告吧）~~

要破解只能使用fetch或XMLHttpRequest获取视频数据，转为Blob对象，再创建Blob URL赋给video标签，浏览器嗅探器就无法识别这类动态生成的 Blob URL，就不会被劫持了。但这样就不能跨域了，大家自己权衡吧= =，反正我觉得这类浏览器兼不兼容无所谓了..

使用Snackbar更优雅的通知

Sat, 04 Apr 2026 00:00:00 +0000

一直很喜欢谷歌的Material Design设计规范，我觉得非常规整，互动感强又不花哨，当安卓5.0推出MD设计语言之后特别喜欢当时根据MD规范设计的一些App，比如b站、酷安等，但是碍于国内软件生态最后还是没能推广开来…

但不得不说Material Design确实是非常出色的设计语言，在交互方面非常高效，我也喜欢很多Material Design元素，尤其特别喜欢Snackbar，相比较安卓5之前的Toast来说，Snackbar可交互，在显示一些短通知方面更加高效。

在MDUI的官网有Material Design的设计规范中文文档

而通过历代更新，Snackbar的样式也有了许多微小变化

然后就有了这个：Snackbar组件

仅需5kb就可以优雅地使用Sanckbar进行通知~

你可以在codepen.io查看 Snackbar Demo

使用说明

在 HTML 中通过 <script src=".../snackbar.js"></script> 引入。

参数说明：

参数	说明
message (string)	必填，提示文本
actionText (string)	可选，按钮文字
actionHandler (function)	可选，按钮点击的回调函数
duration (number)	自动收回延迟（毫秒），默认 3500，设为 0 则不自动关闭（常驻通知，必须通过交互等方式关闭）

调用方式：

基础消息: snackbar.show({ message: ‘操作成功’, duration: 3000 })

带操作按钮: snackbar.show({ message: ‘已删除’, actionText: ‘撤销’, actionHandler: () => { 这里写回调函数 } })

快捷调用: snackbar.info(‘纯文本消息’) 或 snackbar.action(‘消息’, ‘按钮’, callback)

又爆改了亿点点

Mon, 30 Mar 2026 00:00:00 +0000

抽空又改了一下这个小破站，为什么嘞，是因为Leancloud又搞事情了 ~~(要关服了悲)~~，我的评论系统又没着落了

小破站早期算是Valine的忠实用户，当时的竞争对手大多是一些第三方社会化评论系统，比如来必力(定制性太差)、Disqus(墙内体验不好)、友言(样式太老)，这几个都用过，最后觉得第三方评论系统样式与主题太割裂，体验不好。所以当时Valine的横空出世让我眼前一亮，刚好满足当时喜欢折腾想美化主题的需求。

后来一直是用的Valine+Leancloud来实现的评论系统，好处是非常方便，用Leancloud作为后端管理也非常方便，Valine这边呢也只需要写几行配置就能跑起来了，不过也有一些缺点，就是貌似Valine对Pjax的支持不太友好，我折腾了很久都没能让Valine完美兼容Pjax，我觉得有Pjax还是很重要的，但如果没评论区又会显得网站很无聊，最后只能舍弃Pjax了。

Leancloud向普通用户提供开发版应用，完全免费，其实当时选择这个评论方案还是有点顾虑的，~~因为免费的才是最贵的说不定哪一天就转为收费或者跑路了~~，但想着Leancloud好歹也是知名提供商，跑路其实不太可能，最不济最后转为收费后再考虑购买或者选择其他方案嘛。

但最近在登陆leancloud管理后台的时候，突然看到了官方发布的停止服务通知，一开始以为只是停止一些其他无关紧要的服务，但当我一点进去看的时候…我操，真他妈要停服了啊

Valine作为后端完全依赖Leancloud的评论系统，Leancloud停服意味着Valine像是离开水的鱼…活不了一点

这一天还是来了，Waline启动！

Waline是基于Valine衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine。新版本Waline比Valine功能更多，还对Pjax更友好。第一次知道这个还是在很多年前，那时候W还没有V那么完善…

但是数据迁移过程中，还是踩了好多坑，Valine创建的数据库内容和Waline有一点点不一样，导入的时候转换这些就花了好久时间。花了两天终于把数据迁移过来了，感觉有后端还是方便些。又搞了Waline和Instantclick的适配，终于实现无刷新了，终于感觉速度飞起来了

早知道，还是原道 pT-Tq

Tue, 28 Mar 2023 00:00:00 +0000

触发悔恨之泪，体温下降5°C，持续5天。

上个星期我原来的耳机泡水杯里了，虽然我也不知道为什么在我发现它的时候它会泡在水杯里，可能我听完随手往桌子上一丢不小心给一只丢进去了，拿出来的时候用纸巾吸了一下，竟然吸了满满一张纸，好家伙这小东西这么能吸 ~~(bushi~~

但是我不心疼，因为我不会告诉你这是我当初在拼夕夕9.9包邮买的…

震惊的是，当我吸干后，我想着等第二天干了再用试试看吧，然后没忍住，想试试这东西的质量，吸完还没干透我就插上手机开始听了一下，音质完全没差，NB，拼夕夕诚不欺我。

然后我突然想起来还有原道这玩意儿，以前总是看到别人玩梗，反正这次那条JBL耳机落在家里了，而且原道也便宜，想着买一条以防泡水耳机有天坏了。

主角登场！

如图所示，质量看起来可能不咋地，线材一般般，耳机塑料感也很重，麦克风用语音测了一下，感觉收音有点闷，不过是这个价位耳机自带麦克风的水平，也没什么好说。

这个线头空空的，有种经不起用力扯的感觉

还有就是线控按键的键感有总似曾相识的感觉，非常像以前各类玩具里拆出来的按键单元一样，哒哒哒的响声很大，塑料感也很重，虽然但是，我要给你看一个东西:

要啥自行车！貌似在我买完还降了一块钱，血亏，而且不带麦的版本最便宜只需要4.8。

重头戏

对于一个耳机，该说说它的音质了，当我戴上它的那一刻，泪，射了出来。

这个价位买的竟然有低音！！而且调音意外的不错，吊打万元以下耳机可能有些夸张了，但是在百元价位的耳机里还是非常能打的，看来大家能吹还是有点原因在里面的。中低频意外不错，但是高频有些不够清澈，也就是大家说的听人声不太行，但如果有均衡器设置的话，像我这样设置，可以改善很多高频不够清澈的问题，听人声也是没问题滴，我觉得调完调前完全是两个耳机 ~~(吊打万元！bushi~~

总的来说音质在百元价位还是可以打一打的，如果你平时用的都是万元耳机，你不信，买来一个原道听听，你会感觉音质真垃圾，但你平常用的就是百元价位的耳机…

你会觉得，我趣！音质真他妈好！

反正就是用10元地摊货的心态去买一个你就会得到大大的惊喜，要啥自行车嘛

早知道，还是原道 pq

byd疫情啥时候结束啊！

Sat, 22 Oct 2022 00:00:00 +0000

前两个月海南疫情就算了，还好在家延迟开学，后来海南控制住就过来开学了，尼玛来学校后又有疫情是什么鬼啊！我受不鸟啦！！

国庆那会还高高兴兴出去吃烧烤，回来过两天就封校了，刚开始还好，后来静默管理之后外卖也不能送了，我真是从来没见过食堂会有如此庞大的场面，里里外外排了好几圈…

无奈想去买泡面，然后看到超市门口:

妈的！不吃了！

还好前几天去超市买了点饼干，回去凑合吃吧(据知情人士得知超市里只剩即食汉堡了 ~~(俩面包夹一块速食肉饼那种)~~

完了桶装水的商家也送不进学校来，好在刚封校那几天和舍友一起买了瓶装的农夫山泉备着，一整箱24瓶，结账的时候学校超市卖了我48块，好啊你是一分钱没少啊，学校超市纯纯的发难财搁球场旁边卖水的阿姨都收不到我40块钱吧

坐地起价吃相着实有点难看

忽然想起小时候看了好多遍的乌龙院，有一节是画的非典疫情，虽然非典时期我还很小，而且当时海南据说也没有非典病例，根本就没印象，对非典的印象还停留在乌龙院中画的:

没想到多年以前的那一幕竟然会和今天如此相似，不过是新冠希望不久新冠能和非典一样悄悄消失永远不再出现吧

关于Valine无法读取Leancloud评论数据的解决方案

Sat, 09 Apr 2022 00:00:00 +0000

前不久Leancloud搞事情，导致好多用Valine评论插件的xdm都无法读取评论列表了，都出现了Code:-1，想~~(鸽)~~了好久终于找到了解决方法…

前几周一直被这个评论问题困扰了好久，因为近期我都没动过博客源码，而问题突然出现肯定是Leancloud出了问题，我以为是某个节点无法访问了，想必Leancloud过几天应该会自行恢复吧，然后……就~~咕咕咕~~

然鹅到了今天，评论还是没有恢复，仍然报错

Code -1: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

好吧，该排查一下是哪里的问题了

按照国际惯例，我们摁一下F12

果然看到个报错是api.lncld.net链接被拒绝了，难道这个接口行不通了？

去官网看看文档，果然在新闻页看到了一则关于接口更新的通知

国际版域名 us-api.leancloud.cn 已下线，使用旧版 SDK 需进行版本升级

但文中只写到了国际域名的更新，而我一直用的国内版本，往下翻也没看到国内版的更新通告，有没有可能国内版也更新了呢？

于是我决定去瞄一眼

果然给我换了…

而那个旧接口api.lncld.net，我记得在我安装插件的时候没有写过这个地址，所以推测应该在av-min.js里写死了，打开av-min.js搜索一下这个地址

搜到了，旁边还有国际接口的地址，把它替换成新的试试，马上就能正常读取了。

所以解决方案就出来了:

前往Leancloud后台，在设置>应用凭证里找到服务器地址 (REST API 服务器地址)

F12看被阻止的旧api地址

在av-min.js里将其替换

大功告成

另外在github里我看到了开发人员也注意到了这个问题，所以他们更新了av-min.js文件，这样一来用新版Valine的hxd应该不会出现这个问题，用老款的hxd可以用这个方案解决。

2021年度总结

Mon, 27 Dec 2021 00:00:00 +0000

时间过得好快，恍然记起，最开始发现疫情已经是两年前的事情了…而又是因为疫情让大家觉得这两年好像又什么都没干…

不过老传统还得保持，那就是每年都有的年终总结，总结我这年~~摸了多少鱼~~都干了些啥

#小站

先从博客开始说，这一年我就一直在摸233，没发多少文章，小站人气急剧下跌(呜呜呜)，要说这年做了啥大的，那就是把Hydrogen主题移植到了typecho上，虽说炒冷饭，但是通过这个我也是学了不少typecho主题建设的基础，也算是完成了以前的小小心愿

#学习

然后是学习，这学年升级到了二道杠嘿嘿

飞行员的四道杠分别代表: 专业、知识、技术、责任机长是四道杠，副驾是三道杠。也是一个成长的过程，上大学以来学习成绩和态度我觉得还行吧，没有挂科，每一门考试我也会去认真复习，成绩不能说太好，只能说过得去，对得起我自己

四级在今年6月份也考过了，接下来把理论都好好复习一遍，把期末考好，下学期就轻松多了嘿嘿下学期考完就准备复习考执照了，考完执照就等下分院，听学长说分院食堂巨好吃，难怪老师说大家下分院了都多多少少胖了点233

#摄影

说说爱好吧，今年年初的时候，突然喜欢上了拍照，然后拍了一会觉得手机的焦段远远不能满足我，然后入坑摄影，在4月24日买了自己的第一台相机，开始激情的拍摄！同时也把我的好基友@酚酞小韬韬拉进坑了，一起激情的拍摄咔咔咔咔咔

感觉摄影确实很有趣，在你上大学的时候，会有比高中多很多的空闲时间，你可以用摄影来消磨时间，一个人扛起相机出去扫街就是半天，也可以叫上同学出去一起扫，还可以叫上好朋友一起约拍糖水片，当入坑了以后，觉得自己没那么浮躁了，时常走在街上或者郊外会看到一些很美的光影和构图或者人文，感觉自己审美提高了不少还有就是因为有照片记录所以感觉今年回忆清晰不少，因为都被记录下来了，偶尔翻翻相册就会看到当天的图片和想起当天的具体事情，感觉蛮好

下面就是我挑的一些2021年拍的照片做的相册:

光影仅在一瞬，影像即是永恒。

下面是用过的镜头:

Canon 38-76mm F3.5-4.5 50mm F1.8

Sigma 50mm F1.4ART 85mm

Sigma APO 70-300mm F4 DG

#说说Future

继续学英语，把雅思5.5过了~~咱再摆烂~~(233)

好好学习，把理论课考好，然后私商仪考试争取一次过

这个寒假把驾照考完

还是希望能够早日战胜疫情，恢复以前的生活。然后新的一年以及未来我和我的家人都健健康康，万事顺意…

也希望大家能在新的一年有所成就

2021接近尾声，2022万事如意开开心心

浅谈CSS中元素如何优雅地"消失"

Sat, 25 Sep 2021 00:00:00 +0000

前几天重写导航栏菜单的时候，想给菜单加个动画，因为之前用的是display属性来控制隐藏和显示，但是这属性不支持CSS动画，要想支持css动画得用opacity visibility这俩了，可是用了这俩后发现有点小问题…

#出大问题

用了opacity visibility发现可以完美显示动画了，可是发现在手机上有部分区域无法点击了，起初我还以为手机屏幕出问题了，结果换了个手机那块区域还是无法点击，起初没注意到是菜单栏的问题，结果拿出电脑F12，发现内鬼竟然真的是菜单栏

后来才晓得，display属性会把元素直接移除，而opacity visibility只是把元素变透明了，而实际占用的面积还在，并且该元素下方的区域也无法点击(相当于遮罩)

那让元素有动画的同时优雅地”消失”，只能和JS一起配套食用咯，在CSS动画结束后把元素设置为display:none或者把元素的长宽设置为0

下面就是菜单栏的实例(菜单栏使用复选框实现):

window.onload=function(){
document.getElementById('fold').style.height='0px';//在打开页面时就把高度设置为0
}
function clean(){  document.getElementById('fold').style.height='0px';
}//将高度设置为0的函数

function checkit(isChecked){
 if(isChecked)
document.getElementById('fold').style.height='auto';//如果复选框勾选了就恢复高度
 else
  window.setTimeout(clean, 500);//否则在0.5秒的动画结束后执行clean函数将高度设为0
}

这样就能在拥有css动画的同时优雅的让元素从屏幕上滚开了

Protium For Typecho发布！

Fri, 17 Sep 2021 00:00:00 +0000

距离上次发布Hydrogen主题已经有两年半了，因为当时用的是Jekyll建的博客，所以出的是Jekyll版的，当时忘了跟谁说要出Typecho版的来着，因为当时觉得工作量有点大，所以咕掉了…

但是现在，她终于来了！

她的名字叫:

#Protium

n. 氕 [piē]

氢的同位素之一

:point_right:演示站点:point_right:项目地址

作为一款日记向的主题，她还是一如既往地简洁，突出写作主题，让阅读成为一种享受

不依赖加载拖泥带水的冗余框架文件，首页加载的样式表仅31.75kb，极速响应。每个页面都不会有频繁的网络请求，保证网页迅速通过渲染，不会堵塞

#简洁而不简陋

排版和设计经过精心裁剪，借鉴了Material Design，干净的界面也能营造美感，追求简明的同时，Protium加入了过渡动效，让页面不再那样僵硬，变得妙趣横生。

为了保证浏览器主线程的通畅，和保证浏览器的性能和动效的流畅性，所有动画均为css动画，避免使用JS绘制元素造成掉帧情况

#精心打磨

每一个像素都经过精心裁剪，通过测试，在极大多数环境下，网页样式都不会发生意外的位移、溢出、甚至错位，无论在各种屏幕大小的客户端上，Protium都能胜任。

#Typecho

Protium是基于Hydrogen For Jekyll的移植版，现已全面支持Typecho。

#主题文档

没啥文档，下载下来直接套进去用就行了~~233~~

#俺想说滴

主题制作不易，花了挺多心思，如果喜欢可以点一下star🦆 :+1:点star的都是靓仔靓妹！

主题完全免费，如果有💰的老板想赞赏小弟，那小弟就在这里祝各位老板身体健康，心想事成！

赞赏的大佬会出现在赞赏列表里喔

非常感谢对主题和我的支持！！

谈谈假性亲密

Mon, 13 Sep 2021 00:00:00 +0000

在一起了，但没完全在一起。

前几天在B站上刷到个视频，说的就是假性亲密具体说的如下：

和伴侣同床异梦? 彼此互相没有分享欲? 两个人一起约会像例行公事? 双方心照不宣，从不在朋友圈公开彼此? 和老公没有共同语言，像最熟悉的陌生人? 如果你遇到了上面的情境，那么你和他/她的关系可能是-种假性亲密关系。假性亲密关系不仅指恋爱关系，还可发生在家人、朋友、闺蜜之间。

看完这个视频觉得，和我以前那个前任真的太符合这种关系了，两人在一起约会像是在例行公事，没有过多的感情交流，再多的约会也没有感情进展，偶尔双方都很冷漠，没有共同语言像最熟悉的陌生人，我和她像是有一层隔阂，可能是经常因为观念不同吵架的原因，在一起三年了在我看来感情没有一点进展。有一说一，这样的关系真的非常非常累，这也是为什么我去年分手后没有感觉很伤心，而是感觉很~~轻松了~~，像放下了很重的担子。

如果你不理解假性亲密，那么请想想你和你的大学舍友，当在学校的时候你们玩得很好，像好基友一样，因为在大学期间就只有他们关系最好了，但是当放假回家了，你们之间变得不闻不问，除了涉及彼此的事情不会去联系，也不是讨厌，彼此之间心照不宣，知道不会像和你一起玩到大的朋友交心

上次谈恋爱谈了三年，谈到后面真的很累，你看着一个人慢慢变成了你讨厌的样子，你慢慢看出了她的真面目，公主病、女拳师、冷暴力…所以是两个人相爱就该在一起，但是两个人观念不同，必定要分开或者有人妥协。是找下一个观念一致的人，还是两个人相爱，爱超越了自己，然后妥协向另一方？

很难抉择，不过我选择了分开

我选择了放过自己

真累，去维持一段感情，本来上学期刚开学各种事情就已经很累了，还要因为这个觉得心累，真是精神肉体双重折磨，人都是饭饱思淫欲，我感觉我还是自己好好学习搞钱去吧，谈恋爱真的太累了，适合闲杂人等，我不闲，至少我不闲得慌

后来觉得谈恋爱暧昧期过了也就那么回事，约会还不如和好朋友出去玩舒服，无拘无束

感谢你看到了这里，那就来个预告吧！

不出意外~~(咕)~~的话，这个周末有Hydrogen的新版本和兄弟版本(暂时保密) :p

细心的童孩应该已经从某个账号看出来新主题的名字了