HTML5に動画を埋め込む方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5に動画を埋め込む方法

王林

Nov 17, 2020 pm 03:48 PM

html5 ビデオ

HTML5に動画を埋め込む方法

まず、HTML5 では、Adobe Flash プラグインを使用せずに、ブラウザーでのオーディオファイルとビデオファイルの直接再生がサポートされていることを知っておく必要があります。

プラグインの欠点: プラグインはブラウザのクラッシュ、特に Flash のクラッシュの主な原因の 1 つであり、多くの問題があります。

(ビデオ学習の推奨事項: html5 ビデオチュートリアル)

Web ページにビデオを埋め込むには、video 要素を使用します。

定義と使用法

ヒント

開始タグと終了タグの間にテキストコンテンツを配置すると、古いブラウザでタグがサポートされていないという情報を表示できます

Attributes:

HTML5に動画を埋め込む方法

例:

<!DOCTYPE HTML>
<html>
<body>
 
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
 
</body>
</html>

ログイン後にコピー

HTML5に動画を埋め込む方法

ブラウザでサポートされているビデオ形式

HTML5に動画を埋め込む方法

Ogg = Theora ビデオエンコーディングと Vorbis オーディオエンコーディングを含む Ogg ファイル

MPEG 4 = H.264 ビデオエンコーディングと ACC オーディオファイルを含む MPEG 4 ファイル

WebM = VP8 ビデオを含む WebM ファイルエンコーディングと Vorbis オーディオエンコーディング

概要: すべてのブラウザをサポートできる単一の形式はありません。

最も簡単な方法は、Mp4 と Ogv のオーディオおよびビデオ形式の両方を使用することです

2. < source> タグ

の真ん中に要素 source

を挿入します。source 要素はビデオ形式を設定するために使用され、src 属性と type# 属性が含まれます。

##例:

<video src=&#39;视频1.mp4&#39; heigth=&#39;500px&#39; controls>
  <source src=&#39;视频2.mp4&#39; type=&#39;video/mp4&#39;>   <!-- 当‘视频1.mp4’无法播放时，会跳转到src=&#39;视频2.mp4&#39; -->
  <source src=&#39;视频2.ogv&#39; type=&#39;video/ogg&#39;>   <!-- 当浏览器不支持MP4格式的视频时，会自动找此处ogv格式的视频 -->
  <source src=&#39;视频2.webm&#39; type=&#39;video/webm&#39;>
</video>

ログイン後にコピー

2 つのオプションのビデオ形式 Mp4 と Ogv がここで提供されています。ビデオリンクは、video 要素の src 属性を通じて指定されなくなり、source 要素を通じて個別に指定されるようになりました。 source 要素では、複数のオプション形式のビデオファイルを指定できるため、ブラウザが前に記述された形式をサポートしていない場合、後続の形式のビデオファイルを選択できます。