読者です 読者をやめる 読者になる 読者になる

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

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

LTの資料

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

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

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

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

まず、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);

最後の currentTime ってのは今の再生時間で、動画の先頭から何秒目なのかを表している。この値は読み書き両方できるので、0を代入すると先頭に戻る。

参考にしたページ

今回参考にしたページは以下。

MDCのページ。

videoタグ、JavaScriptから操作するサンプルコード。

最後に

今回はデザインがテーマということで、他の勉強会ではなかなかでてこないような話が聞けた。デザインめちゃ楽しいよ。なんかもう、このままデザイン勉強会になってしまえばいいんじゃないのかと思ったくらい。これからもWebtekoでのデザイナーとプログラマzsh使い(僕)のしのぎあいに注目しよう。