动态更改Youtube Iframe播放器变量

Changing Youtube Iframe playerVars dynamically

本文关键字：播放器 变量 Iframe Youtube 动态      更新时间：2023-09-26

我有一个使用Youtube Iframe API的网页，我使用以下代码行更改了视频ID：

player.loadVideoById(videoId)

但为了让视频循环，videoId和播放列表必须匹配，因此我还需要更改playerVars对象内的播放列表参数。有人能告诉我一个简单的方法吗？

这是原始代码：

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: { 
    'loop' : 1,
    'playlist': 'M7lc1UVf-VE'
    },
events: {
  'onReady': onPlayerReady,
  'onStateChange': onPlayerStateChange
    }
 });
}

我尝试设置如下所示的变量，并在加载VideoById:时动态更改它

player.loadVideoById(videoId) 
currentVideoId = videoId

和

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: currentVideoId,
playerVars: { 
    'loop' : 1,
    'playlist': currentVideoId
    },
events: {
  'onReady': onPlayerReady,
  'onStateChange': onPlayerStateChange
    }
 });
}

使用.loadPlaylist（）指定播放列表和视频（在播放列表中）的（数字）索引，而不是视频id。

player.loadPlaylist({list:String,
                 listType:String,
                 index:Number,
                 startSeconds:Number,
                 suggestedQuality:String}):Void

此函数加载指定的列表并播放。该列表可以是播放列表、搜索结果提要或用户上传的视频提要。

  • 可选的listType属性指定要检索的结果提要的类型。有效值为playlist、search和user_uploads。默认值为playlist。

  • 所需的list属性包含一个键，用于标识YouTube应返回的特定视频列表。

1

请参阅此示例fiddle，其中clickEventHandler()函数中加载了两个不同播放列表中的两个视频（取决于单击的列表项的id属性值）。

player.loadPlaylist({
    list: 'PLUdAMlZtaV11U9AtszkMh0bpRqM4dtlDC',
    index: 7
  });
相关文章：