0

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

将封面 div 放在 youtube 播放器上可以防止任何鼠标操作使它看起来像播放器。我认为这是由于我的 z-index 参数。但是，当将 'ytplayer' div 设置为 z-index 20 并将 'cover' div 设置为 10 时，仍然会发生这种情况。

4

3 回答 3

4

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

<script>
$(function(){
$('#ytplayer').hover(
function() {
    alert('hover');
},
function() {
  alert('hover out');
}
);
})
</script>
于 2013-06-21T10:03:03.033 回答
0

我在嵌入式 YouTube iframe 上遇到了同样的问题。在我的情况下（仅在 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绑定：

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

function bindYouTubeVideoMouseLeave(){
$(document).on("mouseleave", ".YoutubeIframe", function(e){
    alert(e.target.id);
 });
}
于 2013-12-29T12:30:17.847 回答
0

我通过在 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); };
于 2015-01-14T09:16:31.023 回答