HTMLの `video`タグ

HTMLの操作の基本をご覧くださいvideo鬼ごっこ

ザ・videoタグを使用すると、HTMLページにビデオコンテンツを埋め込むことができます。

この要素は、Webカメラを介してビデオをストリーミングできます。getUserMedia()またはWebRTC、またはそれを使用して参照するビデオソースを再生できますsrc属性:

<video src="file.mp4" />

デフォルトでは、ブラウザにはこの要素のコントロールは表示されず、ビデオのみが表示されます。

つまり、オーディオは自動再生に設定されている場合にのみ再生され(これについては後で詳しく説明します)、ユーザーはオーディオの停止、一時停止、音量の制御、またはビデオの特定の位置でのスキップの方法を確認できません。

組み込みのコントロールを表示するには、controls属性:

<video src="file.mp4" controls />

Chromeでの外観は次のとおりです。

Video tag appearance

最初に表示される画像は、ビデオの最初のフレームです。

を使用して、かなり一般的なニーズである別の画像を表示できます。poster属性:

<video src="video.mp4" poster="image.png" controls />

存在しない場合、ブラウザはビデオの最初のフレームが利用可能になるとすぐに表示します。

ビデオファイルのMIMEタイプは、type属性。設定されていない場合、ブラウザは自動的にそれを決定しようとします。

<video src="file.mp4" controls type="video/mp4" />

デフォルトでは、ビデオファイルは自動的に再生されません。追加しますautoplayオーディオを自動的に再生する属性:

<video src="file.mp4" controls autoplay />

一部のブラウザには、muted自動再生の属性。ビデオはミュートされている場合にのみ自動再生されます。

<audio src="file.mp3" controls autoplay muted />

ザ・loop属性が設定されている場合は0:00にビデオの再生を再開し、設定されていない場合はファイルの最後でビデオを停止します。

<video src="file.mp4" controls autoplay loop />

あなたは設定することができますwidthそしてheight要素が占めるスペースを設定する属性。これにより、ブラウザは要素を考慮でき、最終的にロードされたときにレイアウトが変更されません。ピクセルで表された数値を取ります。

CORS

ビデオは対象となりますCORSまた、サーバー側で許可しない限り、ビデオをクロスオリジンで再生することはできません。

このタグをWebページに配置しても何も起こりません。ビデオを開始する方法はなく、自律的に再生されません。ビデオを再生するには、を追加する必要がありますautoplay属性:

<video src="video.mp4" autoplay />

ビデオ表示プロパティの変更

を使用して、ピクセルで表されたビデオ領域の幅と高さを設定できます。widthそしてheight属性:

<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />

次の場合にコンテンツを表示するvideoサポートされていません

ザ・videoタグは非常によくサポートされています、IE9までなので、最近はプレースホルダーテキストは必要ありませんが、このオプションがあります。終了タグを追加し、開始タグと終了タグの間にテキストを挿入するだけです。

<video src="video.mp4">Video tag not supported</video>

複数のソースを追加する

ブラウザは1つのビデオコーデックを実装できますが、別のビデオコーデックを実装することはできません。ファイルサイズを半分に削減する新しい標準を使用したいが、それでも古いブラウザをサポートしたい場合があります。

あなたはsource鬼ごっこ:

<video controls>
 <source src="video.mp4" type="video/mp4" />
 <source src="video.avi" type="video/avi"/>
</audio>

CSSを使用してコントロールのスタイルを設定できますが、これはこの紹介の範囲外です。

ビデオのプリロード

設定しない場合autoplay、仕様によると、ブラウザはビデオメタデータのみをダウンロードし(たとえば、長さを確認するため)、ビデオ自体はダウンロードしません。

を使用してビデオを強制的にプリロードできます

<video src="video.mp4" preload="auto" />

ビデオイベントの操作

それぞれのイベントを聞くことができますvideoJavaScriptを使用して、興味深いプロジェクトやインターフェースを作成する要素。遊ぶべきさまざまなイベントがたくさんあります。

ザ・playビデオの再生が開始されると、イベントが発生します。

document.querySelector('video').addEventListener('play', () => {
  alert('Video is playing!!!')
})

このイベントを(他のイベントとして)直接追加することもできます。on<event>HTML要素に直接属性:

<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
  alert('Video is playing!!!')
})

これらはあなたが聞くことができるいくつかのイベントです:

  • playビデオの再生が開始されました
  • pauseビデオが一時停止されました
  • endedビデオの再生が完了しました
  • timeupdateユーザーが再生タイムラインを操作し、前後に移動しました
  • volumechangeユーザーが音量を変更した

ビデオの読み込みに関連するイベントは他にもたくさんあります。MDNで完全なリストを見つけることができます

私の無料ダウンロードHTMLハンドブック


その他のhtmlチュートリアル: