Cyclists 发布的文章

bootcss cdn 已停止前端库 CDN 加速服务

国内的好多家前端资源公共库都不太稳定,新浪、百度、又拍、360都相继出过事故,前端资源无法加载等等翻车现场,让广大站长操碎了心。

很不幸的事还是发生了,BootCDN 中国最著名的公共 CDN 服务之一 (2013 - 2018.10) 倒闭了,虽然对我的网站没什么影响,但还是在V2EX炸开了锅。

只要你网站有引用 bootcdn 前端公共库资源,比如 css js 等等都会被重定向到 cloudflare 节点上,由于国内网络环境因素,cloudflare 到中国的速度并不怎么样,反而还会拖慢网站加载速度。

如果你的网站主题文件里有引用 bootcdn 公共库的资源链接就赶紧替换成其他的 CDN 前端公共库链接。

  • www.bootcdn.cn 上现在获取的文件链接全部是 cdnjs.cloudflare.com 的
  • BootStrap 中文网 v3 文档 中的「开始使用」里的 CDN 范例已经更改为 cdn.jsdelivr.net
  • www.bootcdn.cn 自己的静态文件都在用 cdn.jsdelivr.net 加载

BootCDN 已做 301 跳转并停止服务了。

前端公共库推荐:

  • css.loli.net
  • Staticfile.org
  • jsDelivr.com
  • cdnjs.com

如果您犹豫不决,不知道哪家稳定好用,可以参考此文评测:以全新的视角来评测公共 CDN

在 bootcdn 关闭服务并重定向到 cloudflare 加速节点之后,我就把我网站主题所有 bootcdn 引用的 js css 等等相关文件全部下载到本地并替换成本地链接进行加载。

Typecho Plyr HTML5 自适应本地 mp3/mp4 播放插件

20180925223901.png

Plyr

简单,轻便,可访问且可自定义的HTML5,YouTube和Vimeo媒体播放器,支持现代浏览器。

Features

  • Accessible - full support for VTT captions and screen readers
  • Customisable - make the player look how you want with the markup you
    want
  • Good HTML - uses the right elements. <input type="range">for volume
    and <progress>for progress and well, <button>s for buttons. There's
    no <span> or <a href="#"> button hacks
  • Responsive - works with any screen size
  • HTML Video & Audio - support for both formats
  • Embedded Video - support for YouTube and Vimeo video playback
  • Monetization - make money from your videos
  • Streaming - support for hls.js, Shaka and dash.js streaming playback
  • API - toggle playback, volume, seeking, and more through a
    standardized API
    ······

更多详情请访问 plyr 官网:https://plyr.io

上诉官方说明了支持哪些元素特征,比如支持API,字幕等等特征,基本的HTML5控制标签都支持,如果您需要其他的控件元素支持,请参考开源项目自行添加标签:https://plyr.io

由于之前本人使用过羽中的视频播放插件,但是有个致命的缺陷,那就是不能完全自适应,在某些设备上错位很严重,而且有些主题或者设备不能完全全屏播放,影响体验!自己尝试过修改源码,但由于是高度集成,修改起来吃力麻烦,放弃!

后来使用的是原生自带的HTML5元素控件代码来播放视频,控件样式体验很糟糕,视频中间大大的一个播放按钮看起来真的丑到爆,时间线样式也很难看,无意间搜索到 Plyr HTML5 看到它的默认播放界面真的很好看,今天抽空把官方提供的JS文件和CSS文件整合了,制作了一个插件。

既然官方提供了 MP3 播放源码,就一起集成了 MP3 音频播放和 MP4 视频播放功能,整合了其它控件元素,基本上保持与 Plyr 官网样式同步。

使用 HTML5 原生样式:

20180926000103.png

使用 Plyr HTML5 样式:

20180926001558.png

MP3 和移动端效果不提供预览,我自己测试时效果很棒,您可自行测试。

是不是马上觉得使用 Plyr HTML5 样式好看多了?如果您喜欢,就往下看吧。

功能:

  • PC 端与手机端自适应。
  • 与 Plyr 官方控件样式同步。
  • 只需一个插件,即可播放MP3/MP4。

安装:

下载地址:Plyr

下载之后自行上传到 Typecho 插件目录修改插件名为:plyr 并启用。

使用:

MP4:

<video src="https://xxx.com/xxx.mp4"></video>

带封面:

<video poster="https://xxx.com/xxx.jpg" src="https://xxx.com/xxx.mp4"></video>

MP3:

<div><audio src="http://xxx.com/xxx.mp3"></audio></div>

预览效果:https://inwao.com/Unbroken.html

注:此插件已集成 HTML 5 基本按钮元素控件,无需像原生 HTML 5 一样还要写入元素控件,只需一个视频地址即可播放。

由于设置了不自动播放,想设置MP3自动播放的,请添加自动播放 autoplay 标签或者修改源码 autoplay 标签。

目前仅在 Typecho1.0 测试OK,理论支持所有正式版与开发版,并没有加入 Youtube 与优酷、腾讯等在线视频功能,Youtube 被屏蔽,腾讯和优酷视频都有广告,只测试了本地视频播放,如您有兴趣,也可自己加入测试。

由于我设置了自适应,就不需要添加宽高元素了,如与原生元素发生冲突,保留带封面元素再删除其它元素控件,如果还需要添加其他的元素控件,请参考:https://github.com/sampotts/plyr

