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/

YouTubeプレーヤーの上にカバーdivを配置すると、マウスアクションがプレーヤーに表示されるのを防ぎます。これは私の 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で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 に答える