2016-05-16 130 views
0

我正在使用以下腳本來播放YouTube視頻作爲引導模式,它在桌面版本上播放視頻,但在移動設備(例如iPhone和iPad)上播放視頻時無法播放。YouTube作爲桌面版本彈出播放,但不在移動設備上

YouTubeLoader.js

// Load & insert into DOM Youtube iframe_api 
var tag = document.createElement('script'); 

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

/* Create Player */ 
var player; 

function onYouTubeIframeAPIReady() { 

    console.log('Api Loaded'); 

} 

    $(".youtubeVideoLoader").each(function() { 
    // Set the BG image from the youtube ID 
    $(this).css('background-image', 'url(//i.ytimg.com/vi/' + this.id + '/hqdefault.jpg)'); 

     // Click the video div 
     $(document).delegate('#' + this.id, 'click', function() { 
     // Vemos le id del video 
     console.log(this.id); 

     // Create new instance of player 
     player = new YT.Player('videoModalContainer', { 
      videoId: this.id, 
      events: { 
      'onReady': OpenModal, 
      'onStateChange': console.log('Changed') 
      } 
     }); 

     // Show Modal 
     function OpenModal() { 
      $("#youtubeModal").modal({backdrop: "static"}); 
      // Set Highres 
      player.setPlaybackQuality('highres'); 
      // Play Video 
      player.playVideo(); 
     }; 
     });// /click 

    }); // /each video 

    // Add a Lisener to Modal CLose Button 
    $('#CloseModalButton').click(function(){ 
     console.log('Stop Preset'); 
     player.destroy(); 
     }); 

HTML

<div id="3WCMCeS7Na4" class="youtubeVideoLoader"> 
</div> 
    <!-- Modal Template --> 
    <div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-footer"> 
      <button id="CloseModalButton" type="button" class="btn btn-default" data-dismiss="modal">X</button> 
      </div> 
     <div class="modal-content"> 

      <div class="modal-body"> 
      <div id="videoModalContainer"> 

      </div> 
      </div> 

我與其他視頻嘗試過了,我面臨着同樣的問題,因爲我最初認爲這可能是一個視頻這是不是在玩,由於特權

回答

0

問題已解決,刪除以下兩行代碼。

//player.setPlaybackQuality('highres'); 
//player.playVideo(); 

由於Youtube已停止視頻的自動播放功能,因此無法在移動設備上播放。不知道它爲什麼在桌面版上工作...

相關問題