更新记录:

  • 加入播放速度功能。 9/25
  • 修改默认自动预加载,但不自动播放。 9/25
  • 修复同一篇文章不能播放两个视频,自动 Plyr 初始化。 9/26
  • 播放代码细节优化。9/29

「致骑行」愿你我永远年轻,永远热泪盈眶

08年开始热爱上自行车运动,那时候刚好高二,其实那时候并不怎么对自行车感兴趣,反而还觉得摩托车都比自行车好多了!

任何觉得不怎么样的事物,只要当你亲身体会之后才会发觉其中的美妙!所以,没那么多套路,没那么多矫情,没那么多热情满满的词语,仅此热爱而已,所以,我就这么入坑了。

玩自行车有些年头了,却也玩不出个所以然来...也只能自娱自乐,上不了台面,但也玩的尽兴玩的知足也岂不美哉!

之前也写过关于自行车的文章,但也跟随之前服务器数据迁移时不慎把数据也丢了,16年之前的文章也全没了,骑行去西藏的照片也丢了,虽不能把之前的文章一一复原并给大家看看,但它已经躺在我脑海中了。

20180922134533.jpg

骑自行车的这几年光景,认识了几个志同道合的兄弟,接触了更广阔的生活交际圈,也接触了形形色色的圈内圈外人,慢慢成长,岁月如水。

20180922134456.jpg

其实,我最开心的这几年是单车陪我度过的这几年,无忧无虑,想去哪骑着单车背着包就去了,去过西藏,甘肃宁夏,陕西西安,由于常年生活在广东珠海,广东省基本上已经骑完了,回忆总是美好的,虽然我现在以开车为主,但也对骑行充满着热爱...

20180922134540.jpg

人生之路是一段苦旅修行,没有谁能超然物外。只是人这一辈子所经历的远远超过了他生命的长度,那就是世事沧桑。谁要是对这苦乐人生没有感受和滋味,想必人生也是苍白无力的。

20180922134509.jpg

对了,有时候我也很矛盾,骑行改变了什么?又好像什么都没改变,说我骑自行车去那么远是傻逼的还是继续在嘲讽我傻逼,骑行回来之后领导也并没有赏识我,曾经自己喜欢的女孩子也并没有因为我骑行而崇拜我嫁给我,一切是那么照旧,但我发现自己对待事物的态度已悄然改变。

或许,这就是骑行的魅力!

探索,这才是修行的真谛!

我是我人生的见证者,也是我生命的践行者。我选择适合自己的,你呢?

备:以上照片拍摄于近一年时间,由于16年之前网站服务器数据迁移时导致本人大量的文章照片丢失,丢了就丢了吧,上个月又经历了一次数据丢失,这一次真不敢不备份了,数据为王!

「碟中谍6:全面瓦解」Mission.Impossible.Fallout.1080p

◎译  名 碟中谍6:全面瓦解/碟中谍6/不可能的任务:全面瓦解(台)/职业特工队:叛逆之谜(港)

◎片  名 Mission: Impossible - Fallout

◎年  代 2018

◎产  地 美国

◎类  别 动作/惊悚/冒险

◎语  言 英语/法语

◎上映日期 2018-07-27(美国)/2018-08-31(中国大陆)

◎豆瓣评分 8.3/10 from 170,694 users

◎豆瓣链接 https://movie.douban.com/subject/26336252/

◎片  长 147分钟/148分钟(中国大陆)

HDRip(种子磁力链接):

碟中谍6:[Mission.Impossible.Fallout.2018.720p.KORSUB.HDRip.XviD.MP3-STUTTERSHIT-[rarbg.to] 6.9GB

教训:在生产环境下测试脚本导致网站数据丢失

timg.jpg

十三号下午心血来潮想给当前网站伺服器装个BBR魔改加速,刚迁移过来没多久,旧伺服器在迁移完毕之后就清空了相关数据,本来还想在AWS后台设置一个快照,但是一看要钱,又觉得不就装个BBR嘛,心里想着装这BBR应该没事,因为我之前在 Vultr 上面也是无脑一键脚本都没事。

随便找了个魔改BBR脚本,无脑一键安装...装完提示重启,重启之后我傻了,开不了机,无法ping通,连VNC都无法进入,试了好几次之后,放弃!但是老子的网站数据啊,踏马的,肠子都悔青了,以后再也不在生产环境下作死了,特别是涉及到系统内核,SSH等等敏感信息一概不作死了,作死之前没有备份,旧伺服器的数据在迁移完后就删除了,这踏马的去哪恢复?

我电脑上的备份数据还是去年的,恢复?恢复就等于从头再来了...去 vultr 后台看了看居然有7月份的备份快照,惊喜...

恢复快照之后,又把旧伺服器的数据迁移到新伺服器上,又折腾了一次迁移网站,只丢失了一个多月的数据,几篇文章以及评论和阅读量,不过能有最新数据就万幸了,查网站快照又把丢失的文章补回来了,评论就不补了,丢了就丢了。

现在想想我自己真特么手贱加脑抽,快照一个月一包烟钱都要不完,何必自讨苦吃!!!

老子在这里只讲一件事:“备份,备份,还是他妈的备份!!!”