YouTube API 动态加载视频答案

【问题标题】：YouTube API dynamically loading videosYouTube API 动态加载视频
【发布时间】：2012-12-16 18:35:29
【问题描述】：

-我想在一个页面上加载很多视频，没什么特别的
- 视频 ID 存储在数据库中 -> $slide['message']
- 我可以让它只加载一个视频。其他都是空白
- 它在一个循环中，当 kind == youtube 时，它会尝试将视频放入。

if($slide['kind'] == 'youtube'){
?>
<li>
<div class="info<?php echo $count+1; ?>">
<h1><?php echo $slide['title']; ?></h1>
<div id="ytplayer<?php echo $count+1; ?>" class="youTube-viewer"></div>
<script>
var video = '<?php echo $slide['message']; ?>';
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<?php echo $count+1; ?>', {
height: '365',
width: '648',
videoId: video,
playerVars: {
'rel': 0,
'enablejsapi': 1,
}
});
}
</script>
<h2><?php echo $slide['name']; ?></h2>  
</div>
</li>
<?php
}

【问题讨论】：

该代码很难理解。有什么办法可以把它塞进一个 jsFiddle 并重现你的问题给我们所有人看？

标签： php javascript mysql youtube-api

【解决方案1】：

如果整个代码块处于循环中，那么它会因为循环本身而失败。假设您有 4 个要插入的视频……因为您用于加载 YT API javascript 库的代码在循环内，您最终将加载 4 次。而且因为您的回调函数在循环内，您最终将定义它 4 次，每次都覆盖先前的定义以及覆盖引用视频的对象。由于您的回调函数引用了视频，因此只有列表中的最后一个视频具有持续存在的回调函数，所以我的猜测是插入的视频。

tl;dr -- 问题不在于 API，而在于编程结构。

也许你可以像这样重新组织你的代码：

 // DON'T START YOUR LOOP YET
    <script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    function onYouTubePlayerAPIReady() {
    // START YOUR LOOP HERE
<?php
if($slide['kind'] == 'youtube'){
?>
        var player<?php echo $count+1 ?>;
    var video = '<?php echo $slide['message']; ?>';
    player<?php echo $count+1 ?> = new YT.Player('ytplayer<?php echo $count+1; ?>', {
    height: '365',
    width: '648',
    videoId: video,
    playerVars: {
    'rel': 0,
    'enablejsapi': 1,
    }
    }); // CODE CONTINUES ON FROM HERE, EVENTUALLY ENDING THE LOOP, PUTTING IN THE HTML

等等。等等。请注意，我承认我的代码无效；相反，我只是指出您的循环应该在 onYouTubePlayerAPIReady 内，并且您需要为每个视频创建一个单独的播放器对象。（嗯，你不需要......你可以采用不同的策略来利用 API 的其他方面......但考虑到你所拥有的，这是最简单的。）正如上面的评论者指出的那样，如果你创建一个jsfiddle 与您的代码，人们可以更容易地帮助您微调它以将这种方法付诸实践。

【讨论】：

感谢您的评论，今天是我第一次听说 jsFiddle，我一定会抽空去看看，它看起来是一个非常有用的工具。您的见解很有帮助。

【解决方案2】：

使用 jlmcdonald 给我的提示，我得到了它的工作，请参阅下面的小提琴链接 http://jsfiddle.net/AaGvt/

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

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '250',
    width: '500',
    videoId: 'u1zgFlCw8Aw',
    events: {}
  });

  player = new YT.Player('player2', {
    height: '250',
    width: '500',
    videoId: 'u1zgFlCw8Aw',
    events: {}
  });

  player = new YT.Player('player3', {
    height: '250',
    width: '500',
    videoId: 'u1zgFlCw8Aw',
    events: {}
  });

}

</script>

<div id="player"></div>
<div id="player2"></div>
<div id="player3"></div>

通过 SQL 请求和循环，您可以构建 div

<div id="player"></div>
etc...

并创建所需的javascript

  player = new YT.Player('player', {
    height: '250',
    width: '500',
    videoId: 'u1zgFlCw8Aw',
    events: {}
  });
etc...

【讨论】：