先日リリースされたVivaldi最新スナップショット(2.1.1332.4)で、YouTubeなどの動画を小さい画面で表示する「ピクチャー・イン・ピクチャー」(ビデオポップアウト)機能が搭載されました!( ´ ▽ ` )ノ

スナップショット 2.1.1332.4 リリース:Vivaldiブラウザー日本語公式ブログ

ピクチャー・イン・ピクチャー機能のスクリーンショット↓
Vivaldi 2.1.1332.4:YouTubeなどで使えるビデオポップアウト機能を搭載! - 12
Vivaldi 2.1.1332.4:YouTubeなどで使えるビデオポップアウト機能を搭載! - 12 posted by (C)kyu3

ちょうどその3日前に要望を出していたので、驚きました(私の要望が採用された?^^ )が… ただ実装したばかりと言うのもあって、使い方が分かりにくかったり、どのサービスで使えるのか等が分からなかったりするのは問題だなと思ったので、今回この機能の使い方とTips(ちょっとしたお役立ち情報)について、記事を書こうと思います。(*^^*)


1. 使い方と現状の機能


まず使い方についてですが、非常に簡単です!動画の右クリックメニューから「ピクチャー・イン・ピクチャー」の項目を選択するだけです。

動画の右クリックメニュー↓
Vivaldi 2.1.1332.4:YouTubeなどで使えるビデオポップアウト機能を搭載! - 2(ポップアウトする右クリックメニュー)
Vivaldi 2.1.1332.4:YouTubeなどで使えるビデオポップアウト機能を搭載! - 2(ポップアウトする右クリックメニュー) posted by (C)kyu3

ただしYouTubeの場合、最初に以下の黒いメニューが表示されると思います。しかしこのあと続けて右クリックをすると、上のような普通のメニューが表示されるので、それで選択します。(*^^*)

YouTube動画の右クリックメニュー(※.1回目)↓
YouTube動画のHTML5動画の右クリックメニュー
YouTube動画のHTML5動画の右クリックメニュー posted by (C)kyu3

ちなみに現状(ver. 2.1.1332.4)で使える機能は、以下の通りです。

・動画の再生・停止
・動画の大きさを変更可能
・動画の表示位置を変更可能


2. 利用できるWEBサービス


Operaの同様の機能(※.Operaでは2年前にこの機能が実装され、「ビデオポップアウト」と言う名称で呼ばれています)の場合、対応してるWEBサービスの動画の上に以下のようなアイコンが表示されます。これをクリックすると動画がピクチャー・イン・ピクチャー表示されるのですが、Vivaldiの場合残念ながら、現状こう言った機能は実装されていません。
※.ユーザースクリプトを使ってこの機能が実現できるそうです!詳しくは「追記その8」を参照。

Operaのピクチャー・イン・ピクチャー機能のアイコン↓
Opera 37:動画のポップアップ表示機能を搭載 - 2(動画最上部にポップアップボタン、YouTube)
Opera 37:動画のポップアップ表示機能を搭載 - 2(動画最上部にポップアップボタン、YouTube) posted by (C)kyu3

そのためそのWEBサービスで利用できるかどうかは、実際試してみる必要があります(これがちょっと面倒です。(^^; )…と言うことで、とりあえずどのWEBサービスで使えるか、ざっと試してみました。結果は以下の通りです。

<"利用できた" サービス>
YouTube
Dailymotion
Gyao!
Twitch(※.注:できる時とできない時あり?詳しくは追記参照!)
Mixer(※.注:できる時とできない時あり?詳しくは追記参照!)
ニコニコ生放送(※.注:動画最大表示時に画面端の右クリックで可能。詳しくは追記その6を参照!)

<"利用できなかった" サービス>
Vimeo
AbemaTV
ツイキャス
Periscope
Twitter
ニコニコ動画
Netflix
Amazonプライム・ビデオ
楽天TV
Hulu

現状ではまだ利用できないサービスが多いようです。「Gyao!」で使えたのは意外でしたが、当然使えるであろうと思っていた「Vimeo」で使えなかったのは、とても意外でした。

ちなみにこの機能、WEBサービス側で対応する必要があるのかどうかは分かりません(※. 公式ブログによると、一応"HTML 5動画"ならできるとのこと)が、少なくとも利用できるかどうかが明示的に分かり、かつ利用したい時にすぐに使えるOperaと同じ様な機能を、是非実装して欲しいなと思います。そうしたら少なくともユーザーがそのサービスで利用できるかどうか、すぐに分かるので。(*^^*)


3. Tips:パネルでも利用可能、簡易コントローラー化


最後にTipsを2つ。まずはこの機能、WEBパネルの動画でも利用することができます!以下の @AKAMAGE さんのツイートで知ったのですが、これが意外に快適♪ (*^^*)


@AKAMAGE さんも指摘していますが、現状Vivaldiのピクチャー・イン・ピクチャー(PiP)機能は、動画の再生・停止しかできません。例えば音量調節や動画の再生位置を変更したい場合は、WEBページ上の元動画の方のコントロール部分で行う必要があります。

元動画でピクチャー・イン・ピクチャーした動画を操作してるところ↓
(※. 字幕はPiPした動画の方には表示されず、元動画の方に表示されます)
Vivaldi 2.1.1332.4:ピクチャー・イン・ピクチャー機能(字幕はPinPに表示されず、再生・停止以外は元動画で捜査)- 2
Vivaldi 2.1.1332.4:ピクチャー・イン・ピクチャー機能(字幕はPinPに表示されず、再生・停止以外は元動画で捜査)- 2 posted by (C)kyu3

この場合通常のタブで開いてる動画だとわざわざそのタブのページに移動しなければなりませんが、パネルならそのページに移動することなく開くことができ、操作後すぐに閉じることもできるので、結構便利だと思います。(*^^*)

パネルのYouTube動画をピクチャー・イン・ピクチャーしてるところ↓
Vivaldi 2.1.1332.4:WEBパネルの動画もポップアウト可能! - 6
Vivaldi 2.1.1332.4:WEBパネルの動画もポップアウト可能! - 6 posted by (C)kyu3

ちなみにパネルで通常表示されるモバイル版のYouTubeだと、1回めの右クリックで「ピクチャー・イン・ピクチャー」のメニューが表示されます。

モバイル版YouTube動画の右クリックメニュー↓
Vivaldi 2.1.1332.4:WEBパネルの動画もポップアウト可能! - 2
Vivaldi 2.1.1332.4:WEBパネルの動画もポップアウト可能! - 2 posted by (C)kyu3

あとこの機能、視聴してる動画が音声メインであれば、最小化して画面隅に表示することで、簡易コントローラとして利用することもできると思います!これならわざわざ動画の再生・停止でその動画を開いてるタブやパネルを表示する必要がないので、とても便利だと思います。( ´ ▽ ` )ノ

