![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2023-05-22T12:06:45+00:00","default:ubi","ubi") #author("2023-05-22T12:28:40+00:00","default:ubi","ubi") [[Insider]] *初期状態での参照サイト [#xb6a1d9e] -[[環境設定の手順(HTMLとCSS):https://prog-8.com/docs/html-env]] -[[環境設定の手順(HTMLとjs):https://www.sejuku.net/blog/29837]] -[[videoタグというものについて:https://zero-plus.io/media/html-video/]] -[[videoタグの活用:https://catnose.me/learning/html/video]] -[[デザイン性にとんだサイト:https://coco-factory.jp/ugokuweb/move01-cat/loading/]] *構想[#jd8f7cf7] -複数の動画を比較したいとき、フォトアプリなどでは面倒なので、並べてみたらいいのではというところからの始まり。 -なんならシークバー（再生バー）とプログレスバー（現在のフレーム位置）もわかったら使いやすいのではということで追加で調べる ~（というかaviutlの再生ウィンドウのように、ブラウザでシークバーを動かせたらいいなという考え） **シークバー＆プログレスバーへのアプローチ [#xb6a1d9e] -プログレスバー:現在の進捗の状態を明示的にしたもの。スマホのグルグル待機と同じ。 -これを活用して、[[動画ファイルの再生位置を表示する:https://gray-code.com/javascript/view-playback-position-of-video/]] --このままではフレームごとの動きが見れないので''htmlのtimeの項目のstepを1/合計フレームした値にする''ことで滑らかにした --フレーム前後をプログレスバーを動かすことで見ている状態→なので、[[ボタンでずらす:https://code-pocket.info/20190527187/]] --必要かわからないが[[フレームを切り出し:https://favril.hatenablog.com/entry/20100225/1267099197]]も行えた ***重要単語 [#xb6a1d9e] -videoタグ -progressタグ(プログレスバー) -timeタグ -ステップバー:[[基本的なステップバー:https://www.nowte.net/ui/ui-step/]],[[何かうまく使えそうな応用サイト:https://coliss.com/articles/build-websites/operation/css/pure-css-progress-bar.html]]
