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

【问题标题】：Playing YouTube videos on custom html video playlist在自定义 html 视频播放列表上播放 YouTube 视频
【发布时间】：2014-04-18 03:32:51
【问题描述】：

您好，我在 http://jsfiddle.net/Barzi/Jzs6B/9/ 实现了自定义视频播放列表，除了我无法在我的网站上播放 youtube 视频外，一切正常，代码如下所示

HTML

<video id="videoarea" controls="controls" poster="" src=""></video>
<ul id="playlist">
    <li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li>
    <li movieurl="VideoURL2.webm">Second video</li>
    ...
    ...
</ul>

通过 jquery 编写 JavaScript

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})

和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 API

标签： javascript jquery html video youtube

【解决方案1】：

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

您需要做的是从 youtube 检索 VIDEO_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>

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

【讨论】：