サーバにある動画を一覧を「再生」ボタンで表示するphpコードを前回書いた。
http://min117.hatenablog.com/entry/2020/01/05/181931
これの「再生」ボタンに件数カウンタをつけてみる。こうなる。
変更前は「再生」だけだったボタンに
変更後は「67 再生」のように件数が付与される。
ひと目で何番目の動画かが分かってとっても便利。
Bootstrapの「badge」機能を使うとすぐに実装できる。素晴らしい。
103行目から107行目でbootstrapのcssを取得している。
172行目 cardを宣言している。ここから211行目までが1つのcardになる。
174行目 で画像を取得して
180行目 でその画像にoverlay(かぶせる)よう指定し
186行目 でタイムスタンプをかぶせ
191行目 でmp4ファイルだったらカウンタを+1し
201行目 でそのカウンタを「badge」を利用して表示している。
twitter起源の機能だけあってBootstrapとても便利だ。次回は「音声再生」ボタンを作って音だけを再生するボタンを実装してみる。