このブログはJekyllで運用しているので、普段の記事はMarkDownで書いています。MarkDownの記述にはTyporaと呼ばれるMarkDownエディタを利用しています。
それ自体はとても便利で全く不満はないのですが、動画を挿入したときに自動で埋め込まれるVideoタグがブラウザ(Chrome)で見てみると再生できなかったので、今回は自分用のメモも兼ねてその対処法を書き残します。
問題点
記事に挿入したい動画をTyporaにドラッグ&ドロップすると<video>タグを自動で埋め込んでくれます。それ自体はいいのですが…

実はこれ、このままでは(少なくともChromeでは)ブラウザで再生してくれません。サムネイルは表示されるのですが、再生ボタンもシークバーも表示されず、ずっとサムネイルで止まったままです。動画コントロールを表示させるか自動再生にしないと再生できません。
解決策
要はMarkDown自体の問題ではなく、Typoraによって自動的に埋め込まれる<video>タグの問題ですので、<video>タグに手打ちで属性を追加すればOK。例えば、再生ボタンやシークバーを表示させたい場合は以下のようにcontrols属性を追加します。
<video src="[動画ファイルのパス]" controls></video>
例)
<video>タグ用の主な属性は以下の通りです。
| 属性名 | 機能 |
|---|---|
| src | 動画ファイルのパス |
| controls | 動画コントロール(再生ボタン、シークバー)を表示 |
| autoplay | 自動再生 |
| playsinline | Webページ内で再生する(モバイル端末でも) |
| muted | ミュートにする |
| loop | 繰り返し再生する |
まとめ
Typoraで動画を挿入する時は要注意。controls属性などを追加しないとブラウザ上で(少なくともChromeで)再生できません。Typoraが自動で埋め込むタグを設定でカスタマイズできないかな〜と調べてみたけど、今のところそのような機能はなさそうなので、その都度手動で追加する必要がありそうです。