ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 タグ

<!-->
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML5 Video


最新のウェブサイトの多くは、ビデオを表示しています。 HTML5は、ビデオを再生するための標準を提供します。

ブラウザが、HTML5 video をサポートしているかどうかをチェックしてください




Web における動画

これまでは、web ページで動画を見るための標準がありませんでした。

今日、ほとんどの動画は、(フラッシュのような)プラグインを通して見ています。 しかし、すべてのブラウザに、同じプラグインがあるというわけではありません。

HTML5は、Web ページ上にビデオ/ムービーを埋め込むための標準的な方法を指定する、 新しい要素:<video>要素:を定義しています。


ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox, Opera、Chrome、Safari は、<video> 要素をサポートしています。

注: Internet Explorer 8 以前のバージョンは、<video> 要素をサポートしていません。


HTML5 Video - どうのように動作するか

HTML5 で、ビデオを表示するのに必要なのは、次の通りです:

<video width="320" height="240" controls="controls">
  <source src="/images/movie.mp4" type="video/mp4" />
  <source src="/images/movie.ogg" type="video/ogg" />
  あなたのブラウザは audio 要素をサポートしていません。
</video>

Try it yourself »

control 属性は、再生、一時停止、ボリュームのような、ビデオコントロールを追加します。

また、常に width 属性と height 属性を含めることをお勧めします。高さと幅が設定されている場合は、 ページがロードされるときに、ビデオのために必要なスペースが予約されます。 これらの属性の指定が無いと、ブラウザはビデオのサイズを認識できないので、適切な​​スペースを確保する ことができません。結果、ページレイアウトは(ビデオの)ロード中に変更されることになります。

また、<video> 要素をサポートしていないブラウザのため、<video> と </video> タグの間に、テキストコンテンツを挿入する必要があります。

<video> 要素には、複数の <source> 要素の設定が可能です。 <source> 要素は、さまざまなビデオファイルにリンクすることができます。 ブラウザは、最初に認識した形式を使用します。

ビデオ・フォーマットとブラウザ・サポート

現在、<video> 要素のサポートしているフォーマットは、MP4、WEBM、Ogg の 3 種類です:

ブラウザ MP4 WebM Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES
  • MP4 = H.264 ビデオコーデックと AAC 音声コーデックによる MPEG4 ファイル
  • WebM = VP8 ビデオコーデックと Vorbis 音声コーデックによる WebM ファイル
  • Ogg = Theora ビデオコーデックと Vorbis 音声コーデックによる Ogg ファイル

HTML5 video タグ

タグ 説明
<video> ビデオや映画を定義する
<source> <video> や <audio> などのメディア要素へ複数のメディア資源を定義する
<track> mediaplayer のテキストトラックを定義する