執行JavaScript函數時，YouTube的視頻播放（使用YouTube API）

我用下面的代碼嵌入我的網頁上YouTube視頻：執行JavaScript函數時，YouTube的視頻播放（使用YouTube API）

<iframe width="400" height="300" id="newvid" src="http://www.youtube.com/embed/url?modestbranding=1&showinfo=0&feature=player_embedded&fs=0&iv_load_policy=3&rel=0" frameborder="0"></iframe>

我試圖使用YouTube API，因此JavaScript函數，一旦用戶執行正在播放的視頻，但下面的代碼不能正常工作，因爲我沒有看到任何警示點擊視頻時顯示：

<script src="https://www.youtube.com/iframe_api"></script> 
<script> 
     var player; 

     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('newvid', { 
      events: { 
      'onStateChange': function(event) { 
       if (event.data == YT.PlayerState.PLAYING) { 
        myFunction(); 
       } 
      } 
      } 
     }); 
     } 
</script> 

<script> 
function myFunction() { 
    alert("I am an alert box!"); 
} 
</script>

來源

2016-10-05 rockyraw

應當建立與一個div容器而不是選擇iFrame。（這可能無法在片段容器中正確運行，但請在您的代碼中嘗試）。

<div id="newvid"></div> 
 

 
<script src="https://www.youtube.com/iframe_api"></script> 
 
<script> 
 
     var player; 
 

 
     function onYouTubeIframeAPIReady() { 
 
     player = new YT.Player('newvid', { 
 
      height: '300', 
 
      width: '400', 
 
      videoId: 'SwxdBiazu8M', // Example video ID 
 
      events: { 
 
      'onStateChange': function(event) { 
 
       if (event.data == YT.PlayerState.PLAYING) { 
 
        myFunction(); 
 
       } 
 
      } 
 
      } 
 
     }); 
 
     } 
 
</script> 
 

 
<script> 
 
function myFunction() { 
 
    alert("I am an alert box!"); 
 
} 
 
</script>

來源

2016-10-05 15:22:45

感謝，它的工作原理，但如果這是唯一的方法，我想我必須相應地使用'playerVars'屬性來包含我使用的所有參數， – rockyraw

下面的代碼演示了使用執行JS functionenablejsapi在iframe -

<!doctype html> 
<html> 
<body> 
<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/YtF6p_w-cSc?autoplay=1&controls=0&enablejsapi=1" frameborder="0"></iframe> 

<script> 
    // Load the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_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',  
     events: { 
      'onStateChange': function(event) { 
       if (event.data == YT.PlayerState.PLAYING) { 
        myFunction(); 
       } 
      } 
      } 
    });   
    } 

    function myFunction() { 
    alert("I am an alert box!"); 
} 
</script> 
</body> 
</html>

這裏的JSFiddle

按照上面的代碼JS function將被調用一次的playerstate是PLAYING。希望這會幫助你，你也在尋找同樣的東西。另外，如果您有任何問題，請告訴我。

謝謝..！

來源

2016-10-06 06:25:43

執行JavaScript函數時，YouTube的視頻播放（使用YouTube API）

回答

相關問題