独自のピクチャ イン ピクチャ ビデオ機能のブックマークレットを作成する
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 サイトの他の関連記事を参照してください。

ホットAIツール

Undress AI Tool
脱衣画像を無料で

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Stock Market GPT
AIを活用した投資調査により賢明な意思決定を実現

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

この記事では、JavaScriptを使用して画像をクリックする効果を実現する方法を紹介します。コアのアイデアは、HTML5のデータ - *属性を使用して、代替画像パスを保存し、JavaScriptを介してクリックイベントをリッスンし、SRC属性を動的に切り替えて、画像の切り替えを実現することです。この記事では、詳細なコードの例と説明を提供して、この一般的に使用されるインタラクティブ効果を理解し、習得するのに役立ちます。

まず、ブラウザがGeolocationapiをサポートしているかどうかを確認します。サポートされている場合は、getCurrentPosition()を呼び出してユーザーの現在の位置座標を取得し、成功したコールバックを通じて緯度と経度の値を取得します。同時に、拒否許可、場所の利用不能、タイムアウトなどのエラーコールバック処理の例外を提供します。また、高精度を有効にするために構成オプションを渡し、タイムアウト時間とキャッシュの妥当性期間を設定することもできます。プロセス全体には、ユーザー承認と対応するエラー処理が必要です。

この記事の目的は、javascriptのdocument.getElementbyid()を介してDOM要素を取得するときにnullを返す問題を解決することを目的としています。コアは、スクリプトの実行タイミングとDOM解析ステータスを理解することです。タグを正しく配置するか、DomContentLoadedイベントを使用することにより、要素が利用可能なときに再び試行され、そのようなエラーを効果的に回避することができます。

JavaScriptに繰り返し間隔を作成するには、SetInterval()関数を使用する必要があります。これは、指定されたミリ秒間隔で関数またはコードブロックを繰り返し実行する必要があります。たとえば、setinterval(()=> {console.log( "2秒ごとに実行");}、2000)は、clearinterval(intervalid)によってクリアされるまで2秒ごとにメッセージを出力します。実際のアプリケーションでは、クロック、投票サーバーなどを更新するために使用できますが、最小遅延制限と機能実行時間の影響に注意を払い、メモリの漏れを避けるために不要になった時間の間隔をクリアします。特にコンポーネントのアンインストールまたはページの閉鎖の前に、それを確認してください

thebestatatororeAteamulti-linestringinjavascriptsisingsisingSemplatalalswithbackticks、whitherverebreakenexactlyaswritten。

NUXT3の構成APIコア使用量には次のものが含まれます。1。DefinePageMetaは、タイトル、レイアウト、ミドルウェアなどのページメタ情報を定義するために使用されます。 2。Useheadは、ページヘッダータグを管理し、静的およびレスポンシブな更新をサポートし、SEO最適化を実現するためにDefinePageMetaと協力する必要があります。 3. useasyncdataは、非同期データを安全に取得し、負荷とエラーステータスを自動的に処理し、サーバーとクライアントのデータ収集制御をサポートします。 4. usefetchは、useasyncdataと$ fetchのカプセル化であり、リクエストキーを自動的にエンスして、リクエストを重複しないようにします

このチュートリアルでは、JavaScriptに固定された2つの小数を持つ文字列に数値をフォーマットする方法を詳細に説明します。整数でさえ「#.00」の形で表示できます。 number.prototype.tofixed()メソッドの使用に焦点を当てます。これには、その構文、機能、サンプルコード、およびそのリターンタイプが常に文字列であるなどの重要なポイントが含まれます。

ClipboardapiのWriteTextメソッドを使用してテキストをクリップボードにコピーします。セキュリティコンテキストとユーザーインタラクションで呼び出され、最新のブラウザーをサポートし、古いバージョンをExecCommandで格下げできます。
