2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ProtoPediaAdvent Calendar 2024

Day 3

#ヒーローズリーグ & #MashupAwards の記念イベントで見た「srt.js」に関するメモ【ProtoPedia】

Last updated at Posted at 2024-11-27

この記事は後から、「ProtoPedia Advent Calendar 2024」の 3日目の記事としても登録しました(投稿していたのは 11月末)。

はじめに

以下のイベント「【20回記念イベント】 #ヒーローズリーグ & #MashupAwards を振り返る」で見たとある作品が気になりすぎて、勢いでメモ的に記事を書いたものです。

具体的には「srt.js」というもので、2016年、つまり 8年前に作られたものになります。

srt.js を使ってみつつ、場合によっては似た仕組みのものを作って試さねば!、と思ったのですが、まずは情報をたどって自分用に整理するための記事を書きました。

srt.js

srt.js については、以下の作品紹介動画がすごく分かりやすいです!
具体的な仕組みや、複数の活用例を見ることができる動画です。

仕組みとしては、上記の動画に出てくるとおり、↓このようになっているようです。

image.png

作品紹介のページ

以下は、作品紹介のページです。

●srt.js: YouTubeの映像と連動したマッシュアップ作品を簡単に作れるJavaScriptフレームワーク | ProtoPedia
https://protopedia.net/prototype/598

image.png

使用方法

使用方法は、以下の部分に書いてありました。

image.png

自分の動画の場合は、上で書いていたように、字幕部分に処理を書きこむという使い方ができるようです。

それができない他の方の動画についても、処理用のファイルを別でアップロードして、動画と一緒に参照させるようにすれば

ドキュメントと作例

詳細な情報は、ドキュメントに掲載されているようです。

以下のページがドキュメントの 1つのようですが、ここを見ると、上で掲載した動画には出てきていない複数の作例も見られるようです。

●Kazutaka Kurihara - 22. srt.js
 https://www.unryu.org/home/srtjs

image.png

image.png

いろいろな作例のアイデアが面白いです。

その他のドキュメントなど

また、他のドキュメントページや GitHub のリポジトリは以下となるようです。

●Kazutaka Kurihara - doc
 https://www.unryu.org/home/srtjs/doc

image.png

●qurihara/srt.js: JavaScript framework for YouTube contents augmentation as a standard subtitle format ".srt"
 https://github.com/qurihara/srt.js

image.png

作例

そして、以下にも作例がまとめられているようです。

●qurihara/examples.srt.js: Examples for srt.js
 https://github.com/qurihara/examples.srt.js

image.png

似た仕組みを作る話

そういえば前に思いつきで、p5.js と YouTube関連の API の組み合わせで、以下のようなことをやったことがあったのですが、上記の時間連動に関する仕組みと似たことは、これに手を加えても少し作れるかも。
(特定の時間情報に合わせて、何らか処理をさせて、それを外部の API やガジェットと連動させる、というのは当時は全く思いついてなかったけど)

●p5.js で呼び出した YouTube動画の再生位置の時間を YouTube の IFrame Player API を使ってキャンバス上に表示 - Qiita
 https://qiita.com/youtoy/items/57cdb1c00934c0429602

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?