Может кто-нибудь помочь мне с изображением в картинке для проигрывателя HTML5 в Safari?

Question

Может кто-нибудь сказать мне, как исправить эту проблему, у меня есть с картинкой в ​​картинке?Я добавил его для проигрывателя HTML5 и взял код с сайта Apple, но он не работает для меня.Это дает мне сообщение об ошибке:

 TypeError: null is not an object (evaluating 'video.webkitSupportsPresentationMode')
(anonymous function)-jquery-3.min.js:2:31697

Код:

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

Я не был уверен, где разместить этот код.Я просто поместил его в тег сценария javascript в нижнем колонтитуле.

Обновлено: Я заменил:

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

просто:

var video = $( "video" );
var PiP = $( "#picture-in-picture" );

Внутри jQuery готов и ошибка исчезла, но все еще не работает.Я помещаю предупреждение в каждое из , если и else условие, и похоже, что оно даже не распознает функцию.

           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");
              });
                alert("works")
            } else {
              PiP.disabled = true;
                alert("no works") //<--- This is the alert I get
            }

я никогда не пробовалэтот пиП до сих пор.Может быть, Apple удалила эту функцию в новом Safari?Кажется, что у любого html5-видео, к которому я иду, эта опция уже рядом с полным экраном.Но это не будет хорошо для пользовательского проигрывателя HTML5, поэтому я хочу добавить эту функцию к кнопке.

Answer 1

Почему ошибка?

document.getElementById возвращает объект DOM, в то время как объект jQuery (созданный методом $) является оберткой вокруг элемента DOM или набора DOM.Вы можете прочитать подробное объяснение здесь .

Это означает, что если вы хотите использовать jQuery, вам нужно изменить:

var video = $( "video" );

на

var video = $( "video" )[0];

---

Просто подсказка

webkitSupportsPresentationMode возвращает true на iPhone и iPod, это может быть ошибкой в ​​Safari, но, поскольку iPhone и iPod не поддерживают PiP, я рекомендую добавить это вваш сценарий

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i)[0];

и затем проверьте наличие iPad перед запуском сценария

if (isMobile == 'iPad') {
    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");
        });
        alert("works")
    } else {
        PiP.disabled = true;
        alert("no works") //<--- This is the alert I get
    }
} else {
    PiP.disabled = true;
}

Source Safari Picture In Picture - пользовательский видеоконтроллер HTML5