へんてこのブログ

日々気づいたことや、最近やっていることを書いています

LivePhotosKitReactを作成しました

先日Appleから LivePhotos をWebでも再生できるようにした、LivePhotosKit JS が公開されたので、そのwrapper的なReactコンポーネントを作成しました

github.com

www.npmjs.com

ターミナルで以下を実行すれば使うことができます

$ 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>
    );
  }
}

f:id:henteko07:20170422215656g:plain

おわりに

LivePhotosKit JS結構楽しいですが、再生方法がデフォルトだとマウスオーバーだけなのが結構辛い
LivePhotosKit JS側に play() メソッドがあるので、それを使えば再生ボタンとかも置けなくはないかも
次はこれを使って何か作ってみたいです