HTML でビデオを追加、再生、制御する方法

インターネット技術の発展に伴い、コンテンツの表示にビデオを使用する Web サイトがますます増えています。 Web サイト開発者にとって、Web ページにビデオを追加して通常どおり再生する方法はよくある質問です。この記事ではHTMLで動画を追加、再生、制御する方法を紹介します。

1. HTML5 のビデオ タグ

HTML5 でビデオを追加するには、HTML コードにビデオ タグを追加します。具体的には、次のタグを使用します:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

このコードでは、「src」属性を使用してビデオ ファイルの URL を定義します。上記のコードに示すように、「movie.mp4」と「movie.mp4」 「ogg」はそれぞれビデオを表します。MP4 および OGG 形式。ブラウザがビデオ再生をサポートしている場合は、どちらかが選択されて再生されます。どちらのビデオもサポートされていない場合は、最後のタグのコンテンツが表示されます。「お使いのブラウザはビデオ タグをサポートしていません。」

このうち、「width」と「height」は動画の幅と高さを指定するために使用できます。 control 属性は、ビデオ プレーヤーのコントロール バーを追加するために使用されます。

2. ビデオ再生の制御

ビデオを追加した後、次のコードを通じてビデオを制御できます:

var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半

その中には、「play()」と「pause」があります。 () 」関数はそれぞれビデオの再生と一時停止に使用され、currentTime 属性はビデオ再生の現在の時刻を設定するために使用され、volume 属性はビデオの音量を設定するために使用されます。

3. 複数の形式のビデオ ファイルをサポート

より多くのブラウザでビデオの再生をサポートできるようにするために、複数の形式のビデオ ファイルを使用し、複数のソースを同時に提供できます。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

ここでは、さまざまなブラウザとオペレーティング システム用に 3 つの異なる形式が提供されており、幅広いビデオをカバーできるようにしています。

4. ビデオのプリロード オプション

HTML5 の video タグには preload 属性も用意されており、ビデオの遅延を避けるために、ページが読み込まれるときにビデオを事前にダウンロードすることを選択できます。

preload 属性の 3 つの値をサポートします:

• preload = "none": 事前にダウンロードしません。
• preload = "metadata": 動画の長さ、オーディオ トラック、その他の情報など、ダウンロードされた動画のメタデータ。
• preload = "auto" : ビデオ ファイル全体をダウンロードします。

preload 属性に値「auto」が割り当てられている場合、ページの読み込みプロセス中にビデオがダウンロードされますが、このとき、ビデオの読み込みステータスは JavaScript を通じて取得できます。

var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分

5. Web ページでの YouTube ビデオの使用

ビデオ タグを使用してビデオ ファイルを直接埋め込むだけでなく、ビデオ再生用に YouTube ビデオを埋め込むこともできます。具体的な実装方法は次のとおりです。

• まず、YouTube に埋め込みたい動画を見つける必要があります。
• 次の HTML コードをページに追加します:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ps: ここの「VIDEO_ID」はビデオの一意の識別子です。

• 次に、標準的な方法で CSS スタイルを調整します。

6. ブラウザの互換性

HTML5 でビデオを追加する方法は、最新のブラウザで広くサポートされていますが、古いブラウザもまだいくつかあります。HTML5 ビデオをサポートしていないという問題があります。 。これらのブラウザは、JavaScript および Flash を介したビデオ再生をサポートできます。

• JavaScript 経由: video.js や JWPlayer などのライブラリを使用できます。
• Flash 経由: swfobject および swfmedia を通じてページに Flash プレーヤーを埋め込み、ビデオを読み込みます。

概要

この記事では、HTML でビデオを追加、再生、制御する方法と、よく使用されるいくつかの再生機能を紹介します。実際の開発プロセスでは、開発者は互換性の問題に注意を払い、各ブラウザがビデオ再生を完全にサポートできるように、さまざまな形式でビデオ ファイルを提供する必要があります。

以上がHTML でビデオを追加、再生、制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。