『7回目の出直し🌻』

好きなことを自分のペースで、のんびり更新

はてなブログで動画を使いたい!動画プレーヤーの埋め込み方法を教えます

操作説明系は動画で説明したい、でも動画が置けない。Youtubeでチャンネル開設するほどでもない。 という方に、はてなブログの記事に動画を載せる方法を探します。

はてなブログは標準で動画に対応していないですからね。。

はてなフォトライフの問題

はてなブログは、はてなフォトライフという画像ストレージと連携していて、記事の編集エリアに画像をドラッグアンドドロップするだけで画像が保存されるようになっています。

記事を作りながら画像を入れる作業は、「画像ファイルを記事エリアにマウスドラッグして、自動でアップロードされて、画像タグが埋め込まれるので、そのまま記事の続きを書く~」ということを、わりとスムーズにようにできます。画像に関してはとっても便利にできています。

問題は動画がおけないこと

はてなフォトライフの大きな問題は、動画を扱えないところです。.mp4のファイルを上げてみると未対応のファイル形式とエラーになります。
f:id:kanaxx43:20200613192500p:plain

昔はできたみたいなのですが、2017年に終わっちゃったんですね。他の方法が充実してきたから終わりって、、、

はてなフォトライフにおける動画アップロード機能の提供を終了します https://hatena-announce.hatenastaff.com/entry/2017/02/10/000000

さて困ったなぁ。 操作説明が多いブログので、画像だけではつらいのです。

解決する方法を探す

ネットを調べるといくつか出てきますね。はてなブログに動画を置く方法。

YoutubeやTwitterにアップロードした動画のURLをブログに貼るのが、最初に見つかるポピュラーな方法っぽいです。Youtubeに自分の動画を置くなら、チャンネル作成が必要になります。これだけのためにチャンネル作成するのものなぁ。

結局のところ、動画を扱うにはこの2つの問題を解決しないといけません。

動画を置くときの問題点 1.動画ファイルを何処に置くのか?
2.動画ファイルをどう表示するのか?

この記事では、動画をCloudinaryに保存し、<video>タグを使って動画プレーヤーで動画を再生する方法を紹介します。

はてなブログでもばっちり使える方法です。

Cloudianryに動画をアップロードする

Cloudinaryのアカウントを持っている前提で進めます。

こちらの記事を参考にアカウントを作成してください。
kanaxx.hatenablog.jp

動画をアップロードする

動画ファイルを用意しておきます。ファイルのフォーマットはもっとも一般的なMP4でいいと思います。

※ Cloudinaryはさまざまな動画のフォーマットを扱うことができます*1

Cloudinaryのメディアライブラリーを開く

Cloudinaryにログインして、メディアライブラリーを開きます。メディアライブラリーは動画や画像を置いて管理するところです。 f:id:kanaxx43:20200712123305p:plain

メディアライブラリ内はフォルダで管理できるので、必要に応じてフォルダを作ります。

動画ファイルをアップロード

ブラウザに動画をドラッグ&ドロップするだけでアップロードできます。フォルダに入れたい場合には、フォルダを開いた状態でドラッグ&ドロップします。 f:id:kanaxx43:20200712122427p:plain

URLを取得

アップロードした動画のURLを取得します。
f:id:kanaxx43:20200712174827p:plain

動画のサイズを変更する

ここはオプションですが、動画のサイズを適切に調整します。 動画の横幅が大きいとファイルサイズが大きくなるので、ブログで表示される適切なサイズに変換します。

動画のManageを開く

f:id:kanaxx43:20200712174840p:plain

右上の情報を確認

この動画は、1.05MB、横幅が1580pxのMP4ファイルだということが分かります。
f:id:kanaxx43:20200712174944p:plain

うちのブログはPCでも横幅は700pxしかないので、1580pxの動画は大きすぎますね。小さくしたいですね。

URLにパラメータを埋め込む

