ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5で動画を再生するためのタグは何ですか? Web ページ上でビデオを再生するにはどうすればよいですか? (例を添付)

HTML5で動画を再生するためのタグは何ですか? Web ページ上でビデオを再生するにはどうすればよいですか? (例を添付)

寻∝梦
寻∝梦オリジナル
2018-09-01 11:42:527816ブラウズ

この記事では主にHTMLなどでのvideoタグhtml5ビデオタグの使い方と導入、そしてウェブ上での動画再生をサポートするいくつかの動画形式を紹介します

まず、ビデオを再生するためのタグを紹介します。

html5

ウェブ上のビデオ これまで、ウェブページにビデオを表示するための標準はありませんでした。

現在、ほとんどのビデオはプラグイン (Flash など) を介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。

HTML5 は、video 要素を介してビデオを含める標準的な方法を指定します。

簡単な HTML5 ビデオの例:

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

このテキストは、ビデオが見つからない場合に Web ページに表示されます。

HTML5 ビデオ タグのビデオ形式:

現在、video 要素は 3 つをサポートしていますビデオの種類 形式:

HTML5で動画を再生するためのタグは何ですか? Web ページ上でビデオを再生するにはどうすればよいですか? (例を添付)

Ogg = Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した Ogg ファイル

MPEG4 = H.264 ビデオ エンコーディングと AAC オーディオ エンコーディングを使用した MPEG 4 ファイル

WebM = VP8 ビデオ エンコーディングと Vorbis オーディオを使用エンコードされた WebM ファイル

次に、HTML5 video タグが Web ページ上でビデオを再生する方法について説明します:

1. 基本的な使用法:

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

2. 幅と高さによってビデオ ウィンドウを設定します:

<video src="hangge.mp4" controls width="400" height="300"></video>

3. メディア ファイルをプリロードします:

プリロードのさまざまな属性値を設定します。これにより、ブラウザにメディア ファイルのロード方法を指示できます:

  • 値は auto です: ブラウザが自動的にダウンロードしますファイル全体

  • 値は none: ブラウザーが事前にファイルをダウンロードしないようにします

  • 値はメタデータです: ブラウザーが最初にビデオ ファイルの先頭にあるデータ ブロックを取得します。これで十分です。いくつかの基本情報 (ビデオの合計時間、最初のフレーム画像など) を決定します

<!-- 用户点击播放才开始下载 --><video src="hangge.mp4" controls preload="none"></video>

4. 自動再生:

(1) autoplay 属性を使用して、ブラウザがビデオを再生できるようにします。ファイルをロードした直後に。

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

(2) 自動再生が有効になっている場合、プレーヤーをミュート状態に設定できます。これにより、自動再生中に音声がミュートされ、ユーザーが退屈するのを防ぎます。ユーザーは、必要に応じてプレーヤーのスピーカー アイコンをクリックしてサウンドをオンに戻すことができます。

<video src="hangge.mp4" controls autoplay muted></video>

5. ループ再生:

ビデオが終了したときに最初から開始するには、loop 属性を使用します。

<video src="hangge.mp4" controls loop></video>

上記は、この記事での HTML5 video タグの使用法と説明です。ご質問がある場合は、以下にメッセージを残してください。

【編集者のおすすめ】

HTMLのselectタグをデフォルトで選択するには? select タグの使い方の紹介

HTML5 のメータータグの意味は何ですか?メータータグの使い方を詳しく解説

以上がHTML5で動画を再生するためのタグは何ですか? Web ページ上でビデオを再生するにはどうすればよいですか? (例を添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。