チラシの裏からうっすら見える外枠の外のメモ書き

新聞に挟まってる硬い紙のチラシの裏からうっすら見える外枠の外に走り書きされたようなものです。思いついたときにふらふらと。

Google Chromeのピクチャーインピクチャーで映像を好きな場所に表示する拡張機能

あけましておめでとうございます。

いつの間にか2018年も終わってしまいました。

元日ですが記事のネタを思いついたので書いておきます。

 

2018年の10月ごろに行われたGoogle Chromeのアップデートで、ピクチャーインピクチャー機能が正式にサポートされました。

developers.google.com

www.itmedia.co.jp

このピクチャーインピクチャー機能は、YouTubeなどのWebページ上の動画を、ディスプレイの好きな場所に表示することができ、さらに最前面に固定することができます。

これを使えば、なにか作業をしながら動画を見たいときにウィンドウを常に最前面にしておかなくても、映像だけを小さく最前面に表示することができるようになります。

 

上で紹介した記事にあるとおり、Webページの動画を右クリックして、「ピクチャー イン ピクチャー」をクリックするだけで有効化できるのですが、一部のWebサイトでは選択することができない場合があります。

例えば、niconicoでは上にコメントが表示されるため、動画を右クリックしても「ピクチャー イン ピクチャー」の項目は表示されません。

少し手を加えると「ピクチャー イン ピクチャー」が含まれるメニューを表示することができるのですが、それは手間がかかるので万人向けではありません。

 

そこで、ワンクリック(でないときもある)でピクチャーインピクチャーを有効化する拡張機能を紹介します。

これは公式の拡張機能です。

chrome.google.com

これをインストールすると、ウィンドウの右上に拡張機能のアイコンが追加されます。

ピクチャーインピクチャーを有効化したい動画のあるWebページで、動画を一度再生してからこの拡張機能のアイコンをクリックすると、その動画に対してピクチャーインピクチャーが有効化されます。*1

 

なお、この拡張機能Googleが公式で作成した拡張機能のようですが、極稀に危険な拡張機能の場合もあるので十分注意してください。

また、1つのWebページ上に複数の動画がある場合は、一番上にある動画*2に対してピクチャーインピクチャーが有効化されます。

iframeで埋め込まれた動画は、CORS(クロスオリジンリソースシェアリング)の関係上有効化できないかと思います。

 

この拡張機能ソースコードGitHubで公開されているので、興味のある方はぜひどうぞ。現時点ではCORS関連の実験をしているブランチもあるようです。

github.com

*1:一度再生しておかないと動画として認識されていない可能性が非常に高いです。YouTubeの埋め込みはその可能性

*2:正確には、ソースコードの一番上にある動画