min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

PHP7 Bootstrap4のbadge機能で動画ギャラリーにファイル数カウンタをつける

サーバにある動画を一覧を「再生」ボタンで表示するphpコードを前回書いた。

http://min117.hatenablog.com/entry/2020/01/05/181931

 

これの「再生」ボタンに件数カウンタをつけてみる。こうなる。

f:id:min117:20200105194142p:plain

 

変更前は「再生」だけだったボタンに

f:id:min117:20200105194310p:plain

 

変更後は「67 再生」のように件数が付与される。

f:id:min117:20200105194344p:plain

ひと目で何番目の動画かが分かってとっても便利。

 

Bootstrapの「badge」機能を使うとすぐに実装できる。素晴らしい。

f:id:min117:20200105194951p:plain

103行目から107行目でbootstrapのcssを取得している。

f:id:min117:20200105195039p:plain

f:id:min117:20200105195106p:plain

172行目 cardを宣言している。ここから211行目までが1つのcardになる。

174行目 で画像を取得して

180行目 でその画像にoverlay(かぶせる)よう指定し

186行目 でタイムスタンプをかぶせ

191行目 でmp4ファイルだったらカウンタを+1し

201行目 でそのカウンタを「badge」を利用して表示している。

 

twitter起源の機能だけあってBootstrapとても便利だ。次回は「音声再生」ボタンを作って音だけを再生するボタンを実装してみる。