こんにちはbearです！今日は、videoタグで動画埋め込みをhtmlで簡単5分で行う方法をご紹介します。
初心者の方でも簡単！また、別でよく使われる「iframeタグ」との違いも見ていきたいと思います。
Videoタグって何？iframeとの違いは？
videoタグとiframeタグは、両方ともWebページで動画を表示するために使用されるHTMLタグですが、その目的や使い方に違いがあります。
目的：
- videoタグ：動画コンテンツを直接Webページ内に埋め込むことができます。
- iframeタグ：別のWebページやコンテンツを埋め込むことができます。
動作方法：
- videoタグ：動画をWebページ内に直接埋め込むため、Webページ内で再生されます。この場合、動画は直接ブラウザに読み込まれます。
- iframeタグ：別のWebページを埋め込む場合、Webページは別のURLから読み込まれます。Webページはiframe内に表示され、別のWebページ内であることが示されます。iframeは、別のWebページの機能を呼び出すことができます。
操作性：
- videoタグ：動画を直接Webページ内に埋め込むため、JavaScriptを使用して動画の再生、一時停止、再生速度の変更などの操作を簡単に行うことができます。
- iframeタグ：別のWebページを埋め込む場合、JavaScriptを使用してWebページ内の要素を制御することができますが、埋め込まれたWebページ自体を制御することはできません。
簡単にまとめると、videoタグはWebページ内に直接動画を表示するために使用され、iframeタグは他のWebページを埋め込むために使用されます。動画の再生操作や制御に関しては、videoタグの方が柔軟性があります。
Videoタグの使用例
html5に動画を埋め込みたいとき、下記のように書くことができます。
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
＜解説＞
この例では、640x360の動画を表示するvideoタグがあります。controls属性により、動画の再生や停止、音量調整などの操作が可能になります。sourceタグには、複数の動画ファイルを指定することができます。ブラウザがサポートしているフォーマットの動画を自動的に選択します。最後に、動画タグがサポートされていない場合に表示される代替テキストが指定されます。
この「webm」って何？
「webm」は、WebMという動画ファイルフォーマットの例です。Googleが開発したオープンでロイヤリティフリーの動画コーデックであり、Web上でのビデオ再生に広く使用されています。高品質で圧縮効率が高く、オープンな標準であるため、多くのブラウザでサポートされています。しかし、すべてのブラウザでサポートされているわけではないため、複数の動画フォーマットを指定することで、ブラウザがサポートしている最適な形式を選択できるようになしています。例えば、上記のコードでは、もう一つの動画フォーマットであるMP4も指定されています。
Videoタグの動画埋め込みに使える便利な機能
自動再生
autoplay属性を追加することで、Webページが読み込まれたと同時に動画が自動的に再生されるようになります。
<video autoplay>
<source src="example.mp4" type="video/mp4">
</video>
ループ再生
loop属性を追加することで、動画をループ再生できます。
<video loop>
<source src="example.mp4" type="video/mp4">
</video>
制御ボタン非表示
controls属性をfalseにすることで、再生/停止ボタン、音量調整、時間表示などの制御ボタンを非表示にすることができます。
<video controls="false">
<source src="example.mp4" type="video/mp4">
</video>
ミュート再生
muted属性を追加することで、動画の音声をミュートにすることができます。
<video muted>
<source src="example.mp4" type="video/mp4">
</video>
動画サムネイル表示
poster属性を追加することで、動画再生前に表示されるサムネイル画像を設定できます。
<video poster="thumbnail.jpg">
<source src="example.mp4" type="video/mp4">
</video>
キャプション表示
<track>タグを使用して、動画に字幕を表示することができます。以下のようなコードを使用して、WebVTTファイルから字幕を読み込むことができます。
<video>
<source src="example.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="example.vtt">
</video>
JavaScriptによる制御
JavaScriptを使用して、動画の再生、一時停止、音量調整などの操作を制御することができます。動画に対して<video>要素にID属性を追加し、JavaScriptコードでdocument.getElementById('video-id')を使用して動画要素を参照します。
<video id="my-video">
<source src="example.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("my-video");
myVideo.play(); // 動画を再生する
myVideo.pause(); // 動画を一時停止する
myVideo.volume = 0.5; // 音量を50%に設定する
myVideo.currentTime = 10; // 動画の再生位置を10秒に移動する
</script>
便利な機能が沢山ありますね！次はiframeの使い方について見ていこうと思います。
iframeタグの使い方
iframeタグは、他のWebページを現在のWebページ内に埋め込むためのHTMLタグです。具体的には、以下のような使い方があります。
別ドメインのページの埋め込み
iframeタグを使用して、他のWebサイトのページを現在のWebページ内に表示することができます。サンプルコードはコチラ↓
<iframe src="https://www.google.com"></iframe>
動画や音声の埋め込み
iframeタグが便利なのは、YouTubeやSoundCloudなどの動画や音声を現在のWebページ内に表示することが可能なこと！コードサンプルはこちら（通常埋め込みリンクが簡単にコピーできるはずなので、貼り付ければOK！）
<iframe width="560" height="315" src="地図の埋め込み
Googleマップなどの地図サービスをiframeタグを使用して、現在のWebページ内に表示することができます。サンプルコードはこちら↓
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.436665731904!2dxxxxxxxxxxxx!3dxxxxxxxxxxxx!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x0000000000000000!2zxxxxxxxxxxxx!5e0!3m2!1sja!2sjp!4v1620234560322!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
以上が、iframeタグの主な使い方の例です。ただし、注意点として、iframeタグを使用すると、セキュリティ上の問題が発生する可能性があります。外部のWebページを表示する場合は信頼できるソースからのみ行うことが推奨されます。
まとめ
いかがでしたか？なので、結論としてはこうなります。
動画埋め込みhtml
・直接埋め込むとき→Videoタグ
・Youtube等外部のWebサイトの埋め込み→iframeタグ
Videoタグ、iframeタグの使い方は簡単なので、簡単5分で動画設置可能！動画の埋め込みhtmlで更にWebサイトを素敵なものにしてくださいね！