执行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）

回答

相关问题