ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5_html5 チュートリアルのヒントを使用して Web ページにオーディオとビデオの再生を埋め込む基本的な方法

HTML5_html5 チュートリアルのヒントを使用して Web ページにオーディオとビデオの再生を埋め込む基本的な方法

WBOY
WBOYオリジナル
2016-05-16 15:45:522965ブラウズ

Flash を使用しないネイティブ オーディオおよびビデオのサポートを含む HTML5 機能。

HTML5 の

ビデオを埋め込む
次は、Web ページにビデオ ファイルを埋め込む最も簡単な方法です:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ビデオ src="foo.mp4" ="300" 高さ="200" コントロール>
  2. お使いのブラウザは <video> 要素をサポートしていません。
  3. ビデオ>
現在の HTML5 ドラフト仕様では、ブラウザが video タグでどのビデオ形式をサポートする必要があるかが指定されていません。ただし、最も一般的に使用されるビデオ形式は次のとおりです:

Ogg: Thedora ビデオ エンコーダーと Vorbis オーディオ エンコーダーを備えた Ogg ファイル。

mpeg4: H.264 ビデオ エンコーダーと AAC オーディオ エンコーダーを備えた MPEG4 ファイル。

メディア タイプやその他の属性を含む タグを使用してメディア ファイルを指定できます。 video 要素では複数のソース要素が許可され、ブラウザは最初に認識された形式
を使用します。

XML/HTML コード
コンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <ボディ>
  4. <ビデオ ="300" 身長="200" 自動再生>
  5. <source src="/html5 /foo.ogg" type="video/ogg" /> ;
  6. <source src="/html5 /foo.mp4" type="video/mp4" /> ;
  7. お使いのブラウザは、<video>要素をサポートしていません。   
  8. ビデオ>
  9. ボディ>
  10. html>

ビデオ プロパティ范
HTML5 ビデオ标签は複数のプロパティ制御制御外观と感觉および各種制御機能を使用できます:

属性 描述
autoplay 如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。
autobuffer 如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。
controls 如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。
height 这个属性以 CSS 像素的形式指定视频显示区域的高度。
loop 如果指定这个布尔值属性,表示允许播放结束后自动回放。
preload 指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。
poster 这是一个图像 URL,显示到用户播放或快进。
src 要嵌入的视频 URL。可选,可以在 video 块中使用 元素替代来指定要嵌入的视频。
width 这个属性以 CSS 像素的形式指定视频显示区域的宽度。

オーディオの埋め込み
HTML5 では、次に示すように、HTML または XHTML ドキュメントに音声コンテンツを埋め込むための
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。