はじめに
皆さんこんにちは、こんばんは。
techblogchan（ @techblogchan ）です。
先日Googleアシスタントの記事を書く際に動画をブログ内に貼り付けたのですが、うまくいかず動画が見れない状況になっていました…
twitterやインスタ、youtube等を使用してはてなブログ内に動画を貼る方法は検索すればたくさん出てきたのですが、正直一枚サービスをかませるのめんどくさいなあ…と思いていました。
そこで今回は、ブログ内に直接動画を貼る方法について備忘録的まとめをしたいと思います。
＊＊＊＊＊
ブログ内に直接動画を貼る方法
※この記事ははてなブログProを使用していて、自分のレンタルサーバを使用している場合を想定しています
おそらくhtmlのvideoタグを使えばブログ内に直接動画を貼れるのではないかなという目星はついていたので、まずはvideoタグについておさらいしました。
<video>
<source src="sample.mp4">
</video>
上のカードのsrc属性を自分の動画のURLに変更すれば、動画を直接ブログ内に埋め込めそうです！
実際に、サーバ上にファイルをアップロードして上記コードと組み合わせてみました。
実際に入れてみた写真です。
埋め込めてはいるのですが、再生がされません…
さらに深く調べてみるとオプションとしてcontrols属性が必要になりそうなことがわかりました！
<参考にさせて頂いたサイト>
はてなブログに動画を直接貼る埋め込み方法 - 音楽教室運営奮闘記
controls属性でインターフェースを表示する
controls属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、動画を利用しやすくするインターフェースを、ブラウザが自動で表示することになっています。
最終的なコードは以下の通りです。
<video controls>
<source src="sample.mp4">
</video>
再生ボタンや一時停止ボタンが付いて、無事動画を埋め込むことができました！
実際に動画を挿入した状況は以下から確認できます。
まとめ
今回は、はてなブログ内に直接動画を埋め込む方法に関しての記事でした。
- htmlのvideoタブを使用することで直接埋め込みが可能
- controls属性を付けないと動画は貼り付けられても再生されない
Twitterやインスタを使ったやり方もありますが、やはり直接動画を埋め込めた方が簡単だし手間がかかりませんよね！
たった一行付け足すだけで簡単に動画を挿入できるのでぜひ参考にしてください！
それではまた別の記事で〜！
