Javascript 两个Youtube视频作为一个页面上的HTML5视频-谷歌图像代理

我使用js代码导入Youtube视频并输出为HTML5。它工作得很好，但我想在一个页面上有两个视频-有没有一种方法可以操纵这个代码，让两个视频到不同的ID

我尝试过复制代码和更改ID，但它只显示最后一个（显然），因为它使用相同的方法。我真的不完全理解这个函数，所以任何关于我哪里出错的解释都会很好

这就是我试图从链接问题的代码中改编的内容：

var vid=“R3AKlscrjmQ”，
溪流，
视频聚焦=正确，
视频标签=$（“#视频”），
video_obj=video_tag.get（0）；
$.get（”https://images“+~~（Math.random（）*33）+”-focus opensocial.googleusercontent.com/gadgets/proxy？container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget\u video\u info%3Fvideo\u id%3D”+vid，函数（数据）{
如果（数据）{
streams=解析元数据；
视频标签.attr({
src:streams['1080p']| | streams['720p']| | streams['360p']
});
document.addEventListener（“visibilitychange”，函数（）{
视频聚焦=！视频聚焦？视频对象播放（）：视频对象暂停（）；
});
}
});
var vid2=“R3AKlscrjmQ”，
溪流，
视频聚焦=正确，
视频标签=$（“#视频2”），
video_obj=video_tag.get（0）；
$.get（”https://images“+~~（Math.random（）*33）+”-focus opensocial.googleusercontent.com/gadgets/proxy？container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget\u video\u info%3Fvideo\u id%3D”+vid2，函数（数据）{
如果（数据）{
streams=解析元数据；
视频标签.attr({
src:streams['1080p']| | streams['720p']| | streams['360p']
});
document.addEventListener（“visibilitychange”，函数（）{
视频聚焦=！视频聚焦？视频对象播放（）：视频对象暂停（）；
});
}
});
函数解析（rawdata）{
var data=parse_str（rawdata），
streams=（data.url_encoded_fmt_stream_map+，'+data.adaptive_fmts）.split（'，'），
结果={}；
$。每个（流，函数（n，s）{
var stream=parse_str（s），
itag=stream.itag*1，
质量=错误，
itag_映射={
18:‘360p’，
22:‘720p’，
37:‘1080p’，
38:‘3072p’，
82:‘360p3d’，
83:‘480p3d’，
84:‘720p3d’，
85:‘1080p3d’，
133:‘240pna’，
134:‘360pna’，
135:‘480pna’，
136:‘720pna’，
137:‘1080pna’，
264:‘1440pna’，
298:‘720p60’，
299:'1080p60na'，
160:‘144pna’，
139:“48kbps”，
140:“128kbps”，
141:“256kbps”
};
//if（stream.type.indexOf（'o/mp4'）>0）console.log（stream）；
if（itag_map[itag]）result[itag_map[itag]]=stream.url；
});
返回结果；
};
函数parse_str（str）{
返回str.split（'&'）.reduce（函数（params，param）{
var paramspilt=param.split（'='）.map（函数（值）{
返回组件（value.replace（'+'，''）；
});
params[paramspilt[0]]=paramspilt[1]；
返回参数；
}, {});
}

.video容器{
高度：200px；
背景：橙色；
溢出：隐藏；
}
录像带{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

---

您需要一个不同的

视频id

——现在它们是

视频id的副本：“R3AKlscrjmQ”

。所有视频变量都被指定为对象的属性。这些对象位于

vidArray

中。第一个功能已修改为循环运行，并设置与每个对象窗体相关联的视频

vidArray

。为了避免混乱，省略了最后两个函数，但请记住在测试之前包含它们。

var流；
var vidArray=[{
视频_id:“R3AKlscrjmQ”，
视频标签：$（“#视频0”），
视频聚焦：没错，
视频对象：document.getElementById（“video0”）
}, {
视频识别码：“？”，
视频标签：$（“#视频1”），
视频聚焦：没错，
视频对象：document.getElementById（“视频1”）
}];
var-idx；
对于（idx=0；idx

。视频页面{
高度：100vh；
背景：橙色；
溢出：隐藏；
}
录像带{
保证金：50vh自动；
宽度：100%；
高度：自动；
对象匹配：覆盖；
}

---

我最终找到了一个非常有效的答案，并且足够整洁，可以在需要时继续添加更多视频

setupVideo（“ScMzIvxBSi4”，$（“#video”）；
setupVideo（“ni5hRK1ehzk”，$（“#video2”）；
功能设置视频（视频ID，选择或元素）{
var vid=视频ID，
溪流，
视频聚焦=正确，
视频标签=选择元素，
video_obj=video_tag.get（0）；
$.get（”https://images“+~~（Math.random（）*33）+”-focus opensocial.googleusercontent.com/gadgets/proxy？container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget\u video\u info%3Fvideo\u id%3D”+vid，函数（数据）{
控制台日志（数据）；
如果（数据）{
streams=解析元数据；
视频标签.attr({
src:streams['1080p']| | streams['720p']| | streams['360p']
});
document.addEventListener（“visibilitychange”，函数（）{
视频聚焦=！视频聚焦？视频对象播放（）：视频对象暂停（）；
});
}
});
}
函数解析（rawdata）{
var data=parse_str（rawdata