Cloudinaryは動画の横幅を簡単に変更できます。
/upload//v数値/の間に埋め込みます。これだけで、動画の横幅が700pxに縮小できます。

■もともとの動画のURL
https://res.cloudinary.com/kanaxx/video/upload/v1594542957/hatena-test/2020-07-12_17h17_02.mp4

■変換パラメータを入れ込んだURL
https://res.cloudinary.com/kanaxx/video/upload/w_700/v1594542957/hatena-test/2020-07-12_17h17_02.mp4

Cloudinaryで、URLを使って変換をするには事前の設定変更が必要です。
設定>SecurityのStrict video transformationsを`Disable`に設定しておかないとエラーになります。 f:id:kanaxx43:20200712203038p:plain f:id:kanaxx43:20200712202922p:plain

動画プレーヤーを表示する

最後の段階です。
動画を作り、動画ファイルをアップロードしたので、はてなブログの本文に動画プレーヤーを表示して埋め込む方法です。

videoタグの組み立て方

動画プレーヤーは<video>タグと<source>タグで表示することができます。

この動画は再生できません。

上の動画を出すためのHTML

<video controls style="max-width:100%" 
  poster="https://res.cloudinary.com/kanaxx/video/upload/w_700,so_4.5/v1594542957/hatena-test/2020-07-12_17h17_02.png">

  <source type="video/webm" 
      src="https://res.cloudinary.com/kanaxx/video/upload/w_700/v1594542957/hatena-test/2020-07-12_17h17_02.webm">
  
  <source type="video/mp4" 
      src="https://res.cloudinary.com/kanaxx/video/upload/w_700/v1594542957/hatena-test/2020-07-12_17h17_02.mp4">

この動画は再生できません。
</video>
videoタグ

Videoタグで指定したものの説明です。必要最低限の指定です。さらに詳しく知りたい場合は、こちらを*2参照ください。

属性 説明
controls なし 再生・停止などのコントロールを出すための指示
style max-width: 100% ブログの横幅からはみ出ないようにする設定
poster 動画再生するまでに表示される画像

controlsを入れておくと、再生や停止のボタンが出てきます。入れ忘れると再生ができない状態になるので要注意です。
styleは、画面の幅に合わせて動画プレーヤーの幅が収まるように指定しています。PCの画面の横幅を縮めたときやスマホで表示したときに効果が出てきます。
posterは、動画プレーヤーの初期表示の画像を指定できます。ここは画像であればいいので、はてなフォトライフのURL指定でも可能です。今回は、動画の4.5秒の位置をpng化したものをポスターとしています(Cloudinaryの機能です)

sourceタグ

Videoタグの内側で、動画ファイルを指定するタグです。

属性 説明
type video/mp4, video/webm 動画ファイルのmime type
src 動画のURL 動画ファイルを参照できるURL

ファイルのフォーマット違いで複数を置くことができます。1つだけでも大丈夫です。最近のブラウザはmp4の形式の動画が表示できるはずなので、面倒であればmp4の指定だけで良いと思います。

先の例では2種類の動画フォーマットを指定しています。見ているブラウザがwebmフォーマットに対応していればwebm形式で動画が送られ、そうでなければmp4形式の動画が送られます。mp4とwebmの変換はCloudinaryが勝手にやってくれます。

まとめ

今回は、はてなブログの記事の中に動画を埋め込む方法でした。はてなフォトライフに動画が載せられれば解決する問題ですが、迂回する方法としてCloudinaryを使う方法を紹介しました。

いままでは動画をGIFに変換して置いていましたけど、今後は動画にファイルを置くようにします。 kanaxx.hatenablog.jp

注意事項

Cloudinaryは、動画や画像の変換の回数と転送に上限があります。フリープランで個人ブログで十分に使える量になっていますが、使い過ぎにご注意ください。

参考した記事

【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ
https://webliker.info/52510/