Question

这个问题似乎是您得到了一个问题，而没有另一个问题。如果我使用Youtube Player API，则可以毫无问题地在鼠标/鼠标上播放视频。但是，如果您单击视频将其暂停，则会出现建议的视频覆盖。在这些情况下，我无法弄清楚如何清除此覆盖层。我可以在代码中设置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();
            });
   }

希望YouTube视频悬停播放但不暂停显示建议的视频

1 个答案: