Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

ホーム > Chrome > これはすごい!再生中の動画が映画のスクリーンの様に見やすくなるエクステンション「Turn Off the Lights」

これはすごい!再生中の動画が映画のスクリーンの様に見やすくなるエクステンション「Turn Off the Lights」

最近では、ホームページで情報を発信する際のメディアとして、動画は当たり前のように使われるようになりました。

プロモーションムービーや、簡単な操作説明などの動画はよく見かけますよね。

これらの動画の多くは、記事の中に埋め込まれており、その場で再生できるようになっているので便利です。

しかし、記事の中に動画が埋め込まれているため、再生しても周りのテキストや広告が目に入ってしまい、どうしても動画に注目しにくい問題があります。

これは、映画館が明かりを消さずに上映しているのと同じことです。

もちろん動画だけをフルスクリーン表示すれば解消はできますが、会社など周りの目が気になるところでフルスクリーン再生するのは気がひけます。

そこで今回ご紹介するのが、ページに埋め込まれた動画を映画のスクリーンの様に見やすくするChromeエクステンション「Turn Off the Lights」です。

Turn Off the Lights」を使えば、ページ全体が暗くなって動画エリアだけをハイライトしてくれるので、

映像や動画がとても見やすくなります!

ちょっとしたことなのですが、これがあるのとないのとでは大違いですよw

それでは、実際に試してみましょう!

動画が埋め込まれたブログ

Turn Off the Lights」をインストールして、動画が埋め込まれたブログにアクセスします。

この状態で再生すると今まで通り記事の中で普通に再生されます。

ページを暗くするために、電球アイコンをクリックします。

ページ全体が暗くなって動画だけがハイライトされます。

キャプチャーだとパッとしない感じがしますが、実際に再生してみるとこの違いは大きいです!!

ものすごく動画が見やすくなります。

Youtubeのサイトにある動画

Youtubeで動画を再生した場合も同様に効果を発揮します。

通常だと、このように再生されます。

「Turn Off the Lights」で暗くすると、こんなに見やすくなります。

Youtubeのサイト上にある動画の場合、Turn Off the Lightsの設定で「再生すると自動的に背景を暗くする」をONにしておくと、わざわざ電球アイコンをクリックしなくても自動的に暗くなるので非常に便利です。

Picasaのアルバム画像

なんと!「Turn Off the Lights」は、動画だけでなくPicasaのアルバムにも対応しているのです。

通常、Picasaのウェブアルバムはこのように見えています。

「Turn Off the Lights」で暗くすると、画像だけがハイライトされます。

もちろん拡大した時も適用されます。

豊富なオプション設定

「Turn Off the Lights」は単機能なのに、オプション設定がものすごく豊富です。

基本設定では、透明度や自動再生、Youtubeのサイトでどの部分を適用するかなどが設定できます。

視覚効果設定では、ハイライトされる動画の縁に色をつけたり、フェードイン・フェードアウト効果のオン・オフが設定できます。

詳細オプション設定では、ショートカットキーや調整バーの表示など細かな設定が行えます。

調整バーを表示するにしておくと、ページの右下で明るさを調整できるようになります。

まとめ

Turn Off the Lights」をインストールしておけば、ページ全体を暗くして動画だけをハイライトしてくれます。

映像や動画がとても見やすくなります!

単機能なのですが、動画をよく見る人にとっては重宝するChromeエクステンションだと思いますよw

動画は、YoutubeだけでなくHTML5ベースの動画にも対応しています。

まだインストールしていない方は、是非チェックしてみてください。

「Turn Off the Lights」は、Chrome以外にもFirefoxやIE、Safari、Opera用のエクステンションもあるようです。

各ブラウザ別のエクステンションは、こちらのページからダウンロードできます。

【追記】
臓器1つ1つの詳細な説明や、関連する病気・症状など医学的に必要な知識が学べるChromeウェブアプリでHTML5+WebGLを体験しよう!
HTML5+WebGLで医学・解剖学が学べる!3D人体解剖図ウェブアプリ「BIODIGITAL HUMAN」

【おすすめのオンライン画像加工アプリ】
HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。
HTML5で作られた驚異のフォトエディターまとめ

それでは、また!

タグ: ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。