メインビジュアル<videoタグ>用の動画を作りに出かけてきた

満潮の海。最高の天気。

利用しているWordPressテーマ「SWELL」のメインビジュアル動画機能を利用。拠点である木更津らしいメインビジュアルにしたいと思っていた。

目次

東京湾(アクアライン)に撮影に行ってきた

撮りたい映像は前からなんとなくイメージできていたんだけど、日なたの為、涼しくなるまでは行けず。天気のよい午前の満潮時刻付近をずっと狙っていた。(港の赤い橋とも迷った)

久々にブロンプトンのタイヤに空気を注入し、アクアラインに到着

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

スマホが挟める三脚を利用
撮影機材Xperia X Performance
メモリ内蔵(ROM/RAM) 32GB/3GB
撮影サイズ動画(ドット)メイン 1920×1080/フロント 1920×1080
防水/防塵防水(IPX5/8)、防塵(IP6X)
2台前にスマホとして利用していたもの
疲れたのでちょっと休憩
  • 利用中のスマホだと落としたり、傷つけたりしたくなく、躊躇してしまうので、型落ちの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目標で圧縮を試みる。

約6秒の動画が15.3MB

動画 圧縮 フリー オンライン」なんて素人らしい検索結果から「オンラインビデオ圧縮ツールサイト」に入り動画を圧縮。

圧縮したら5.99MBになった。

約6秒の動画が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円のみ。夢中になってしまった。遊びのコスパ高っ。
メインビジュアル<videoタグ>用の動画を作りに出かけてきた
総合評価
( 4 )
メリット
  • やってみれば多少なりともやれるもんだなと思った。今度は音あり、長めのフォトフレーム用の撮影に出かけようと思った
  • ブロンプトンに乗るきっかけができて本当によかった。もっとウロウロしよう
デメリット
  • やっぱり仕事では映像には極力関わりたくないと改めって思った。OKの基準が無い。
よかったらシェアしてね
  • URLをコピーしました!

この記事を書いた人

fuganetのアバター fuganet サイト運営者

~ プロフィール情報 ~
東京都出身。千葉県木更津市在住
もう東京には住みたくない!

コメント

コメントする

CAPTCHA


目次