如何嵌入YouTube视频,并在第一个视频完成时排队替换Vimeo视频


How can one embed a YouTube video, and queue up a Vimeo video to replace it when the first is finished?

具体视频网站只是举例。但我很好奇,在第一个视频结束后,如何从同一网站或其他地方排队观看另一个视频。本质上是一个特别的播放列表。

给定一个视频链接序列,如何将它们串在一起制作一个"播放列表"?

JavaScript是这里的方法。当一个视频结束时,让JavaScript更改新嵌入的值。因为Vimeo和YouTube都使用类似的嵌入方法(iframes),它使生活变得简单得多。

当一个视频结束(更多的检测在这篇文章的结尾)使用JavaScript来改变你的iframe的SRC属性。您还可以根据需要更改宽度和高度。

例子:

<iframe id="ourVideo" width="400" height="225" src="http://player.vimeo.com/video/28023982?title=0&amp;byline=0&amp;portrait=0" frameborder="0"></iframe>
然后,在JavaScript中
var newHTML = "http://www.youtube.com/embed/ZnehCBoYLbc?rel=0";
document.getElementById("ourVideo").setAttribute( "src", newHTML );

我为新的HTML创建了一个新的变量,但是您可以从任何您喜欢的地方提取这个变量。使用像jQuery这样的框架可以让事情变得更简单:

$("#ourVideo").attr( "src", newHTML );

如果你想要一个播放列表功能,我建议在JavaScript中填充一个数组,然后遍历它:

var playlist = [ "http://....1", "http://....2", "http://....3", "http://....4" ];

如何知道何时更改:

这很棘手。您可以采用偷懒的方式,即设置一个等于视频长度的计时器(不推荐,特别是考虑到加载时间)。另一种方法是使用来自视频播放器的JavaScript回调。这更复杂,但要好得多。

关于回调的更多信息请点击此处:

YouTube的JS API回调

Vimeo