動画を入れ替える

配布テンプレートのサンプル動画から、お手持ちの動画に入れ替えるマニュアルです。

解説

  1. スマホなどで動画を撮影します。
    ※撮影した動画本体はバックアップをとって、以下の作業を行って下さい。
    圧縮した動画を上書きしてしまうと、元に戻せなくなります。
  2. 撮影した動画を圧縮します。
    以下は外部サイトになりますが、動画を無料で変換してくれるConvertio様です。こちらを利用しましょう。
    今回は、「MP4」に変換してみますが、色々な変換に対応しています。
  3. クリックし、動画をアップロードします。
  4. 圧縮率などの設定を行いますので、歯車アイコンをクリック。
    ※歯車アイコンが出ない画像形式もあるようです。
  5. 画質のプルダウンがデフォルトでは「高画質」になっていると思いますので、「低画質」などを選んでみて下さい。
    品質は下がりますが、強い圧縮ができます。
  6. フレームレートも下げておきましょう。1秒間を何コマで割るかの設定です。
    数字が小さくなればなるほどコマ送り的にはなりますがその分圧縮できます。
  7. 音声を消したい場合は、「オーディオ」も調整します。
    「オーディオ」タブをクリックし、一番上の「コーデック」のプルダウンから「なし(オーディオトラックを削除)」を選択しましょう。
  8. あとは、赤い「変換」ボタンを押すだけです。
  9. 今回は、ツールを使ってMOVからmp4に変換し、容量も3分の1程度に抑える事ができました。
  10. 動画がダウンロードされたらテンプレートのimagesフォルダに移動しましょう。
    あとは、動画を読みこんでいるhtmlの以下タグのファイル名(赤文字部分)を変更しましょう。
    <video src="images/sample_movie.mp4" autoplay loop muted>

    動画が再生できない環境の為の代替画像がvideoタグの下にあるはずなので、固定画像も準備しなおして入れ替えておいて下さい。