希望youtube视频在悬停时播放，但也不要在暂停时显示建议的视频

Question

这个问题似乎是你得到了一个，但没有得到另一个。如果我使用Youtube Player API，我可以在mouseon/mouseout上播放视频，没有问题。但是，如果您单击视频暂停，则会显示建议的视频覆盖。我不知道在这种情况下如何去除这种覆盖。我可以在代码中设置rel: 0，以防止最后的覆盖，但不能在单击暂停时设置。

然而，让我们假设我放弃API，而只是使用iframe代码来嵌入视频。现在我可以去掉点击暂停时的覆盖，但我无法在mouseon/mouseout上播放/暂停视频。

我注定要做出选择吗？或者我也可以吃蛋糕吗？我在stackoverflow上看到的其他问题解决了其中一个问题，但不是同时解决这两个问题。

这是我的API代码：

<div id="playerPhipps" class="playerLocation"></div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('playerPhipps', {
videoId: 'iDf_QZBZBnw',
events: {
//'onReady': onPlayerReady,
//'onStateChange': onPlayerStateChange
},
playerVars: {
'controls':'1',
'showinfo':'0',
'playlist': 'iDf_QZBZBnw',
'loop':'1',
'modestbranding':'1',
'autohide':'1',
'rel': '0',
'ytp-pause-overlay': '0', //doesn't work
'ecver': '2' //doesn't work
}
});
//Hover play - works great!
$('.playerLocation').on('mouseover',function(){
var thisPlayer = $(this).attr('id');
switch(thisPlayer) {
case 'playerPhipps':
player1.playVideo();
break;
}
//player.playVideo();
});
$('.playerLocation').on('mouseout',function(){
//player.stopVideo();
var thisPlayer = $(this).attr('id');
switch(thisPlayer) {
case 'playerPhipps':
player1.stopVideo();
break;
}
});

如果我将Youtube视频直接嵌入页面，以下是我的代码：

<iframe class="playerLocation" src="https://www.youtube.com/embed/iDf_QZBZBnw?rel=0&amp;showinfo=0?ecver=2&modestbranding=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

现在一切都很好，但如何在悬停时播放/暂停？

编辑：我在YouTube Player API页面上看到了这个代码，但它似乎没有任何作用：

https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors

Answer 1

好吧，这就是你必须做的。

放入iframe。

<iframe id="playerLibrary" class="playerLocation" width="560" height="315" src="https://www.youtube.com/embed/YT2ZOD32lWw?rel=0&amp;showinfo=0&enablejsapi=1" playsinline enablejsapi="1" frameborder="0" allowfullscreen></iframe>

注：enablejsapi=1和enablejsapi="1"

这样写代码：

var player3;
$( document ).ready(function() {
//whatever you want here
});
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
player3 = new YT.Player('playerLibrary', {
events: {
'onReady': onPlayerReady,
//'onStateChange': onPlayerStateChange
},
playerVars: {
}
});
}
function onPlayerReady(event) {
$('.playerLocation').on('mouseover',function(){
player3.playVideo();
});
$('.playerLocation').on('mouseout',function(){
player3.stopVideo();
});
}