嵌入带有侧列表托盘的 youtube 播放列表

Posted 2023-02-24

【中文标题】嵌入带有侧列表托盘的 youtube 播放列表

【英文标题】：Embed youtube playlist with side list tray

【发布时间】：2013-02-09 23:40:41

【问题描述】：

我一直在使用 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>

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

非常感谢大家的帮助:)

【问题讨论】：

我认为这会对您有所帮助：tcuttrissweb.wordpress.com/2012/02/17/… 您可以查看 Simone Gianni 的原始代码或 Cuttriss 所做的修改，两者都可以在上面 URL 中引用的 jsfiddle.net 上找到。

这是很久以前的事了，我做的是偷youtube的css做边试，用API取回播放列表...平安无事：3

在哪里可以找到用于显示此列表的 youtube css？

我试图让嵌入式播放器显示为 OP 发布的最后一张图片

只需转到检查元素，然后搜索处理侧面尝试的 youtube 的 css 文件。然后将此文件复制粘贴到您的文件中。这是一个讨厌的把戏，但它有效。如果有人发现 xD 可能会给我们带来麻烦

【参考方案1】：

您可以使用 youtube 嵌入播放器的 Flash 版本来实现该外观。然而，托盘现在位于左侧。

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

【讨论】：

一些最新版本的 navigator 不支持 flash。

@AmineHADDAD 并不是不支持，默认情况下它是禁用的，并且会在需要时请求运行 flash 的权限。此外，出于上述原因，我建议不要使用此答案。如果没有其他方法，则没有其他方法，但只要有，请通过 Flash IMO 使用。 （没有冒犯这个答案的发布者，这只是前进的方向:)）