Question

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

这在桌面上完全可行，因为您可以使用YouTube JavaScript API触发嵌入播放，但在iOS上，阻止了播放播放器的编程触发。那我怎么能在iOS上做到这一点？

Answer 1

在考虑这个问题时，我认为一个替代路线是拥有一个不透明和样式的图层，但你可以点击它。这意味着用户认为他们点击了一个漂亮的按钮，实际上他们只是点击嵌入进行播放。

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

这是JSFiddle的工作原理。

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

要做到这一点还需要做更多的抛光才能让它变得更好：

处理初始点击并更改用户界面，以便他们立即知道视频开始播放。也许隐藏叠加，淡化或更改它以简单地表示“正在加载......”
完成后，通过重新创建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 脚本而不是从“click”事件中调用的；即只有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>

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

2 个答案: