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
