November 23, 2021

【Gatsby.js】Markdown内にmp4動画を貼りたい【プラグインなし】

プラグイン無しでmp4の動画をMarkdownに貼ってページから直接再生できるようにする
Article Image

mp4動画を張りたい

Gatsby.jsのMarkdownファイル内には直接mp4などの動画は貼れないはず。

本Blogでは動画はYoutubeを利用して掲載しているが、もっと気軽に張りたい人もいるだろう。

そこで特殊なプラグインをインストールせず次のようにmp4動画を貼る方法を記す

実際に貼ってみたサンプル

必要プラグイン

実は一つプラグインが必要である。

プラグインが必要なのは詐欺になりかけで申し訳ないが、これは「動画を貼り付けるためだけの専用プラグインが不要」という意味であり、次のプラグインはこれに当たらないので勘弁願いたい。

gatsby-remark-copy-linked-files | Gatsby

インストール

npm install gatsby-remark-copy-linked-files

設定はgatsby-config.jsplugingatsby-remark-copy-linked-filesを記述するだけ。設定は特に不要だが余分なコピーを作りたくない場合はignoreFileExtensionsあたりをチェック。

これは何

例えばmdファイルが入っているディレクトリ直下にpdfファイルを置いてMarkdownからリンクしても動作させるとリンク切れになる。

単純にmdからリンクされているものを公開フォルダへコピーしてリンクできるようにするというもの。詳しくは省略。

同様にmp4ファイルを本番サーバーの公開フォルダにコピーされるようにしている。

Markdownに直接タグを記述

あとはMarkdownに直接videoタグを書くだけで良い。

サンプルは次

※mp4はmdファイル直下imgフォルダ内に入れた例

<video controls width="100%" autoplay="true" loop="true" muted="true">
<source src="img/ビデオ名.mp4" type="video/mp4" />
 Sorry, your browser doesn't support embedded videos.
</video>

オプションでautoplay(自動再生)、loop(ループ再生)、muted(音をミュート状態で再生)になっている。

タグは一般的なhtml5のタグを使っているだけなので詳しくは次のようなサイトを参照してもらえればと思う。

<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN

何を今更こんな記事

Gatsbyサイトに直接動画を掲載する方法を書いてあるサイトが殆どないので書いてみた。

仕組み的には恐らくほとんどの人がMarkdownをhtmlに変換するときにdangerouslySetInnerHTMLというコードを使っておりMarkdownファイル内に記述されたHTMLタグが直接タグとして読み込まれることを知らない人も多いかと思ったからだ。

※例えば<nazo>nazo</nazo>などという存在しないタグでも記述をするとちゃんとnazoタグとして表示される。

尚、当サイトでは転送データ量の軽減や動画一覧が見やすいというような理由でBlog専用Youtubeアカウントに掲載した動画をリンクする形で動画を載せているので、この方法は今後使うかどうかはわからない。

ただ、ファイル操作とタグだけで気軽にアップロードできるので利用する価値は十分にある。

余談:webpは使えなかった

webpと呼ばれるgifよりもスゴい技術が最近少しづつ使われ始め、ブラウザも多くが対応してきている。

短い映像ならmp4よりこちらのほうが良いのでは、と色々試した結果webpは当方の環境では画像としては出力できるがgifのような使い方ができなかった。

webp動画については今後の課題としておく。


この記事のタグ

この記事をシェア


CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を発信中。どんな情報を流しても詰まらないトイレ。