独自のピクチャ イン ピクチャ ビデオ機能のブックマークレットを作成する

charlesdeluvio によるカバー画像

...

一部の Web サイトやビデオ ストリーミング サービスには、ピクチャ イン ピクチャ モードでビデオを視聴できる機能がありますが、この機能は何らかのペイウォールの背後にロックされているか、サブスクリプションの特典となっています。

一部の Web サイトにはこの機能がまったくありません!

これは最新のすべての Web ブラウザーに組み込まれている機能であり、その方法を知っている人であれば、特別な努力や購入、プラグイン、ハックなどを必要とせずに無料で使用できる機能であるため、これは腹立たしいことだと思います。

その方法は次のとおりです:

オプション 1 - Web ブラウザの開発ツールを介してコードを入力します

• Web ブラウザの開発ツールを開きます (通常は F12 キーを押すか、右クリックして [要素の検査] を選択します)
• 「コンソール」タブに移動します
• 次のコードを貼り付けます。

// find the video element (may not work on sites with multiple video elements, but works for most of the main sites)
var vid = document.querySelector("video");

// remove the attribute that might stop us from launching the video in PiP
vid.removeAttribute("disablePictureInPicture");

// finally, request the PiP
vid.requestPictureInPicture();

すべて順調に進んでいると、ビデオがポップアップ表示されるはずです。そうでない場合は、document.querySelector("video") を調整して、ページ上の特定のビデオ要素を選択する必要がある場合があります。

オプション 2 - PiP を起動するためのブックマーク ボタンを作成する

このコードはオプション 1 の例と同じですが、URL として実行できるように 1 行ずつ削られています。

使用方法は次のとおりです:

• 次のすべてを選択し、ブラウザのブックマーク バーにドラッグ アンド ドロップするか、
• PiP という名前の新しいブックマークを作成し、次の内容をブックマークの URL として貼り付けます。 javascript: var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
• ブックマークをクリックして PiP を起動します

「ブックマークレット」はどのように機能しますか?

通常、ブックマークを使用すると、新しい Web ページに移動します。ブックマークレットは、新しいページに移動するのではなく、現在のページで JavaScript を実行するブックマークです。ブックマークレットであることを宣言するには、ブックマークレットが指す「場所」が javascript:.

で始まります。

— ケイシーワッツ

ここでの魔法は、URL の先頭に JavaScript を追加することです。これにより、新しいページに移動するのではなく、現在のページでアクションを実行するようにブラウザーに指示されます。

ブックマークレットの詳細と、ブックマークレットを使ってよりクリエイティブになる方法については、@caseywatts によるブックマークレットの作成に関する素晴らしい説明を参照してください

...

元の記事: https://mothy.dev/posts/free-picture-in-picture

以上が独自のピクチャ イン ピクチャ ビデオ機能のブックマークレットを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。