Javascript 在youtube嵌入式播放器上悬停或鼠标悬停_Javascript_Jquery_Youtube

Javascript 在youtube嵌入式播放器上悬停或鼠标悬停

javascript jquery youtube

Javascript 在youtube嵌入式播放器上悬停或鼠标悬停,javascript,jquery,youtube,Javascript,Jquery,Youtube,我有一个嵌入式youtube播放器，我想在用户将鼠标悬停在播放器上或离开播放器时触发一些操作。我似乎无法做到这一点 <script> // Load the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = docum

我有一个嵌入式youtube播放器，我想在用户将鼠标悬停在播放器上或离开播放器时触发一些操作。我似乎无法做到这一点

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
  $('#ytplayer').hover(
    function() {
        alert('hover');
    },
    function() {
      alert('hover out');
    }
   );
  $('#ytplayer').mouseover(
    function() {
      alert('mouseover');
    }
  )
</script>
<body>
<div id="ytplayer"></div>

</body>


//异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//用and替换“ytplayer”元素
//YouTube播放器的API代码下载后。
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'
});
}
$（'ytplayer'）。悬停(
函数（）{
警报（“悬停”）；
},
函数（）{
警惕（‘悬停’）；
}
);
$（'ytplayer'）。鼠标悬停(
函数（）{
警报（“鼠标悬停”）；
}
)

JSFiddle：

我还试图创造一个涵盖球员的div，但这似乎也不起作用

JSFiddle：

将cover div覆盖在youtube播放器上，可以防止任何鼠标操作使其看起来像是对播放器。我想这是因为我的z指数参数。但是，当将“ytplayer”div设置为z-index 20，将“cover”div设置为10时，仍然会出现这种情况。

请查看您的JSFIDLE：


$（函数（）{
$（'ytplayer'）。悬停(
函数（）{
警报（“悬停”）；
},
函数（）{
警惕（‘悬停’）；
}
);
})

现在请查看您的JSFIDLE：


$（函数（）{
$（'ytplayer'）。悬停(
函数（）{
警报（“悬停”）；
},
函数（）{
警惕（‘悬停’）；
}
);
})

我在嵌入式YouTube Iframe上也遇到过同样的问题。在我的例子中（仅在Firefox中），Iframe上的mouseenter事件只触发了一次。也许这和焦点有关

我通过在Iframe周围添加一个10px的小填充边框来解决这个问题。这样，鼠标在嵌入视频之前进入Iframe元素，事件始终激发

CSS:

}

Javascript绑定：

function bindYouTubeVideoMouseEnter(){
$(document).on("mouseenter", ".YoutubeIframe", function(e){
    alert(e.target.id);
 });
}

function bindYouTubeVideoMouseLeave(){
$(document).on("mouseleave", ".YoutubeIframe", function(e){
    alert(e.target.id);
 });
}

我在嵌入YouTube Iframe的mouseenter上也遇到过同样的问题。在我的例子中（仅在Firefox中），Iframe上的mouseenter事件只触发了一次。也许这和焦点有关

我通过在Iframe周围添加一个10px的小填充边框来解决这个问题。这样，鼠标在嵌入视频之前进入Iframe元素，事件始终激发

CSS:

}

Javascript绑定：

function bindYouTubeVideoMouseEnter(){
$(document).on("mouseenter", ".YoutubeIframe", function(e){
    alert(e.target.id);
 });
}

function bindYouTubeVideoMouseLeave(){
$(document).on("mouseleave", ".YoutubeIframe", function(e){
    alert(e.target.id);
 });
}

我通过在Youtube上创建div来解决这个问题

  function createMouseMoveCatcher(){
    mouseMoveCatcher = document.createElement('div');
    mouseMoveCatcher.className = 'uppod-mouse-move-catcher'
    CSS(mouseMoveCatcher, {
      display: 'none',
      'z-index': '103',
      position: 'absolute',
      top: '0px',
      left: '0px',
      width: '100%',
      height: '100%',
    });
    document.body.appendChild(mouseMoveCatcher);
  }

然后

document.body.onmousemove = function(){ console.log(1); };

我通过在Youtube上创建div来解决这个问题

  function createMouseMoveCatcher(){
    mouseMoveCatcher = document.createElement('div');
    mouseMoveCatcher.className = 'uppod-mouse-move-catcher'
    CSS(mouseMoveCatcher, {
      display: 'none',
      'z-index': '103',
      position: 'absolute',
      top: '0px',
      left: '0px',
      width: '100%',
      height: '100%',
    });
    document.body.appendChild(mouseMoveCatcher);
  }

然后

document.body.onmousemove = function(){ console.log(1); };

为什么这样做有效？我有一种预感，它可能与页面加载上youtube对象的时间和构建有关？据我所知，你没有调用document ready上的函数。这就像在文档中存在实际元素之前绑定函数。是的，这就是我的意思！非常感谢你！为什么这样做有效？我有一种预感，它可能与页面加载上youtube对象的时间和构建有关？据我所知，你没有调用document ready上的函数。这就像在文档中存在实际元素之前绑定函数。是的，这就是我的意思！非常感谢你！