ピクチャーインピクチャーWeb APIの紹介

2016年、Safari BrowserはMacos Sierraでリリースされ、初めてPicture-in Picture機能を紹介しました。この機能により、ユーザーはビデオを常に他のウィンドウの上にある小さなフローティングウィンドウにポップアップでき、ユーザーは他の操作を実行しながらビデオを視聴し続けることができます。このアイデアはテレビに由来します。たとえば、ユーザーはプログラムリストやその他のチャネルを閲覧しながら、人気のあるスポーツイベントを視聴し続けることをお勧めします。

その後まもなく、Android 8.0がリリースされ、ネイティブAPIを介して絵の絵の絵の関数をサポートしました。この機能はChromeデスクトップバージョンではまだサポートされていませんが、AndroidのChromeはこのAPIを介してPicture-in-Pictureモードでビデオを再生できます。

これにより、標準的なピクチャーインピクチャーWeb APIの開発が促され、Webサイトがこの動作を開始および制御できるようになりました。

執筆時点では、Chrome（バージョン70以上）とEdge（バージョン76以降）のみがこの機能をサポートしています。 Firefox、Safari、およびOperaはすべて、独自のAPIを使用して機能を実装しています。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、このバージョンでブラウザがこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

ピクチャーインピクチャAPIの使用方法

Webページにビデオを追加することから始めましょう。

<video controls="" src="video.mp4"></video>

Chromeには、ピクチャーインピクチャーモードを入力および終了するためのトグルボタンが既にあります。

Firefoxの実装をテストするには、最初にmedia.videocontrols.picture-in-picture.edabledフラグをAbout：config in bideoで右クリックして、画像inpictureオプションを見つける必要があります。

これは機能しますが、多くの場合、ビデオコントロールをブラウザ全体で一貫していることを望み、どのビデオが絵の絵のモードになり、どのビデオができないかを制御することをお勧めします。

Picture-in-Picture Web APIを使用して、ブラウザのデフォルトメソッドを置き換えて、独自の方法でPicture-in-Pictureモードを入力できます。たとえば、ボタンを追加してクリックして有効にしましょう。

<button id="pipButton" class="hidden" disabled>ピクチャーインピクチャーモードを入力します</button>

次に、JavaScriptのビデオとボタンを選択します。

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

デフォルトでは、表示する前にユーザーのブラウザでピクチャーインピクチャAPIがサポートされ、有効になっているかどうかを知る必要があるため、ボタンは非表示になります。これは、この機能をサポートしていないブラウザでの破損した体験を避けるのに役立つ進歩的な強化形式です。

APIがサポートされているかどうかを確認し、次のようにボタンを有効にすることができます。

 if（ 'pictureinpictureEnabled' in document）{
  pipbutton.classlist.remove（ 'hidden'）
  pipbutton.disabled = false;
}

ピクチャーインピクチャーモードを入力します

JavaScriptがブラウザがピクチャーインピクチャーサポートを有効にしていると判断したと仮定します。 #PipButtonでボタンをクリックするときは、ビデオ要素のRequestPictureInPicture（）を呼び出します。このメソッドは、デフォルトでは、解析するときに、ユーザーが移動できるにもかかわらず、画面の右下隅にあるミニウィンドウにビデオを配置するという約束を返します。

 if（ 'pictureinpictureEnabled' in document）{
  pipbutton.classlist.remove（ 'hidden'）
  pipbutton.disabled = false;

  pipbutton.addeventlistener（ 'click'、（）=> {
    video.RequestPictureInPicture（）;
  }）;
}

RequestPictureInPicture（）が約束を返すため、上記のコードを保持することはできません。たとえば、ビデオメタデータがロードされていないか、VideoにdisablePictureinPictureプロパティが存在する場合、約束が拒否される可能性があります。

