将youtube播放列表与侧面列表托盘嵌入

时间:2013-02-24 21:02:23

标签: youtube embed playlist tray

我一直在使用javascript播放youtube嵌入播放列表功能。

到目前为止,当我嵌入播放列表时,它看起来像这样:

http://postimage.org/image/vk6fv56yx/

蓝色圆圈显示播放列表中的项目数量,点击缩略图时显示。

当视频开始播放时,必须单击播放列表按钮才能显示列表,如下所示:

http://postimage.org/image/ezzxpy7pn/

但我希望播放器能够在youtube页面上显示,就像这样:

http://postimage.org/image/4suta8kuh/

现在这是我使用的代码:

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
        height: '390',
        width: '640',
        videoId: 'n2ISkJZC6DI',
        playerVars: {
                  listType:'playlist',
                  list: 'PL546E6163151751EE'
                },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
  }

  function onPlayerReady(){
    alert('player ready');
  }

  function onPlayerStateChange(){
    alert('player changed');
  }

</script>

效果很好!但我想知道是否有办法改变播放列表托盘的视图。

非常感谢你们的帮助:)

1 个答案:

答案 0 :(得分:0)

你可以使用youtube embed播放器的flash版本来实现这种外观。但是托盘现在位于左侧。

Youtube playlist flash player

&#13;
&#13;
<iframe width='500' height='294' src="https://www.youtube.com/v/videoseries?list=PL546E6163151751EE"></iframe>
&#13;
&#13;
&#13;