利用しているWordPressテーマ「SWELL」のメインビジュアル動画機能を利用。拠点である木更津らしいメインビジュアルにしたいと思っていた。
東京湾(アクアライン)に撮影に行ってきた
撮りたい映像は前からなんとなくイメージできていたんだけど、日なたの為、涼しくなるまでは行けず。天気のよい午前の満潮時刻付近をずっと狙っていた。(港の赤い橋とも迷った)


映像と紙は極力手を出さないと決めていた(時間がかかる)ので詳しくなく、スマホ頼みの撮影になった。※動きがあるものは大昔にFlashで嫌になった

| 撮影機材 | Xperia X Performance |
| メモリ | 内蔵(ROM/RAM) 32GB/3GB |
| 撮影サイズ | 動画(ドット)メイン 1920×1080/フロント 1920×1080 |
| 防水/防塵 | 防水(IPX5/8)、防塵(IP6X) |

- 利用中のスマホだと落としたり、傷つけたりしたくなく、躊躇してしまうので、型落ちのSONY(android)は撮影用におすすめ
- Xperia X Performanceだとmicrosdがささるし、防水(IPX5/8)、防塵(IP6X)なので好き放題に使える
動画撮影してみた
使うのは容量的に数秒になるかと思うので、各1分ずつ、4つの動画と静止画数枚を撮影してみた。雲一つない景色がとれて本当に良かった。




帰ってきて<video>タグ用に編集してみた
動画編集ソフトは持っていないし、何から始めていいのやら、、から始める。それっぽくはなったのでご参考程度に。
編集用データの用意



データが137 MBもあるのでとりあえず短く編集せねば。どうやるんだっけ?
「Windows11 動画編集 標準 アプリ」で素人検索したところ、標準搭載の「フォト」で編集が可能とのこと。
フォトって、、
フォトアプリでの編集

まずはフォトを起動。ビデオエディターを選択。

新しいビデオプロジェクトを選択。

ビデオの名前を指定する。※作業用フォルダ名のようなもの。
↓
OKをクリック

編集したい動画(mp4)をプロジェクトライブラリにドラック&ドロップする。

プロジェクトライブラリのファイルをストーリーボードにドラック&ドロップする。

ストーリーボードの動画を選択し、トリミングを選択。

約6秒ほどを選択して、完了をクリック。
後々確認してみたら、快晴の日曜日の朝で、車が途切れなかったり、飛行機が飛んできたり、風景を撮影するって難しいなぁと実感。。

プレビューを確認したのち、ストーリーボードの音量を選択。今回は音なしにしたかったので、ミュートを選択。

ビデオの完了を選択し、画質を高1080p(推奨)を選択し、エクスポートをクリック。
この時点では圧縮せずに、Web上の動画圧縮サービスで対応しようと思っていた。

拡張子をmp4として、半角英数名で保存。
これに音入れたり、テロップ入れたり、尺合わせしたり、映像を作る人って本当にすごいなと改めて実感した。
コーディングはしなくていいんだけどね。
動画を圧縮してみる

この時点では約6秒の動画が15.3MB。
検索する限りではループさせる動画を<video>タグを埋め込むには最大で5MBくらいがよろしいとのことなので5MB目標で圧縮を試みる。

「動画 圧縮 フリー オンライン」なんて素人らしい検索結果から「オンラインビデオ圧縮ツールサイト」に入り動画を圧縮。
圧縮したら5.99MBになった。
動画の始まりと終わりの境目を滑らかにしてみた

ループで再生してみると、始まりと終わりの境目で不自然な切替となり、少しカクつくのが気になった。映像を再編集するのも面倒で「動画 ループ 終わり 滑らかに」と素人検索をしてみると、そのもののサービスを発見。
「MovieChef | TechLagoon」というサイトを使わせてもらいました。
左上を見ると車が途中で消えている。時空を超えて行ったことにする。
容量は5秒、4.05MBになった
- この程度のクオリティが大前提であれば何とか提供できるのかなと思った。※いつもの甘い考えか。
WordPress(SWELL)にアップロードしてみる
本当に好きにいろいろセッティングできるので、マニュアルを見て「SWELL:メインビジュアルの設定方法」プレビューを見ながらやってみる。コーディングなんてしないんですね。凄すぎる。


公開するとこんな感じ。中心を軸にしてレスポンシブ対応になっている。便利すぎる。本当にいい天気でよかった。

設定内容によって、ソースコードが出力されている。便利すぎ。
<video class="p-mainVisual__video" playsinline="" autoplay="" loop="" muted="" data-poster-pc=/wp-content/uploads/2022/10/dsc_1787-scaled.jpg" data-poster-sp=/wp-content/uploads/2022/10/dsc_1787-scaled.jpg" poster=/wp-content/uploads/2022/10/dsc_1787-scaled.jpg">
<source data-src-sp=/wp-content/uploads/2022/10/mv-video-down_smooth.mp4" data-src-pc=/wp-content/uploads/2022/10/mv-video-down_smooth.mp4" src=/wp-content/uploads/2022/10/mv-video-down_smooth.mp4">
</video>感想・まとめ
- インドアなんだかアウトドアなんだか。あわただしい日曜を過ごしてしまった。楽しかった。
- 使ったお金はコーヒー代の140円のみ。夢中になってしまった。遊びのコスパ高っ。

- やってみれば多少なりともやれるもんだなと思った。今度は音あり、長めのフォトフレーム用の撮影に出かけようと思った
- ブロンプトンに乗るきっかけができて本当によかった。もっとウロウロしよう
- やっぱり仕事では映像には極力関わりたくないと改めって思った。OKの基準が無い。

コメント