画面隅に最小化表示してるところ↓
Vivaldi 2.1.1332.4:パネルのYouTube動画を最小化表示して簡易コントローラー代わりに! - 5
Vivaldi 2.1.1332.4:パネルのYouTube動画を最小化表示して簡易コントローラー代わりに! - 5 posted by (C)kyu3

Vivaldi 2.1.1332.4:パネルのYouTube動画を最小化表示して簡易コントローラー代わりに! - 4
Vivaldi 2.1.1332.4:パネルのYouTube動画を最小化表示して簡易コントローラー代わりに! - 4 posted by (C)kyu3


【関連リンク】
スナップショット 2.1.1332.4 リリース:Vivaldiブラウザー日本語公式ブログ
Operaみたいなビデオポップアウト機能:Vivaldi公式フォーラム

【関連記事】
Opera 37レビュー:動画のポップアップ、広告ブロック、ほか : Kyu3’s Blog
OperaとVivaldiでサッカーW杯を楽しむ方法 : Kyu3’s Blog
Vivaldi最新スナップショットで、パネルのオーバーレイ表示が可能に! : Kyu3’s Blog


【追記(2018年10月17日)】


おもにゲーム配信として利用されてる「Mixer」と「Twitch」、どうも利用できる時とできない時があるみたいで、右クリックメニューに当該メニューが表示される時とされない時がありました。なので一応両方とも”注意書き付き"で、「できる」の項目に追加しました。(^^;

あとこの「ピクチャー・イン・ピクチャー」機能自体は、拡張機能を使っても利用できます。例えば以下の「Picture-in-Picture」と言う拡張を使うと「Youtube」や「Dailymotion」だけでなく、「Vimeo」や「Perisope」に加え、「Amazonプライム・ビデオ」や「Netflix」(あと「Hulu」も)などの有料動画配信サービスの動画でも、ピクチャー・イン・ピクチャーが利用できます!( ´ ▽ ` )ノ @nibushibu さん、感謝!!

Picture-in-Picture:Chromeウェブストア

「Picture-in-Picture」でAmazonプライムビデオの動画をピクチャー・イン・ピクチャーしたところ↓
Chrome拡張「Picture-in-Picture」:Amazonプライムビデオの動画もPinP可能! - 1
Chrome拡張「Picture-in-Picture」:Amazonプライムビデオの動画もPinP可能! - 1 posted by (C)kyu3

ちなみに他にも同様の拡張は複数あるので、興味のある方は、以下の「関連リンク」のリンク先ページを見てみてはいかがでしょう?

【関連リンク】
「picture in picture」で検索:Chromeウェブストア
「video popout」で検索:Chromeウェブストア


【追記 その2(2018年10月24日)】


今日(10月24日)リリースされた最新スナップショットの"RC 2"(正式版2.1リリース候補の第2段)で、残念ながらピクチャー・イン・ピクチャー機能が削除されたそうです。そして近々リリースされる正式版2.1の最初のバージョンでの実装も、見送られたとのこと。(^^;

Vivaldi 2.1 RC2 リリース:Vivaldiブラウザー日本語公式ブログ



【追記 その3(2018年11月4日)】


公式ブログなどで特にアナウンスされてませんでしたが、最新のスナップショット 2.2.1350.4 で、ピクチャー・イン・ピクチャー機能が復活してました。(*^^*)


【関連リンク】
Vivaldiブラウザースナップショット 2.2.1350.4 リリース:Vivaldiブラウザー日本語公式ブログ


【追記 その4(2018年12月13日)】


今日(12月13日)リリースされた正式版2.2に、この「ピクチャー・イン・ピクチャー」機能が搭載されました!( ´ ▽ ` )ノ


