Question

您好我在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>

Javascript通过jquery

$(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;
}

任何有关获取正确网址以播放此视频的帮助都将不胜感激

Answer 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检索播放列表。您还可以找到所有当前可用的设置来调整您的播放器。

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

1 个答案: