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

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

---

这在桌面上是完全可行的，因为您可以使用YouTube JavaScript API触发嵌入式播放，但在iOS上，程序触发播放器播放被阻止。那么我如何在iOS上做到这一点呢？

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

事实证明，有一种方法可以做到这一点，使用奇特的（非官方）CSS

指针事件

属性！将此项设置为

none

意味着单击不会注册，而是直接穿过元素到达元素后面的任何位置。在本例中，YouTube将嵌入iframe。支持iOS 6+

这是一个有效的例子

注意这是针对iOS（可能还有Android）——它利用了视频开始播放时自动全屏显示的行为。如果您在桌面上观看，则覆盖仍会保留。。覆盖的

施密克，这件衣服还需要进一步打磨：

• 处理最初的点击并改变用户界面，以便他们立即知道视频开始了。也许隐藏覆盖层，使其褪色，或者将其更改为仅表示“正在加载…”
• 完成后，通过重新创建iframe重置视频

你可以用这种技术做一些棘手的事情，例如，让一个小播放器的iframe被一个小按钮覆盖。还是会全屏播放，所以会很好

---

但不管怎样，这就是在iOS上播放YouTube视频的概念证明，用户不知道他们点击了嵌入。

iOS允许调用

HTMLMEDIALEMENT。仅从用户事件（例如，从“单击”事件处理程序）发送（触发）播放
函数。
因此，这样的代码将在iOS中工作（因为
player.playVideo
是从用户发送的“单击”事件调用的）：

但是这样的代码在iOS中不起作用（因为
播放器.playVideo
是从
https://www.youtube.com/iframe_api
脚本，而不是来自“单击”事件；即，只有
窗口。onyoutubeiframeapiredy
函数声明显示在“单击”中事件和
窗口。从
https://www.youtube.com/iframe_api
script）：


（功能（）{
document.querySelector（'.video.play'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）
window.onYouTubeIframeAPIReady=函数（）{
新的YT.Player（document.querySelector（'.video-iframe'）{
活动：{
onReady：函数（e）{
var player=e.target
player.playVideo（）
}
}
})
}
var tag=document.createElement（'脚本'）
tag.src=https://www.youtube.com/iframe_api'
var firstScriptTag=document.getElementsByTagName（'script'）[0]
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）
})
})()
不幸的是，您无法处理最初的单击，因为
指针事件的全部要点：无
是单击直接通过。你可以处理所有youtube事件，但根据我的经验，它几乎在第一个事件发生时就开始播放。此外，当调用“onready”事件处理程序时，您可能希望在播放按钮中淡入淡出状态，以便人们在加载视频之前不会尝试单击。这种方法在台式机和移动设备上的另一个优点是，您的视图计数将增加，这不适用于自动播放和API调用。因此，iOS 10现在允许使用
playsinline:1
初始化属性进行内联播放，因此在这种情况下，您需要在视频开始播放时隐藏覆盖
<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>

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

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