Mac限定なんですけど、カスタムチャットスタイルを作って応募すればMacBook AirとかiPadとかもらえるで！っていう内容です。

Read more

HTML5（というかvideo要素）で表示されている場合は簡単に閲覧可能な動画をダウンロードすることができます。

この辺Flashだとflvだったりして再生しにくかったりするのが、HTML5だとmp4とか割と再生しやすいファイルになるので便利かも。ChromeとかSafariで実行するのがおすすめです。

ブックマークレット

以下のリンクをブックマークバーにドラッグして、YouTubeのサイトでクリックするだけです。クリックすると動画ファイルそのものが表示されるので、名前を付けて保存的なアクションで保存できます。

動画のファイル名は常に「videoplayback」になるので適当に変更したほうがよさそう。「WEBM」バッジがついている動画は形式がWEBMになっているのですがそのまま拡張子なしでダウンロードすると再生できないので、「.webm」の拡張子をつけるといいみたいです。.webmで保存するとVLCで再生できます。

ブックマークレット：HTML5動画からダウンロード

Read more

HTML5ではvideo要素で（手軽に？）動画を再生できますが、枠だけ書き出しておいて（別にHTML直書きでいいですが）、動画を入れ替える場合は少し注意が必要です。たぶん。

現状で動画フォーマットがいくつか存在しますが、複数のフォーマットをサポートしたい場合は以下のように書きます。

動的に書き換えるので、次のような関数用意して再生したい動画のURLを入れればよさげです。

function playMovie(mp4, ogg) {
  $('#videoElm')
    .html([ // ソースファイルをつっこむ
      '',
      ''
    ].join(''));
}

playMovie(piyo.mp4, piyo.ogg);

で結局何に注意しないとあかんかっていうのは、このままだとiOSで再生ができないんですね。iOSはmp4ファイル等で再生す
るんですけど、source要素を動的につっこんでもだめな様子。。

なので以下のようになりました。
source要素を動的につっこむのではなく、素直にsrc属性に入れてるだけです。

function playMovie(mp4, ogg) {
  if ( /AppleWebKit/.test(navigator.userAgent) ) {
  // iOSのとき
    $('#videoElm')
      .attr('src', mp4); // 素直にsrc属性に書く
  } else {
  // iOS以外
    $('#videoElm')
      .html([
        '',
        ''
      ].join(''));
  }
}

※ UA判定はもっと良い方法あったらそっち使ってください。

そろそろHTML5でコーディングする機会も増えてきたりするかもしれませんが、どうしてもブラウザ対応はしておきたいもの。jQueryで（※）要素をごにょごにょする際にちょっとはまったので一応書いておきます。

Read more