皆さんこんにちは、少し遅れてのブログ投稿になりましたがいかがお過ごしてでしょうか？私はウーバーイーツの他にwoltも始めました、FascodeNetworkのなおこです。
今回は動画やYoutubeで音楽を聞きながら作業する方におすすめしたいPicture-in-Picture 略してPiPを有効化することができるGoogleが開発した拡張機能Picture-in-Picture Extension (by Google)をご紹介したいと思います。
Picture-in-Picture についてはgoogleのページにわかりやすくまとめられているのでこちらを見ていただけますと幸いです。↓
別のアプリを使用中
Picture-in-Picture Extension (by Google)とは
Picture-in-PictureはPiPとも言われており、WebAPIが存在するためdomを指定して実行することで、動画をポップアップウィンドウで再生することができます。
Picture-in-Picture ExtensionはGoogleが開発しているPicture-in-Pictureをかんたんに有効化することができる拡張機能です。
詳しいプログラムの解説はw3cのサイトにわかりやすくまとめてありますのでぜひぜひご覧いただけますと幸いです。
拡張機能を導入しない場合はDeveloper Toolsでjavascriptのプログラムを打つことでPicture-in-Pictureを起動できますが、今回紹介する拡張機能を追加することで動画をPicture-in-Pictureにしたいとき毎回javascriptのプログラムを打たなくて済むようになります。
ちなみにAndroid8以降のスマートフォンでも実装されている機能ですね
今回使うPCスペックや実行環境
- OS : Alter Linux(実質Arch Linux)
- MB : B450M Steel Legend
- CPU : AMD Ryzen 5 5600x
- GPU : NVIDIA GTX 960
- RAM : 32GB
- HDD : 4TB
Picture-in-Picture Extension (by Google)をインストールしてみる
Picture-in-Pictureの利便性は実際に使ってみないと伝わらないので実際にインストールしてみましょう。
最近のブラウザはChromium派生のブラウザが多いのでchromeウェブストアからインストールする方法をご紹介します。firefoxに関してはデフォルトでPiPが実装されているため今回は省力します。
Google Chrome、Microsoft Edge、Opera、Braveの場合
下記のURLに飛び、右上にある水色のchrome に追加するというボタンを押します。
その後権限の許可が求められるので拡張機能の追加をクリックすることで拡張機能のインストールを行うことができます。
Picture-in-Picture Extension (by Google)を使ってみる
Picture-in-Picture Extension (by Google)をchromeウェブストアから無事にインストールできたの実際に使ってみたいと思います。
使うと言っても、かんたんでPicture-in-Pictureを行いたいページでショートカッキーAltキー + pキーを同時押しまたはアイコンをクリックすることでPicture-in-Pictureの起動ができます。
アイコンをクリックすると枠がないウィンドウが生成されてそのウィンドウ内で動画が再生される形です。
videoタグを自動で取得してPicture-in-Pictureを起動してくれるので便利ですね。
検証に使った動画↓
Picture-in-Picture Extension (by Google)のメリット、デメリット
２０２１年１２月７日時点でのPicture-in-Picture Extensionを使ってみて感じたことをメリットやデメリットに分けてご紹介したいと思います。
メリット
- 動画を見ながら効率よく作業できる
- ブラウザを縮小したりウィンドウの裏においても動く
- PiP内で再生や停止スキップなどの操作を行える。
デメリット
- たまに使用できないサイトがある。（ニコニコ動画とか）
- ブラウザを閉じてしまうとPiPも閉じてしまう
最後に
スマートフォンでPiPを使ったことある人はパソコンでも同じ機能を使いたいと言うときがあるでしょうそんなときに拡張機能を入れるだけで同様の効果を得られるのは良いですね。
そんな感じでGoogleが開発した拡張機能Picture-in-Picture Extensionの紹介でした。なかなか便利な拡張機能なのでぜひぜひみなさんも使ってみてくださいね
（拡張機能ネタをこすりすぎてるかもと思い始めているなおこでした〜）
The post 【Picture-in-Picture Extension】ポップアップで動画を再生できる便利な拡張機能【PiP】 first appeared on FascodeNetwork Blog.