コントロールを使用してHTML5にMP4ビデオを埋め込む方法

今日は、<video>を使用してMP4ビデオをHTMLにすばやく埋め込む方法を学習します。 エレメント。以下について説明します：

1. ビデオプレーヤーのサイズを調整する方法
2. 動画を自動再生する方法
3. 動画を無限ループにする方法

ほとんどのチュートリアルでは、概念を説明するために小さなビデオにGIFを使用しています。 MP4の方が品質が高く、占有するスペースが少ないことがわかりました。 MP4は、WebMとは異なり、最新のすべてのブラウザで動作し、YouTubeなどのビデオサービスにアップロードすることもできます。

HTML5ビデオ要素を使用した埋め込みビデオ

HTMLでMP4ビデオを表示するには、HTML5 <video>を使用する必要があります エレメント。最も単純な実装は次のようになります：

<video width="500" controls>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

controlsを削除できます 属性ですが、ユーザーが動画を一時停止/再生/巻き戻すことができるため、お勧めしません。

500 値はピクセル単位（500px）で測定されます。

"path-to-your-video.mp4"を置き換えるだけです 実際のMP4ソースを使用すると、これをテストに使用できます（私のチュートリアルの1つから）

https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4

ビデオプレーヤーのサイズ（幅/高さ）を調整します

現在、動画の幅は500ピクセルですが、任意の値に変更できます。相対スペース（ビデオ要素が含まれるコンテナ）の100％を占めるようにする場合は、width="100%"に変更するだけです。 。

heightを使用して高さを調整することもできます 。使用中の両方の例を次に示します。

<video width="100%" height="400" controls>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

動画を自動再生（1回）

MP4ビデオを1回自動再生するには ユーザーが自分の動画を初めて画面に表示するときに、autoplayを追加します 動画要素のプロパティ：

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

自動再生の仕組み

自動再生機能は、ユーザーが画面のビューポート内に動画を表示するとすぐに自動的にトリガーされます。

動画をループする

MP4ビデオをHTML5でループ（無限に再生）するには、loopを使用します 属性：

<video width="500" controls autoplay loop>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

注： controls 属性を使用すると、動画を一時停止/停止できますが、動画のループは、特に音声の場合、煩わしい場合があることに注意してください。 ループ属性は、特定のユースケースで意味がある場合にのみ使用してください。

ブラウザのサポート

古い恐竜ブラウザの時代はもうすぐ終わります。ただし、動画要素をサポートしていないブラウザの場合は、<video>の間にテキストを追加できます。 ユーザーに知らせるタグ：

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4" />
  Your browser is outdated, update it to display the video
</video>

テキストは、古い古いブラウザ（Internet Explorer 9より下）でのみ表示されます。

MP4フォールバックでのWebMの使用

ビデオのWebMバージョンとMP4バージョンの両方を使用している場合、ユーザーのブラウザがWebMをサポートしていない場合は、次のコードを使用してMP4をフォールバックとして使用できます。

<video width="500" controls>
  <source src="path-to-your-video.webm" type="video/webm" />
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

注：現時点では、ChromeとOperaのみがWebMを完全にサポートしていますが、FireFoxとEdgeもWebMの実装に取り​​組んでいます。

ボーナスチップ

MP4ビデオをすばやく録画するには、次の無料ツールを使用できます。

• Kapアプリ（Mac）
• アイスクリームスクリーンレコード（Windows）

動画を無料でアップロードして保存するには、Cloudinaryをお勧めします。