Javascript 在自定义html视频播放列表上播放YouTube视频

你好，我实现了自定义视频播放列表，一切正常，除了我不能在我的网站上播放youtube视频代码如下所示

HTML

还有css

#playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}
#playlist li:hover{
    color:blue;                        
}
#videoarea {
    float:left;
    width:640px;
    height:480px;
    margin:10px;    
    border:1px solid silver;
}​

---

如果您能获得播放此视频的正确URL，我们将不胜感激。

Youtube目前使用iframe嵌入其视频播放器。看看这个

您需要做的是从youtube检索视频ID列表（每个视频的唯一标识符-类似M7lc1UVf VE），并在切换视频时更新iframe的src。下面是一个基本示例：

<iframe id="ytplayer" width="560" height="315" src="//www.youtube.com/embed/cA-T-HLdv7g" frameborder="0" allowfullscreen></iframe>
<div id="change">change video</div>
<script>
$('#change').on('click',function(){
  $('#ytplayer').attr('src','http://www.youtube.com/embed/OmaI1nInDOs');
  });
</script>

更改视频
$（“#更改”）。在（'click'，function（）上{
$（'ytplayer'）.attr（'src'，'http://www.youtube.com/embed/OmaI1nInDOs');
});

在上面的developers.google.com链接中，还解释了如何根据playlist_ID检索播放列表。您还可以找到所有当前可用的设置来调整播放器

你必须使用

#playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}
#playlist li:hover{
    color:blue;                        
}
#videoarea {
    float:left;
    width:640px;
    height:480px;
    margin:10px;    
    border:1px solid silver;
}​

<iframe id="ytplayer" width="560" height="315" src="//www.youtube.com/embed/cA-T-HLdv7g" frameborder="0" allowfullscreen></iframe>
<div id="change">change video</div>
<script>
$('#change').on('click',function(){
  $('#ytplayer').attr('src','http://www.youtube.com/embed/OmaI1nInDOs');
  });
</script>