-1

-ページに多くのビデオをロードしたいが、派手なことは何もない
-ビデオ ID はデータベースに保存されている -> $slide['message'] -1
つのビデオだけをロードすることができる。他は空白
です - ループ内で、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
}
4

2 に答える 2

0

このコード ブロック全体がループ内にある場合は、ループ自体が原因で失敗しています。挿入する動画が 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

etc. etc. etc. 私のコードが有効でないことを認識していることに注意してください。代わりに、ループは onYouTubePlayerAPIReady 内にある必要があり、動画ごとに個別のプレーヤー オブジェクトを作成する必要があることを指摘しているだけです。（そうする必要はありません... APIの他の側面を活用する別の戦略を採用できます...しかし、これはあなたが持っているものを考えると最も簡単です。）上記のコメント投稿者が指摘したように、コードを jsfiddle することで、人々はコードを微調整してこのアプローチを実践するのをはるかに簡単に支援できます。

于 2012-12-17T04:01:34.100 に答える
0

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...
于 2012-12-18T00:52:24.307 に答える