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 将消失。一旦第二个视频开始播放，<div>就会显示包含第二个视频信息的不同内容。

这些<div>元素将包含一个 HTML 文件id，该文件使用视频的文件名作为文件名：ZnToyoZus74.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 回答