Gatsby で動画を貼り付ける

Gatsby で動画を貼り付けるのにかなり苦労しました。

プラグインは必要なし？

かなりの時間を費やして chatGPT に相談し、アレコレいじったので全部を憶えてはいないのですが、コードは割と簡単だと思います。

<video controls className="w-4/5 md:w-1/3 m-5 border border-stone-500">
  <source src="/videos/Epley.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

動画は public 内に

画像を src/images に配置するように、動画は src/videos に配置すると考えいろいろやってみましたが、今までのところ成功していません。

src/public 内に配置すれば読み込んでくれます。

src=”/videos/Epley.mp4″ は src=”~/my-gatsby-site/public/videos/Epley.mp4″ということのようです。

これを、src=”~/my-gatsby-site/src/videos/Epley.mp4″ に設定したくて、chatGPT に相談して数時間苦闘したのですができませんでした。

my-gatsby-site
├── README.md
├── gatsby-config.js
├── package.json
├── postcss.config.js
├── public
│   ├── 404
│   ├── static
│   └── videos
│      └── Epley.mp4
├── src
│   ├── components
│   ├── images
│   ├── pages
│   └── utils
├── tailwind.config.js
└── yarn.lock

Epley.mp4 は public に配置してあります。

ビルドでエラーが出てもサーバーは起動する

エラーの程度にもよると思いますが、ビルドでエラーを吐いてもサーバーは起動してコンテンツは閲覧できるようです。

ただし、画像関係が表示できないかもしれません。

以下のようにビルド。

cd ~/my-gatsby-site
yarn build

サーバー起動。

cd ~/my-gatsby-site
yarn start

設定を変更しても反映されない場合は、キャッシュクリアするとうまくいくことがあります。

cd ~/my-gatsby-site
yarn cache clean