web-dev-qa-db-ja.com

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

ピクチャーインピクチャー（PiP）を備えたSafariHTML5カスタムビデオコントローラー

WWDC15AppleでSafari9（Safari 10 for MacOS）、Picture inPictureがサポートされるようになりました。

enter image description here

しかし、彼らはただこう言います：

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

しかし、そのドキュメントをどこでどのように見つけるかは教えていません。

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

javascriptsafarihtml5-videopicture-in-picturesafari10
10
TheCrazyProfessor

まず、ピクチャーインピクチャーをChromeで作成する場合は、 このリンクを参照

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

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

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

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

ボタンに機能を追加する

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

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

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;
 }

資源

動作中。

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

// return false if it is a computer OS
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i) || false;

if (isMobile[0] == 'iPad' || isMobile == false) {
    // 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;
    }
} 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>
12
TheCrazyProfessor