この潜在的なエラーをキャッチするためにキャッチブロックを追加し、ユーザーに何が起こっているのかを知らせましょう。

 pipbutton.addeventlistener（ 'click'、（）=> {
  ビデオ
    .requestpictureinpicture（）
    .catch（error => {
      //エラー処理}）;
}）;

ピクチャーインピクチャーモードを終了します

ブラウザは、ピクチャーインピクチャーウィンドウに近いボタンを非常に提供します。これをクリックしてウィンドウを閉じることができます。ただし、ピクチャーインピクチャーモードを終了する別の方法も提供することもできます。たとえば、#pipbuttonをクリックすると、アクティブな絵の絵の視聴ウィンドウを閉じることができます。

 pipbutton.addeventlistener（ 'click'、（）=> {
  if（document.pictureinpictureElement）{
    書類
      .exitpictureinpicture（）
      .catch（error => {
      //エラー処理}）
  } それ以外 {
    //写真の写真をリクエスト}
}）;

写真の絵を閉じたいと思うかもしれない別の状況は、ビデオがフルスクリーンモードに入るときです。 Chromeは、コードを書くことなく、すでにこれを自動的に行います。

ピクチャーインピクチャーイベント

ブラウザを使用すると、ビデオがP-in-Pictureモードに入るか、離れるときに検出できます。 P-Pモードには入力または出口の多くの方法があるため、メディアコントロールを更新するためにイベント検出に頼ることが最善です。

これらのイベントは、名前が示すように、enterpictureinpictureとleavepictureinpictureです。これは、ビデオがそれぞれピクチャインモードに入ったり出たりすると発射されます。

この例では、ビデオが現在P-Pモードであるかどうかに基づいて#PipButtonタグを更新する必要があります。

これが私たちがこれを達成するのに役立つコードです：

 video.addeventlistener（ 'enterpictureinpicture'、（）=> {
  pipbutton.textcontent = 'exit picture-in-pictureモード';
}）;

video.addeventlistener（ 'reveadpictureinpicture'、（）=> {
  pipbutton.textContent = 'Picture-in-Pictureモードを入力';
}）;

これがデモンストレーションです：

ピクチャーインピクチャウィンドウをカスタマイズします

ブラウザは、ビデオがMediaStreamオブジェクト（カメラ、ビデオ録画デバイス、スクリーン共有サービス、その他のハードウェアソースなどの仮想ビデオソースによって生成された）を再生している場合を除き、デフォルトでピクチャインピクチャウィンドウに再生/一時停止ボタンを表示します。

また、コントロールを追加して、ピクチャーインピクチャーウィンドウから前または次のトラックに直接移動することもできます。

 navigator.mediasession.setActionHandler（ '前track'、（）=> {
  //前のトラックに移動}）;

navigator.mediasession.setActionHandler（ 'NextTrack'、（）=> {
  //次のトラックに移動}）;

ピクチャーインピクチャーウィンドウにWebCamフィードを表示します

ビデオ会議のWebアプリケーションは、ユーザーがアプリケーションやその他のブラウザタブまたはWindowsを切り替えると、ピクチャーインピクチャモードにWebカメラフィードを配置することで利益を得ることができます。

これが例です：

ビデオで絵の絵を無効にします

写真ウィンドウの写真にビデオをポップアップさせたくない場合は、以下に示すように、disabledpictureinpictureプロパティを追加できます。

<video controls="" disablepictureinpicture="" src="video.mp4"></video>

要約します

とりあえず、今すぐピクチャーインピクチャーWeb APIについて知っておく必要があるのはそれだけです！現在、APIはサポートしています<video></video>要素ですが、他の要素にも拡張することを目的としています。

ブラウザのサポートはギザギザになりましたが、ウェブサイトのビデオエクスペリエンスを徐々に強化する方法として使用できます。

さらに読む

• ピクチャーインピクチャーAPI仕様
• 絵の写真を使用してビデオをご覧ください
• ピクチャーインピクチャの例（GithubのGoogleChrome）

出力は、元の画像とその形式を維持します。テキストは、元の意味を保持しながら、流れと明確さを改善するために言い換えられ、再編成されています。技術用語は一貫しています。

以上がピクチャーインピクチャーWeb APIの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。