1

YouTube プレイリストがあります。すべてがうまくいっています。コードは次のとおりです。

<div id="player"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            width: '100%',
            height: window.innerHeight-120+'px',
            vq: 'hd720',
            videoId: 'ZnToyoZus74',
            playerVars: {
                'autoplay': 1,
                'loop': 1,
                'showinfo': 0,
                'controls': 0,
                'playlist': [
                    'Glr36uh7Uls,Mx-cOLPqieg,C9uA-LFJS3Q,mKB4j3Lqa3w,tLmLXEShHT8'
                ]
            }
        });
    }
</script>

ただし、現在再生中のビデオに関連するカスタマイズされた情報をそのすぐ下に表示したい (分離されている<div>が、ビデオをオーバーレイしていない)。ビデオが開始<div>されると、最初のビデオの情報を含む が表示され、ビデオが終了すると、この div は消えます。2 番目の動画の再生が開始されるとすぐに、2 番目の動画<div>の情報を含む別の動画が表示されます。

要素には、ビデオの をファイル名として使用<div>する HTML ファイルが含まれます。idZnToyoZus74.html

この例では、次の ID を使用しています。

  • ZnToyoZus74
  • Glr36uh7Uls
  • Mx-cOLPqieg
  • C9uA-LFJS3Q
  • mKB4j3Lqa3w
  • tLmLXEShHT8
4

1 に答える 1

0

解決しました！

誰かが同じ答えを探している場合に備えて、これが最終的なコードです。

<div id="player" style="float:right;"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
    width: '100%',
    height: window.innerHeight-110+'px',
    vq: 'hd720',
    videoId: 'K7XbJ0XLXPY',
    playerVars: { 'autoplay': 1, 'loop': 1, 'showinfo': 0, 'controls': 0, 'playlist':['UiUZOo1b6m0,w0Sm9tRJDDA']},
    events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        if (evt.data == YT.PlayerState.PLAYING) {
            var url = evt.target.getVideoUrl();
            var match = url.match(/[?&]v=([^&]+)/);
            var videoId = match[1];

            document.getElementById("myiframe").src='videosinfo/'+videoId+'.html';
        }
    }
</script>
<iframe  name="myiframe" id="myiframe" width="100%" height="200px" allowtransparency=true frameborder="0" ></iframe>
于 2013-05-01T14:40:47.183 に答える