操作説明系は動画で説明したい、でも動画が置けない。Youtubeでチャンネル開設するほどでもない。 という方に、はてなブログの記事に動画を載せる方法を探します。
はてなブログは標準で動画に対応していないですからね。。
はてなフォトライフの問題
はてなブログは、はてなフォトライフという画像ストレージと連携していて、記事の編集エリアに画像をドラッグアンドドロップするだけで画像が保存されるようになっています。
記事を作りながら画像を入れる作業は、「画像ファイルを記事エリアにマウスドラッグして、自動でアップロードされて、画像タグが埋め込まれるので、そのまま記事の続きを書く~」ということを、わりとスムーズにようにできます。画像に関してはとっても便利にできています。
問題は動画がおけないこと
はてなフォトライフの大きな問題は、動画を扱えないところです。.mp4
のファイルを上げてみると未対応のファイル形式とエラーになります。
昔はできたみたいなのですが、2017年に終わっちゃったんですね。他の方法が充実してきたから終わりって、、、
はてなフォトライフにおける動画アップロード機能の提供を終了します https://hatena-announce.hatenastaff.com/entry/2017/02/10/000000
さて困ったなぁ。 操作説明が多いブログので、画像だけではつらいのです。
解決する方法を探す
ネットを調べるといくつか出てきますね。はてなブログに動画を置く方法。
YoutubeやTwitterにアップロードした動画のURLをブログに貼るのが、最初に見つかるポピュラーな方法っぽいです。Youtubeに自分の動画を置くなら、チャンネル作成が必要になります。これだけのためにチャンネル作成するのものなぁ。
結局のところ、動画を扱うにはこの2つの問題を解決しないといけません。
2.動画ファイルをどう表示するのか?
この記事では、動画をCloudinaryに保存し、<video>
タグを使って動画プレーヤーで動画を再生する方法を紹介します。
はてなブログでもばっちり使える方法です。
Cloudianryに動画をアップロードする
Cloudinaryのアカウントを持っている前提で進めます。
こちらの記事を参考にアカウントを作成してください。
kanaxx.hatenablog.jp
動画をアップロードする
動画ファイルを用意しておきます。ファイルのフォーマットはもっとも一般的なMP4でいいと思います。
※ Cloudinaryはさまざまな動画のフォーマットを扱うことができます*1。
Cloudinaryにログインして、メディアライブラリーを開きます。メディアライブラリーは動画や画像を置いて管理するところです。
メディアライブラリ内はフォルダで管理できるので、必要に応じてフォルダを作ります。
ブラウザに動画をドラッグ&ドロップするだけでアップロードできます。フォルダに入れたい場合には、フォルダを開いた状態でドラッグ&ドロップします。
アップロードした動画のURLを取得します。
動画のサイズを変更する
ここはオプションですが、動画のサイズを適切に調整します。 動画の横幅が大きいとファイルサイズが大きくなるので、ブログで表示される適切なサイズに変換します。
この動画は、1.05MB、横幅が1580pxのMP4ファイルだということが分かります。
うちのブログはPCでも横幅は700pxしかないので、1580pxの動画は大きすぎますね。小さくしたいですね。
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`に設定しておかないとエラーになります。
動画プレーヤーを表示する
最後の段階です。
動画を作り、動画ファイルをアップロードしたので、はてなブログの本文に動画プレーヤーを表示して埋め込む方法です。
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/