Next.jsでvideoを使う方法、Mp4を入れたいあなたへ

最近の画像作成ソフトは凄いと言わざるを得ない

筆者は可愛い女の子と無縁な生活を送っているため、かわいい女の子が喋ってくれるだけで嬉しくなる。しかもかわいい女の子がガチャ要素ででるとか、もう神アプリか。

そんなわけでStableDiffusionで生成した動画（MP4）をブログにアップしたい!!

調べてみると画像ストレージのCloudinalyを使ったmp4の再生方法はいくつかあったが、ローカル環境に取り入れる記述があまりなかったので、備忘録としてとっておく。

Next.jsで動画いれるのはさほど難しくない

難しくないといっても、生のHTMLに記載するより一手間かかる。

まずはいつも通り

yarn create react-app

//もしくは
npm create react-app

作成したフォルダ内で

yarn add next-videos -E

next.config.jsに下記項目を追加する

next.config.js

const withVideos = require('next-videos')
module.exports = withVideos()

今回はpage.tsxと同じ階層にvideo.mp4（のせたい動画）をアップロードして
page.textのreturn文にmp4などの動画を差し込む文言を追加。

※本来はPublicに収納する方が好ましい

page.text

export default function Home() {
  return (
        //省略

        <div>
          <video src={require('./video.mp4')} controls  playsinline/>
        </div>

        //省略
 )
}

.mp4のあとのcontrolsは必須。playsinlineもiphoneやandroidで再生するためには必須なので記載しよう。

muted（ミュートや）loop(ループ再生）などを好みで付け足してもいい

最後に

写真に声をあてて、しゃべらせたいあなた。最近の技術の躍進はすばらしいので是非一度体験してほしい。