こんにちは。
今回はStimulusで動画の現在時間を取得する方法を紹介します。
1. viewの作成
まずは適当なviewを作成します。
app/views/videos/show.html.haml
.container.mx-auto.py-10
.flex.gap-2{ data: { controller: 'video' }}
.flex-1
= video_tag '/movies/sample.mp4', controls: true, class: 'w-full', data: { 'video-target' => 'player', 'action': 'timeupdate->video#timeupdate' }
.flex-none.w-96
%p{ data: { 'video-target' => 'description' }}
動画を再生すると時間がここに表示されます
video_tagのdata属性に'video-target'を指定しています。これはStimulusのtargetとして使うためです。
また、data: { 'action': 'timeupdate->video#timeupdate' }としています。これはtimeupdateイベントが発生したときにvideo#timeupdateメソッドを呼び出すように指定しています。
pタグにもdata属性を指定しています。これは動画の現在時間を表示するためのものです。
2. Stimulusのコントローラーを作成
次にStimulusのコントローラーを作成します。
app/javascript/controllers/video_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "player", "description" ]
timeupdate() {
this.descriptionTarget.innerHTML = this.playerTarget.currentTime
}
}
timeupdateメソッドを定義しています。このメソッドはtimeupdateイベントが発生したときに呼び出されます。
this.playerTarget.currentTimeで動画の現在時間を取得しています。
以上です。
動画を再生すると、pタグに動画の現在時間が表示されるはずです。
次回は、Chart.jsでグラフを描画し、現在の秒数に縦線を引く方法を紹介します。
今回はこのあたりで。