Question

我有一个嵌入式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>

JSFiddle：http://jsfiddle.net/TPTb9/

我还尝试创建一个覆盖播放器的div，但这似乎也不起作用。

JSFiddle：http://jsfiddle.net/FDt44/1/

在youtube播放器上覆盖div会阻止任何鼠标操作，使其显示在播放器上。我认为这是由于我的z-index参数。但是，当将'ytplayer'div设置为z-index 20并将'cover'div设置为10时，仍会出现这种情况。

Answer 1

请现在看看你的jsfiddle：http://jsfiddle.net/TPTb9/3/

<script>
$(function(){
$('#ytplayer').hover(
function() {
    alert('hover');
},
function() {
  alert('hover out');
}
);
})
</script>

Answer 2

我在嵌入式YouTube Iframe上遇到了与mouseenter相同的问题。在我的情况下（仅在Firefox中），iframe上的mouseenter事件仅被触发一次。也许这与焦点有关。

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

CSS：

.YoutubeIframe{
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
height: 157px;
width: 280px;

}

Javascript bind：

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

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

Answer 3

我通过在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嵌入式播放器上悬停或鼠标悬停

3 个答案: