HTML5未対応の動画サイトをHTML5で観る

動画をHTML5で見るアドオンはこちら！ (追記: 圧力により公開停止へ)

使い心地はこんな感じ

Windowsでこのアドオン kusa5 を使うと問題ないみたい．下の画像はWindowsで同じプラグインを試してるスクリーンショット．特に面倒くさい設定やら何やらをしてないけど，問題なくUIが表示されてるよね．

Ubuntu での HTML 5 プレーヤーの文字化け対応

わたしのPCはUbuntuなので，ちょっと環境が違う．フォントが無いので操作系の記号が文字化けしてしまうのです．

右下の2つね．具体的には「🔊 （U+1F50A：スピーカーと3つの音波）」と「💬 （U+1F4AC：ふきだし）」．これらが文字化けしてしまう環境だと，このアドオンを使っても俺と同じ文字化けが起きるかも！この文字を使ってるということがアドオンのソースコードから分かったので，それを含むフォントを用意する必要があるね．

探してみたらすぐに見つかりました．Symbolaと言うフォント．これをインストールして，ユニコードの奥深くにある絵文字に対応しましょう！このリンクでダウンロードページに行けるよ．

文字化けを直すとこんな感じ．Flashによる動画視聴で不当に不便を強いられる場面でも，これでかなり便利に楽しめるね！素晴らしい！

ついでにレイアウトも微調整！

でも，まだもう少し改善したい．上下の無意味な余白を削除して，動画表示の領域を広く取りたい．これはソースコードの冒頭の一部をちょいっといじってできるので，簡単に変更しました．

addGlobalStyle(`
#kusa5 {
  position: relative;
  /*background-color: hsla(180, 10%, 0%, 0.8);*/
  background-color: #000;
  width: 1120px;
  height: 735px;
  overflow: hidden;
  margin: 0 auto;
}
#kusa5 video {
  display: block;
  background-color: #000;
  height: 100%;
  max-width: 100%; /* 画面外にはみ出ないように */
  margin: 0 auto;
}
#wallImageContainer .wallImageCenteringArea .wallAlignmentArea.image2{
  z-index: 3;
  background-color: #CCCEC3;
}
#playerContainerWrapper {
  padding: 0px 0;
}

変更箇所は:

6 – 7 行目の width と height を追加
23 行目の padding を追加

俺はcssとかjavascriptとか書けないので，このへんの意味わかりそうなギリギリしか手を出せないけど，これだけあればレイアウトを変更することができるので，俺にしてみれば十分！この変更によって，レイアウトはこんなふうに変わりました！ビデオが大きい！無駄な余白が無い！見やすい！楽しい！作者に感謝！

ウェブの動画をHTML5で見たい！

俺は普段ほとんどの時間をYouTube見ることに使ってるので（それもどうなんだ笑），未だにHTML5に未対応な動画サービスを見ることは少ないんだけど．でも時々，例えば最近で言うと「マリオメーカー学会」みたいな，面白い潮流がYouTubeの外で流行った時には，やっぱり俺もそれを見たい．でもHTML5じゃない，例えばFlashの動画プレーヤーってロードの遅いし，YouTubeなら標準で使える早送り機能も出来ないし，シークバーで動画を飛ばしてみることも出来ないでしょ．本当に不便，だからよっぽどのことがないと見たくないんだよね．

FireFoxにはアドオンという仕組みがあるから，アドオンでFlashPlayerで見せられる動画をHTML5表示するものがないか探したことがあったんだけど，確か以前探した時はなかったんだよねぇ．だから本当につい最近完成して公開されたんだと思う．HTML 5 で見るアドオン！これで快適な動画視聴ライフ！

非常に素晴らしい！HTML5に対応しない時代遅れで意味不明なサービスの制限を取っ払うことができるなんて素晴らしい．ウェブを自分好みにカスタマイズして閲覧するというアドオンの本来の使途を体現してる．全く問題ないね．