首页 > 解决方案 > youtube 视频播放按钮不适用于 youtube 嵌入式视频

问题描述

刚刚发现一个新问题,客户说播放按钮在 youtube 嵌入式视频上不起作用。它似乎只在手机上不起作用,我已经在 iphone 和 Sony 手机上测试过它,但在这两种手机上都不起作用,但在计算机上查看网站时起作用。

代码如下

<div class="item active" style="">
                        <!--<iframe width="100%" src="//www.youtube.com/embed/3a3kT55-fF0?enablejsapi=1&rel=0" frameborder="0" id="video" allowfullscreen></iframe>-->
    <iframe width="100%" src="//www.youtube.com/embed/3a3kT55-fF0?enablejsapi=1&rel=0&ps=docs&controls=1" frameborder="0" id="video" allowfullscreen></iframe>
                    <div class="carousel-caption">
            <h4 class=""></h4>
            <p class="">
                               </p>
                        </div>
    </div>

    <script>
    // Inject YouTube API script
   var tag = document.createElement('script');
   tag.src = "//www.youtube.com/player_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   var player;

   function onYouTubePlayerAPIReady() {
   // create the global player from the specific iframe (#video)
   player = new YT.Player('video', {
   events: {
  // call this function when player is ready to use
  'onReady': onPlayerReady,
  'onStateChange': onPlayerStateChange
   }
   });
   }

  function onPlayerStateChange(event) {

  if (event.data == YT.PlayerState.PLAYING) {

       $("#myCarousel").carousel('pause');
    }

  else if(event.data == YT.PlayerState.PAUSED){

          $("#myCarousel").carousel('cycle');
   }
   }

   function onPlayerReady(event) {

   // bind events
   $("#myCarousel").on('slide.bs.carousel', function (e){
   //alert($(e.relatedTarget).index();
   if($(e.relatedTarget).index()!=0 && YT.PlayerState.PLAYING){
   //alert('A new slide is about to be shown!');
   player.pauseVideo();
   }
   });

   }

   </script>

标签: youtubeyoutube-apiyoutube-javascript-apiyoutube-iframe-api

解决方案


推荐阅读