如何通过单击播放按钮而不是嵌入来触发 YouTube 视频在 iOS 上的浏览​​器中播放？

Question

在我的网站上，我想让用户在不离开页面的情况下观看嵌入的 YouTube 视频，但我不希望在点击之前看到不太风格化的 YouTube 嵌入。

这在桌面设备上完全可行，因为您可以使用 YouTube JavaScript API 触发嵌入播放，但在 iOS 上，播放器的程序化触发播放被封锁。那么如何在 iOS 上执行此操作？

Answer 1

在考虑这个问题时，我认为另一种方法是创建一个不透明的样式层，但您可以单击它。这意味着用户认为他们正在点击一个漂亮的按钮，而实际上他们只是点击嵌入来播放。

原来有一种方法可以做到这一点，使用花哨的（非官方）CSS pointer-events 属性！将此设置为 none 意味着点击不注册，而是直接穿过元素到达它后面的任何地方。在这种情况下，YouTube 嵌入了 iframe。支持是 iOS 6+.

这是一个 JSFiddle 的工作。

请注意，这是针对 iOS（也可能是 Android）的 - 它利用视频开始播放时自动全屏显示的行为。如果您在桌面上观看此内容，叠加层将保持......覆盖。

为了让它更漂亮，还需要进一步完善：

• 处理初始点击并更改 UI，以便他们立即知道视频开始播放。也许隐藏叠加层、淡化它或将其更改为简单地表示 "Loading... "
• 完成后，通过重新创建 iframe 来重置视频

你可以用这种技术做一些棘手的事情，例如有一个由小按钮覆盖的小播放器 iframe。仍然会全屏显示，所以它会正常工作。

但不管怎样，你去吧 - 在 iOS 上播放 YouTube 视频的概念证明，而用户不知道他们点击了嵌入。

Answer 2

iOS 只允许调用 HTMLMediaElement.play 函数，仅由用户事件（例如，从“点击”事件处理程序）调度（触发）。 因此，这样的代码将在 iOS 中工作（因为 player.playVideo 是从用户“点击”事件调度的调用）：

<div class="video">
    <a href="#" class="play">Play</a>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pqLVAeoRavo?enablejsapi=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
</div>

<script>
(function() {
    var player;
    window.onYouTubeIframeAPIReady = function() {
        new YT.Player(document.querySelector('.video iframe'), {
            events: {
                onReady: function(e) {
                    player = e.target
                }
            }
        })
    }

    document.querySelector('.video .play').addEventListener('click', function(e) {
        e.preventDefault()
        player.playVideo()
    })
})()
</script>
<script src="https://www.youtube.com/iframe_api"></script>

这样的代码也适用于 iOS（因为初始调用 (playMyVideo()) 仍在“点击”事件中）：

<div class="video">
    <a href="#" class="play">Play</a>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pqLVAeoRavo?enablejsapi=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
</div>

<script>
(function() {
    var playMyVideo;
    window.onYouTubeIframeAPIReady = function() {
        new YT.Player(document.querySelector('.video iframe'), {
            events: {
                onReady: function(e) {
                    playMyVideo = function() {
                        var player = e.target
                        player.playVideo()
                    }
                }
            }
        })
    }

    document.querySelector('.video .play').addEventListener('click', function(e) {
        e.preventDefault()
        playMyVideo()
    })
})()
</script>
<script src="https://www.youtube.com/iframe_api"></script>

但是这样的代码在 iOS 中不起作用（因为 player.playVideo 是从 https://www.youtube.com/iframe_api 脚本而不是从“点击”事件；即只有 window.onYouTubeIframeAPIReady 函数声明出现在“点击”事件中，window.onYouTubeIframeAPIReady 从 https://www.youtube.com/iframe_api 脚本调用：

<div class="video">
    <a href="#" class="play">Play</a>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pqLVAeoRavo?enablejsapi=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
</div>

<script>
(function() {
    document.querySelector('.video .play').addEventListener('click', function(e) {
        e.preventDefault()

        window.onYouTubeIframeAPIReady = function() {
            new YT.Player(document.querySelector('.video iframe'), {
                events: {
                    onReady: function(e) {
                        var player = e.target
                        player.playVideo()
                    }
                }
            })
        }

        var tag = document.createElement('script')
        tag.src = 'https://www.youtube.com/iframe_api'
        var firstScriptTag = document.getElementsByTagName('script')[0]
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
    })
})()
</script>