ホームページ > 記事 > ウェブフロントエンド > HTML5で動画を再生するためのタグは何ですか? Web ページ上でビデオを再生するにはどうすればよいですか? (例を添付)
この記事では主にHTMLなどでのvideoタグhtml5ビデオタグの使い方と導入、そしてウェブ上での動画再生をサポートするいくつかの動画形式を紹介します
まず、ビデオを再生するためのタグを紹介します。
html5
ウェブ上のビデオ これまで、ウェブページにビデオを表示するための標準はありませんでした。
現在、ほとんどのビデオはプラグイン (Flash など) を介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。
HTML5 は、video 要素を介してビデオを含める標準的な方法を指定します。
簡単な HTML5 ビデオの例:
<video src="movie.ogg" controls="controls"> 您的浏览器不支持 video 标签。 </video>
このテキストは、ビデオが見つからない場合に Web ページに表示されます。
HTML5 ビデオ タグのビデオ形式:
現在、video 要素は 3 つをサポートしていますビデオの種類 形式:
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 サイトの他の関連記事を参照してください。