如何将 api YouTube 连接到 owl 滑块 2？答案

【问题标题】：How to connect api YouTube to owl slider 2?如何将 api YouTube 连接到 owl 滑块 2？
【发布时间】：2017-04-04 08:09:55
【问题描述】：

使用猫头鹰滑块 2

无法删除滑块中视频 YouTube 的声音。

对于 owl-slider 中的 iframe 视频，为 api youtube 注册 &enablejsapi = 1

'<iframe id="ytplayer" type="text/html" width="' + g + '" height="' + h + '" src="//www.youtube.com/embed/' + f.id + "?autoplay=1&enablejsapi=1&v=" + f.id + '" frameborder="0" allowfullscreen></iframe>'

代码 api YouTube

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

    function onYouTubePlayerAPIReady() {
      player = new YT.Player('ytplayer', {
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'loop': 1
        },
        //videoId: 'EqK6x4seeOA',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerReady(event) {
      event.target.setVolume(0);
      event.target.playVideo();
    }
    var doneY = false;

    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING && !doneY) {
        doneY = true;
      }
      event.target.setVolume(0);
    }

汇编代码 Code Slider owl 2 + api video YouTube

但是api没有连接到滑块，告诉我可能是什么问题。

谢谢

【问题讨论】：

标签： javascript jquery youtube-api owl-carousel-2

【解决方案1】：

您正在混合两组玩家。

iFrame embed 是独立的，但使用 enablejsapi=1 意味着您可以使用 JavaScript 定位它。

您拥有的第二个代码块是一个构造函数，它将为您动态创建一个 iFrame，而无需设置 enablejsapi=1，因为它是自动设置的。但如果你愿意，你可以推断。

这是你应该拥有（或需要使用）的。

<!-- 1. The <div> tag will contain the <iframe> (and video player) -->
            <div id="ytplayer"></div>
            <script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var ytplayer;
  function onYouTubePlayerAPIReady() {
    ytplayer = new YT.Player('ytplayer', {       
      height: '385',
      width: '640',
      videoId: '<?php echo $videoID2 ?>',
  playerVars: {listType:'playlist', list: '', 'wmode': 'opaque', 'controls': 1 , 'enablejsapi': 1 , 'origin': 'http://www.yoursite.com', 'autohide': 1 , 'frameborder': 1  },
      events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange,
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
// event.target.setVolume(100);
// event.target.playVideo();

        event.ytplayer.cueVideoById(id, startSeconds);
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      done = true;
    }   
  }

</script>

【讨论】：