这是一张Live Photo

如果正使用浏览器阅读，可以把鼠标移动到图片上，会自动播放一段手机录制的Live Photo视频短片。上面这张在公园拍摄的照片平平无奇，但是当听到视频中的蝉鸣时，就会一下把人拽到夏日荷塘边的树荫下。

苹果的Live Photo是我很喜欢的一个功能，它让照片有了更强的纪实性，又不会像长视频那么占存储空间。很佩服提出这个点子的人，不是什么黑科技创新，但是用户用着开心，自己家iCloud云存储也能小赚一笔，真的是奸商和用户双赢。昨天没事翻Photos的照片时突发奇想一般想，如果Myblog能支持Live Photo，应该也能让文章更加生动一些，这样Myblog也算有点特色功能了...

Live Photo并不是一种新的图片或视频格式，它导出后实际上是一张图片和一段短视频两个文件，所以也完全可以在浏览器中展示：使用<img><video>两个HTML元素，<video>默认隐藏，当鼠标移动到<img>上时隐藏图片显示并播放<video>就行了。

实际上直到我码完这个功能才发现苹果官方提供一个在web上渲染Live Photo的JS库LivePhotoKit JS。它的技术原理有点复杂，Live Photo的视频除了默认的顺序播放，还有循环，倒放，长曝光一共四个效果，LivePhotoKit会把视频加载到一个隐藏的<video>里，然后根据不同的效果把<video>画面抽出来逐帧渲染到<canvas>画布上。而我的这种简单实现方式只能实现顺序，循环两种效果。LivePhotoKit虽然功能强但是有个缺点：不能播放声音，这恰好是我最看重的功能。长嘘一口，代码没白写...

Myblog这个小项目让我找到了初学编程时的快乐，实现自己想法，不管有用没用，能不能赚钱。