我在尝试使用 Youtube iframe API 加载 2 个 iframe 视频时遇到问题。
请看下面的代码:
<body>
<div id="bookingVideo"></div>
<div id="testing"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//First video
var bookingVideo;
function onYouTubeIframeAPIReady() {
player = new YT.Player('bookingVideo', {
height: '400',
width: '100%',
videoId: 'W3VoMbg6hXA'
});
}
//Second Video
var testing;
function onYouTubeIframeAPIReady() {
player = new YT.Player('testing', {
height: '400',
width: '100%',
videoId: 'W3VoMbg6hXA'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
</script>
</body>
它的工作，但只添加一个视频到 div id="testing"，如下面的屏幕截图所示。
有什么想法吗？我被困了几个小时:(。 谢谢
最佳答案
你定义了同一个函数两次，所以 Javascript 不知道调用哪一个。您应该执行以下操作:
<body>
<div id="bookingVideo"></div>
<div id="testing"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var bookingVideo;
var testing;
function onYouTubeIframeAPIReady() {
player = new YT.Player('bookingVideo', {
height: '400',
width: '100%',
videoId: 'W3VoMbg6hXA'
});
player = new YT.Player('testing', {
height: '400',
width: '100%',
videoId: 'W3VoMbg6hXA'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
</script>
希望对您有所帮助!
关于javascript - 2 个视频同一页面使用 iframe Youtube API 只加载一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47531301/