Webteko第8回でHTML5 videoタグについてLTした

7/18(土)に神戸でWebteko(ウェブテコ)第8回が開かれた(告知ページ)。今回はデザインがテーマってことで、絵心とか全然ない僕はすごく楽しみにしていた。

LTの資料

僕も「Firefox3.5とvideoタグ」というタイトルでLTした(デザイン関係ないけど)。Firefox3.5からHTML5のvideo要素がサポートされたので、簡単なデモページを作って紹介したよ。

そのときの発表資料は以下。

Firefox 3.5 and video element

View more documents from mollifier.

デモページのソースコード

デモページはこのダイアリーに埋め込めないので、ソースコードを載せておく。

まず、1つ目のシンプルなやつ。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Webteko video demo simple</title>
  </head>

  <body>
    <h1>video要素を使った例</h1>
    <video src="sportstacker.ogv" controls="controls"></video>
  </body>
</html>

うん、videoタグがあるだけだ。controls 属性をつけると「再生」「一時停止」とかのコントローラをブラウザ側で勝手につけてくれる。

次はもうちょっと凝った例。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Webteko video demo</title>
    <script type="text/javascript" src="video-controler.js"></script>
  </head>

  <body>
    <h1>video要素 JavaScriptから操作する例</h1>
    <video id="demovideo" src="sportstacker.ogv"></video>

    <div id="video-controls">
      <input id="play-button" type="button" value="play" />
      <input id="pause-button" type="button" value="pause" />
      <input id="init-button" type="button" value="init" />
    </div>
  </body>
</html>

今度は controls 属性はつけずに、操作するためのボタンを置いている。

で、video-controler.js の中身は以下。ボタンに再生とか動画を操作するイベントハンドラを割り当てている。

var Controler = {
  video : null,

  init : function() {
    Controler.video = document.getElementById("demovideo");

    document.getElementById("play-button").addEventListener(
      "click", function() { Controler.video.play(); }, false);

    document.getElementById("pause-button").addEventListener(
      "click", function() { Controler.video.pause(); }, false);

    document.getElementById("init-button").addEventListener(
      "click", function() {
        Controler.video.currentTime = 0;
      }, false);
  }
};

window.addEventListener("load",
  function() { Controler.init(); }, false);