…と言うことで、この記事のタイトルを「Vivaldiスナップショットに搭載された『ピクチャー・イン・ピクチャー』機能の使い方とTips」から、「Vivaldiの『ピクチャー・イン・ピクチャー』機能の使い方とTips」に変更しました。(*^^*)


【関連リンク】
Vivaldi 2.2 リリース:Vivaldiブラウザー日本語公式ブログ


【追記 その5(2018年12月15日)】


公式ブログによると、対応してる動画は「HTML 5ビデオ(動画)」とのことだったので、一応その件を本文に追記しました。


【追記 その6(2018年12月19日)】


コメント欄の書き込みで知ったのですが、「ニコニコ生放送」でもピクチャー・イン・ピクチャーできることが分かりました!( ´ ▽ ` )ノ Unknown さんに感謝!!

…ただしやり方が少し特殊で、Macの場合はOSのフルスクリーンを使用せず、デスクトップにウィンドウを表示した状態で、動画を最大表示(※フルスクリーンではない)し、画面端に現れる細い黒い線の部分を右クリックすることでメニューが現れるので、それを選択するとPiPできます!

ニコニコ生放送をPiPしたところ↓
Vivaldi 2.3.1401.7:ニコニコ生放送でもPiP可能! - 1(コメントは元動画の方のみ表示)
Vivaldi 2.3.1401.7:ニコニコ生放送でもPiP可能! - 1(コメントは元動画の方のみ表示) posted by (C)kyu3

右クリック箇所↓
Vivaldi 2.3.1401.7:ニコニコ生放送でもPiP可能! - 6(デスクトップで最大表示端右クリックで可能)
Vivaldi 2.3.1401.7:ニコニコ生放送でもPiP可能! - 6(デスクトップで最大表示端右クリックで可能) posted by (C)kyu3

なおニコニコ生放送で映像の上に表示されるコメントやアンケートは、PiP側には表示されません。元動画の方に表示されます。


【追記 その7(2019年2月23日)】


久しぶりに「Hulu」の契約を再開したのでピクチャー・イン・ピクチャー機能を試してみましたが、残念ながらこちらも利用できませんでした。なので、その件を本文に追加しました。また拡張「Picture-in-Picture」も試してみましたが、こちらは他の有料サービスと同じく利用できたので、その件を追記に書きました。(*^^*)


【追記 その8(2019年4月17日)】


Vivaldi公式フォーラムに「便利情報」と言うVivaldiに関するお役立ち情報や便利な使い方等を書き込むカテゴリが先日作成されたのですが、そこにユーザースクリプト」と言う仕組みを使った拡張機能を使って、Operaみたいにビデオポップアップするためのボタンを動画上部に表示する機能を実現できる仕方について書かれたトピックを見つけたので、以下に掲載しておきます。

【UserScript】 ビデオポップアウトボタンを追加する:Vivaldi Forum


【関連リンク】
便利情報:Vivaldi Forum
ユーザースクリプトのインストール方法:Greasy Fork
Easy Picture-in-Picture:Greasy Fork・・・上記の機能を実現するためのユーザースクリプト。


【追記 その9(2019年4月18日)】


上記の「追記その8」で紹介したユーザースクリプト「Easy Picture-in-Picture」を早速試してみました。デフォルトで使えるYouTubeやDailymotionだけでなく、AbemaTVやNetflix、HuluなどでもPiPできました!(*^^*)

ユーザースクリプト「Easy Picture-in-Picture」を使ってNetflix動画をPiPしたところ↓
Vivaldi 2.5.1511.4:UserScript「Easy Picture-in-Picture」でビデオポップアップ - 3(Netflix)
Vivaldi 2.5.1511.4:UserScript「Easy Picture-in-Picture」でビデオポップアップ - 3(Netflix) posted by (C)kyu3

上記の「追記」で紹介した拡張「Picture-in-Picture」と比較すると、導入のしやすさで言えば「Picture-in-Picture」でしょうが、導入後の使い勝手で言うとこちらのユーザースクリプト「Easy Picture-in-Picture」の方だと思います。

ただ「Easy Picture-in-Picture」はAmazonプライム・ビデオではPiPできなかった(「Picture-in-Picture」はできる)ので、自分が使いたいサイトで使えるか試したうえで、利用しやすい方を使ってみてはいかがでしょう。

最後に上記本文「2」の項目でも書きましたが、PiPできる動画の上にPiP用のボタンが表示されるのは、非常に使い勝手が良いと思います。なので、できたら拡張やユーザースクリプトを追加しなくても良いように、Vivaldiがデフォルトでサポートしてくれると良いなと思います。(*^^*)