先日Appleから LivePhotos をWebでも再生できるようにした、LivePhotosKit JS が公開されたので、そのwrapper的なReactコンポーネントを作成しました
ターミナルで以下を実行すれば使うことができます
$ npm install --save @henteko/livephotskit-react
使い方
基本的にはLivePhotosKit JSの公式ドキュメントを参考にしてもらえたら、シンプルなwrapperなので問題はないと思います
https://developer.apple.com/reference/livephotoskitjs
こんな感じで簡単に使えます
import React, { Component } from 'react'
import LivePhotosKitReact from '@henteko/livephotoskit-react';
class App extends Component {
render () {
return (
<div className="App">
<LivePhotosKitReact
photoSrc='./test.JPG'
videoSrc='./test.mov'
>
</LivePhotosKitReact>
</div>
);
}
}
おわりに
LivePhotosKit JS結構楽しいですが、再生方法がデフォルトだとマウスオーバーだけなのが結構辛い
LivePhotosKit JS側に play()
メソッドがあるので、それを使えば再生ボタンとかも置けなくはないかも
次はこれを使って何か作ってみたいです