javascript - Safari Picture In Picture - カスタム HTML5 ビデオ コントローラー

Question

Picture In Picture (PiP) を使用した Safari HTML5 カスタム ビデオ コントローラー

WWDC15で、Apple は Safari 9 (MacOS 用の Safari 10) を導入し、Picture in Picture をサポートするようになりました。

しかし、彼らはただ言う：

カスタム HTML5 ビデオ コントロールを使用する場合は、JavaScript プレゼンテーション モード API を使用して Picture in Picture 機能を追加できます。

しかし、そのドキュメントを見つける方法や場所を教えていません。

デフォルトのビデオ コントローラーにはボタンがありますが、javascript でトリガーするにはどうすればよいですか?

Answer 1

まず、Chrome で Picture in Picture を作成する場合は、このリンクを参照してください。

---

マークアップにピクチャー イン ピクチャー要素を追加する

カスタム コントロールには、デフォルトで表示される新しいピクチャー イン ピクチャー ボタンのマークアップが含まれるようになりました。

リスト 1このマークアップは、ピクチャー イン ピクチャー ボタンを追加します

<video id="video" src="my-video.mp4"></video>
<div id="controls">
    <button id="pipButton">PiP</button>
</div>

ボタンに機能を追加する

プレゼンテーション モード API から webkitSetPresentationMode プロパティを使用して、Picture in Picture を切り替える関数を追加します。

リスト 2このコードは、クリック イベント リスナーを使用してピクチャー イン ピクチャーを切り替えます。

var video = document.getElementById('video');
var PiP = document.getElementById('pipButton');

// picture-in-picture
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
    // Toggle PiP when the user clicks the button.
    PiP.addEventListener("click", function(event) {
        video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
    });
 } else {
    PiP.disabled = true;
 }

---

リソース

• Javascript プレゼンテーション モード API
• developer.apple.com

---

行動中。

var video = document.getElementById('video');
var PiP = document.getElementById('picture-in-picture');

// picture-in-picture
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
    // Toggle PiP when the user clicks the button.
    PiP.addEventListener("click", function(event) {
            video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
    });
} else {
    PiP.disabled = true;
}

Only works in Safari 10+<br>

<video controls id="video" x-webkit-airplay="allow" width="320">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">     
</video>
    
<div class="controls">
  <button id="picture-in-picture">Picture in Picture</button>
</div>