Movie からの画像を表示するようにしました。

poster 属性とは？

いわゆる動画見る前のサムネイル画像のことです。動画の内容を一目で把握できるようにするために使われます。

人によっては、いい部分のサムネイルを指定して、動画を見てもらいやすくするために工夫している人もいますね。

あとは最初に動画を読み込まない軽量化

poster 属性を指定することで、動画の最初のフレームを読み込む必要がなくなり、ページの読み込み速度が向上したりします。

もしかしたら Google 検索にも良い影響があるかも？

実際にどうなのかはわかりませんが、画像があることでGoogle検索にて動画の内容とタイトルが一致しやすくなり、SEO的に良い影響があるかもしれません。これについては詳しく書かれてないので、あくまで推測の範囲ですけども、多少なりとも良い影響があるのではないかと考えています。

なぜどうしたのか？

実際に X に投稿する時に、動画のみの投稿だと、サムネイルもなく No Image な画像を表示していたのですが、それだと味気がないので、コードをチョチョイのちょいと修正して、動画からサムネイルを生成して表示するようにしました。

流石に完全自動化は難しいので、半分手動で良い画像を指定してそれを自動で webp 化して表示するようにしています。上の動画の要素のようにいいポジションやいいシーンを切り取ってサムネイルには指定していますが…基本的には動画の最初のフレームをサムネイルに指定しています。

バグはあるかも？

今までのコードをチョチョイのちょいと修正したので、もしかしたらバグがあるかもしれません。