ホーム 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 + DOM


HTML5 <video> - DOM を使用してコントロールを取得

HTML5 の <video> 要素には、メソッド、プロパティ、イベントもあります。

例えば、再生、一時停止、ロードするためのメソッドがあります。 読み込みまたは設定できるプロパティ(例えば duration、volume、seeking)があります。 例えば、<video> 要素の再生が始まるとき、一時停止するとき、終了するときなどに、 ユーザに通知することのできる DOM イベントもあります。

以下の例は、<video> 要素のプロパティの読込みと設定、 メソッドのコールを処理する方法を簡単な方法で説明しています。

例 1

ビデオ用の簡単な再生/一時停止 + リサイズコントロールを作成します:



Video courtesy of Big Buck Bunny.

上記例では、2つのメソッド: play() と pause() をコールしています。 また、3つのプロパティ: paused、height、videoHeight も使用しています。

Try it yourself »


HTML5 <video> - メソッド、プロパティ、イベント

下記テーブルは、殆んどのブラウザがサポートしているメソッド、プロパティ、イベントの一覧です:

メソッド プロパティ イベント
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

注: video プロパティのうち、videoWidth と videoHeight だけは直ぐに使用することができます。 他のプロパティは、動画のメタデータがロードされた後に利用可能になります。