【ReactNative】動画を現在の再生時間に合わせて表示させる方法

Question

以下のyoutubeの機能のようにReactNativeで動画を現在の再生時間に合わせて表示させる方法はありますか？

Youtubeの動画

もしライブラリーや実装方法で心当たりがあったら教えて欲しいです。
ググってはみてるものの、どう検索したら良いかわからず困り果てています。。
どうかよろしくお願いします。

備考

ReactNativeのWebView機能は諸事情により使えません。。

Answer 1

Hinoarashi.さん、こんにちは。

私ならreact-native-webview(webview)を利用して、
videoタグの機能を有効活用することで実装します。

Comments

[Hinoarashi.]

shunki1023さんコメントありがとうございます！
漏れてて大変申し訳ございません、諸事情によりReactNativeのWebViewは使えないのです。。

一応自分なりに考えてみて、
①react-native-video(https://github.com/react-native-video/react-native-video#paused)で動画の現在の再生時間を取得
②コメントをしたらDBのカラムに投稿した再生時間を保存
③APIを受け取って、if文で再生時間にマッチするコメントがあったら
react-native-comments(https://github.com/tokict/react-native-comments/tree/master/commentsTestApp)で描画をする

って実装方法を考えたのですが、不備とか他のはるかに楽な実装方法に思い当たりってあったりしますでしょうか・・？

[shunki1023]

私の場合、諸事情によりreact-native-videoが使えなかったため、
Hinoarashi.さんの環境の把握ができていない可能性があります。
また、react-native-commentsの利用経験はありません。
それをご了承の上、以下の見解をご査収ください。

前提として、Youtubeのコメント欄のように、
再生時間の記述を拾い上げて、その再生時間までスキップ(巻き戻す)機能を実装したいということでしょうか。
ひとまずその前提で方法を考えますと、ご考案になった方法で良いかと思います。

1. コメントを受け取った際、正規表現で再生時間を表すテキストを入力
2. DBのカラムに再生時間を保存
以下略

あとはreact-native-comments等のメソッドやプロパティで処理を簡略化できないか検討するのが良いかと思います。

[Hinoarashi.]

コメントありがとうございます！
やってみます！ありがとうございました????‍♂️