有人能帮我的图片在图片为一个HTML5播放器在Safari？

Question

有人能告诉我如何解决这个问题吗？我为一个HTML5播放器添加了它，并从苹果网站上提取了代码，但它对我不起作用。它给了我一个错误，说：

 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脚本标记中。

更新：i替换：

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

只有：

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

在jQuery就绪之后，错误就消失了，但仍然无法工作。我在if和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
            }

到目前为止，我从未试过这个PiP。苹果是否在新的Safari中删除了这个功能？似乎所有的html5视频我已经在全屏旁边有了这个选项。但是对于一个定制的HTML5播放器来说不是很好，这就是为什么我想将这个函数添加到一个按钮中。

Answer 1

为什么会出错？

document.getElementById返回一个DOM对象，而jQuery对象(由$方法创建)是DOM元素或一组DOM的包装器。你可以在这里阅读详细的解释。

这意味着，如果您想使用jQuery，您需要更改：

var video = $( "video" );

至

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