19

YouTube の API を使用して複数のビデオを読み込む必要があります。初めて使用するので、何が間違っているのかわかりませんが、これは私が試していることです：

  var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      videoId: 'hdy78ehsjdi'
    });
    player2 = new YT.Player('player', {
      videoId: '81hdjskilct'
    });
  }
4

8 に答える 8

30

関数は一度だけ呼び出されることになっているためonYouTubeIframeAPIReady、次のアプローチを使用できます。

  • 動画プレーヤー情報 ( ControlId,width,height,VideoId) を初期化して配列に保存する

  • 関数を呼び出しonYouTubeIframeAPIReadyてすべてのビデオ プレーヤーを作成する

例

var playerInfoList = [{id:'player',height:'390',width:'640',videoId:'M7lc1UVf-VE'},{id:'player1',height:'390',width:'640',videoId:'M7lc1UVf-VE'}];

      function onYouTubeIframeAPIReady() {
        if(typeof playerInfoList === 'undefined')
           return; 

        for(var i = 0; i < playerInfoList.length;i++) {
          var curplayer = createPlayer(playerInfoList[i]);
        }   
      }
      function createPlayer(playerInfo) {
          return new YT.Player(playerInfo.id, {
             height: playerInfo.height,
             width: playerInfo.width,
             videoId: playerInfo.videoId
          });
      }
于 2013-09-21T19:37:46.253 に答える
24

新しい YT.Player の最初のパラメーターは、ビデオの iframe に置き換える HTML 要素 (DIV の場合) の ID である必要があります。これらのオブジェクトの両方に「player」を使用すると、両方を同じ要素にロードします。

<div id="ytplayer1"></div>
<div id="ytplayer2"></div>

<script>
  var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer1', {
      height: '390',
      width: '640',
      videoId: 'hdy78ehsjdi'
    });
    player2 = new YT.Player('ytplayer2', {
      height: '390',
      width: '640',
      videoId: '81hdjskilct'
    });
  }
</script>

関数のパラメーターは、Youtube API ドキュメントで説明されています:
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player (編集: 右のリンクに変更)

于 2013-06-09T22:41:36.523 に答える
-2 
<script type="text/javascript">

    $(document).ready(function () {


        $(".youtube-player").each(function () {
            var playerid = $(this).attr("id");
            setTimeout(function () {
                onYouTubeIframeAPIReady2(playerid);
            }, 2000);
        });

    });

    function onYouTubeIframeAPIReady2(PlayerID) {

        var ctrlq = document.getElementById(PlayerID);
        console.log(ctrlq);
        var player = new YT.Player(PlayerID, {
            height: ctrlq.dataset.height,
            width: ctrlq.dataset.width,
            events: {
                'onReady': function (e) {
                    e.target.cueVideoById({
                        videoId: ctrlq.dataset.video,
                        startSeconds: ctrlq.dataset.startseconds,
                        endSeconds: ctrlq.dataset.endseconds
                    });
                }
            }
        });
    }
</script>
于 2021-08-12T12:07:16.433 に答える