ビデオの絵の絵のAPI

Picture-in-Picture（PIP）APIを使用すると、ユーザーが他の場所に移動しながら、フローティングウィンドウでビデオを再生できます。 1.「PictureInPictureEnabled」を介してサポートをチェックし、ビデオのDisablePictureInPicture属性。 2。ユーザージェスチャーでRequestPictureInPicture（）を使用してPIPをトリガーします。 3. EnterpictureInPictureおよびleavePictureinPictureイベントで状態の変更を処理します。この機能には、ユーザーのインタラクションが必要であり、一度に1つのPIPウィンドウのみを許可し、モバイルサポートが限られており、DRMコンテンツを除外し、スタイリングコントロールを提供できませんが、適切なUIフィードバックとサポートチェックで適切に使用するとマルチタスクを強化します。

Picture-in-Picture（PIP）は、別のページを閲覧したり、別のアプリを使用したりするなど、デバイスの他の場所をナビゲートしながら、小さな浮遊ウィンドウでビデオを視聴し続けることができる便利な機能です。 Webでは、この機能は、 <video></video>要素のPIP動作を開発者に制御できる比較的新しいがますますサポートされているWeb APIであるPicture-in Picture APIを通じて有効になります。

効果的に使用するために知っておくべきことは次のとおりです。

PIP APIが行うこと

Picture-in-Picture APIを使用すると、Webページをプログラムでプログラムで入力して、ビデオモードを終了します。アクティブ化されると、ビデオはブラウザから他のアプリの上に留まる小さな移動可能なウィンドウにポップアウトし、ユーザーが再生を中断することなくマルチタスクを可能にします。

<video></video>要素でのみ動作し、ユーザーインタラクションを開始する必要があります（セキュリティおよびユーザーエクスペリエンスの理由）。 Chrome、Edge、Safariのバージョンなどのブラウザはそれをサポートしていますが、Firefoxなどはまだそうではありません。

PIP APIの使用方法

APIの使用は簡単です。これが重要な部分です：

1.サポートと可用性を確認します

PIPを使用しようとする前に、ブラウザがサポートしているかどうかを確認してください。

 if（ 'pictureinpictureEnabled' in document）{
  console.log（ 'pipがサポートされています！'）;
}

特定のビデオがPIPを入力できるかどうかを確認することもできます。

 if（！video.disablepictureinpicture）{
  //ビデオはPIPに移動できます
}

注：必要に応じてPIPを防ぐために、 <video>タグにdisablePictureInPicture属性を使用します。

2。PIPモードをリクエストします

PIPを入力するには、ビデオ要素でrequestPictureInPicture()を呼び出します。

 async function openpip（）{
  試す {
    await video.requestpictureinpicture（）;
  } catch（err）{
    Console.Error（ "PIPの入力に失敗しました："、err）;
  }
}

これは、ユーザージェスチャー（クリックなど）によってトリガーされる必要があります。そうしないと、失敗します。

3.ピップ状態の変更を処理します

PIPが起動または終了したときに聞くことができます：

 video.addeventlistener（ 'enterpictureinpicture'、（event）=> {
  console.log（ '入力PIP'）;
  // UIを調整します。たとえば、コントロールを非表示にします
}）;

video.addeventlistener（ 'reavepictureinpicture'、（event）=> {
  console.log（ 'exited pip'）;
  // uiを復元します
}）;

これらのイベントは、インターフェイスを同期させるのに役立ちます。

実用的な例：ピップボタンを追加します

<ビデオID = "myVideo" Controls>
  <source src = "demo.mp4" type = "video/mp4">
</video>
<ボタンID = "pipbutton">トグルpip </button>

 const video = document.getElementById（ 'myVideo'）;
const pipbutton = document.getElementById（ 'pipbutton'）;

pipbutton.addeventlistener（ 'click'、async（）=> {
  if（document.pictureinpictureElement）{
    //既にPIPで終了します
    document.exitpictureinpicture（）;
  } それ以外 {
    // PIPを入力します
    await video.requestpictureinpicture（）;
  }
}）;

// PIPが利用できないときにボタンを無効にします
pipbutton.disabled =！document.pictureinpictureenabled;

これにより、現在のピップ状態を尊重するシンプルなトグルボタンが作成されます。

重要なメモと制限

• 必要なユーザージェスチャー：ページが読み込まれたときにピップを自動スタートすることはできません。
• 一度に1つのPIPウィンドウのみがPIPにある場合、現在のビデオ（またはアプリ）がPIPにある場合、現在のビデオが終了します。
• モバイルサポートは限られています。ほとんどのモバイルブラウザは、UIの制約のためにPIPをサポートしていません。
• すべてのビデオがPIPを入力できるわけではありません：DRM保護されたコンテンツまたはビデオがブロックされる場合があります。
• スタイリングの制限：PIPウィンドウはOS/ブラウザによって制御されるため、外観をカスタマイズすることはできません。

結論

Picture-in-Picture APIは、ビデオコンテンツでユーザーエクスペリエンスを強化するための強力でシンプルなツールです。ユーザーが閲覧中にビデオを表示するようにすることで、特にチュートリアル、ビデオ、またはライブストリームの便利さを追加します。

思慮深く使用してください：明確なコントロールを提供し、ユーザーの意図を尊重し、常にサポートを確認してください。ブラウザの採用が拡大すると、PIPは最新のWebビデオの標準機能になりつつあります。

基本的に、それは魔法ではありません。マルチタスクをはるかにスムーズにする小さなAPIだけです。

以上がビデオの絵の絵のAPIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。