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

これで快適な動画視聴ライフ!
拡大表示


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

俺は普段ほとんどの時間をYouTube見ることに使ってるので(それもどうなんだ笑),未だにHTML5に未対応な動画サービスを見ることは少ないんだけど.でも時々,例えば最近で言うと「マリオメーカー学会」みたいな,面白い潮流がYouTubeの外で流行った時には,やっぱり俺もそれを見たい.でもHTML5じゃない,例えばFlashの動画プレーヤーってロードの遅いし,YouTubeなら標準で使える早送り機能も出来ないし,シークバーで動画を飛ばしてみることも出来ないでしょ.本当に不便,だからよっぽどのことがないと見たくないんだよね.
FireFoxにはアドオンという仕組みがあるから,アドオンでFlashPlayerで見せられる動画をHTML5表示するものがないか探したことがあったんだけど,確か以前探した時はなかったんだよねぇ.だから本当につい最近完成して公開されたんだと思う.何かって言うと,動画をHTML5で見るアドオン!あります!こちら!

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

HTML5プレーヤーの文字化け対応

Windowsでこのアドオンを使うと問題ないみたい.下の画像はWindowsで同じプラグインを試してるスクリーンショット.特に面倒くさい設定やら何やらをしてないけど,問題なくUIが表示されてるよね.
unnamed
control
わたしのPCはUbuntuなので,ちょっと環境が違う.フォントが無いので操作系の記号が文字化けしてしまうのです.
インストール前
文字化け
右下の2つね.具体的には「🔊 (U+1F50A:スピーカーと3つの音波)」と「💬 (U+1F4AC:ふきだし)」.これらが文字化けしてしまう環境だと,このアドオンを使っても俺と同じ文字化けが起きるかも!この文字を使ってるということがアドオンのソースコードから分かったので,それを含むフォントを用意する必要があるね.
探してみたらすぐに見つかりました.Symbolaと言うフォント.これをインストールして,ユニコードの奥深くにある絵文字に対応しましょう!このリンクでダウンロードページに行けるよ.

【引用】 Symbola font

文字化けを直すとこんな感じ.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;
}

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

コメントを残す

Powered by WordPress.com. テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑

%d人のブロガーが「いいね」をつけました。