2023-12-12(更新)

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

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

mp4(webM)動画を張りたい

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

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

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

※2022/01/19:webM動画については記事の最後に記述

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

必要プラグイン

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

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

gatsby-remark-copy-linked-files | Gatsby

インストール

npm install gatsby-remark-copy-linked-files

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

私は次のようにしている ※2023/12/12追記

  //`gatsby-transformer-remark`のpluginとして入れること
  {
    resolve: `gatsby-remark-copy-linked-files`,
    options: {
      // pngやjpgなどはSharpの変換対象としたいので、コピー対象から外しておく。
      ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
    },
  },

2021/12/08追記

プラグインが正しく設定されていればdevモードだけで動画ファイルのリンク先が自動生成され表示できることを確認(つまりビルドしないとファイルがコピーされないということはない)

もしdevモードで映像が見えない場合はdevの再起動、ファイル名やタグが正しいかしっかり確認しよう。

これは何

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

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

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

Markdownに直接タグを記述

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

サンプルは次

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

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

2022/01/19：修正

記事公開当初はvideoタグの中にsourceタグを配置した構成でなぜかエラーが出ていたが、正しく再生できることを再確認したのでそちらのやり方でも良い(mp4とwebmをクライアントで切り替えれるようにするなど)

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

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

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

何を今更こんな記事

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

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

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

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

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

webM

2022/01/19修正

この記事を執筆した時点でwebPの動画が扱えないと書いていたが、正しくはwebMの間違い。

webM動画は次のタグで動画として一応利用できた。

ただし2022/01/19現在でもスマホで再生できない(特にiPhone)ようなのでこちらは利用しないほうが良いかと思う。

<video controls playsinline autoplay loop muted="true" src="img/動画名.webm" type="video/webm" width="100%">
 Sorry, your browser doesn't support embedded videos.
</video>