html5のvideoタグの詳しい紹介

不言
リリース: 2018-10-26 14:50:08
転載
4682 人が閲覧しました

この記事では、HTML5 の video タグについて詳しく説明します。必要な方は参考にしていただければ幸いです。

<video src="http://www.lorem.com/video/lorem.mp4" controls="controls" width="500" height="300"></video>
ログイン後にコピー

MP4 = H264 ビデオ コーデックおよび AAC オーディオ コーデックを使用する MPEG 4 ファイル

WebM = WebM ファイルを使用VP8 ビデオ コーデックと Vorbis オーディオ コーデック

Ogg = Ogg ファイルは Theora ビデオ コーデックと Vorbis オーディオ コーデックを使用します

上記の情報により、h264 でエンコードされた MP4 ビデオ (MPEG-LA 社) のみが見つかります。 、VP8 でエンコードされた webm 形式のビデオ (Google 社) と Theora でエンコードされた ogg 形式のビデオ (iTouch 開発) は、HTML5 の

ブラウザが video タグをサポートしていない場合はどうすればよいですか?

たとえば、IE ブラウザと古いバージョンのブラウザは HTML5 をあまりサポートしていません。ユーザーがこれらのブラウザを使用してビデオを含む Web ページを開いた場合はどうすればよいでしょうか。

コードは次のように記述できます:

<video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频!</video>
ログイン後にコピー

このように、html5 をサポートしていないブラウザでは、「お使いのブラウザはこのビデオの再生をサポートしていません!」というメッセージが表示されます。

video タグの拡張パラメータの説明について:

video 要素では複数のソース要素を使用できます。ソース要素は、異なるビデオ ファイルをリンクできます。ブラウザは最初に認識された形式を使用するため、別の形式でさらにいくつかのビデオを準備するだけで済みます。

使用法:

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>
ログイン後にコピー

autoplay: この属性の存在は、ビデオが準備ができた後に自動的に再生されることを意味します。 使用法: autoplay="autoplay"

controls:この属性の出現は、再生ボタンなどのコントロールをユーザーに表示することを意味します。 使用法:controls="controls"

height:高さの設定

width:幅の設定

loop: 自動再生、使用法:loop="loop"

preload: ページがロードされると、ビデオがロードされ、再生の準備が整います。 使用法: preload="auto" - ビデオ全体をロードします。ページの読み込み時; preload="meta" - ページの読み込み時にのみメタデータを読み込みます; preload="none" - ページの読み込み時にビデオを読み込みません。注: 自動再生を使用する場合は、preload を無視してください。

src: ビデオを再生するための URL

ここで

以上がhtml5のvideoタグの詳しい紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!