我正在尝试设置一个嵌入 2 个永久直播流（来自 2 个不同频道）的网站页面。页面上有 2 个按钮，允许用户显示 1 个视频或另一个。
但是我无法完成这项工作。我现在正在尝试常规的 YouTube 嵌入，但只有一个显示，按钮没有任何效果。而且自动播放似乎不起作用...
我已经尝试过直播部分，效果很好，但不适用于 2 个直播。 任何建议去哪里调查。谢谢你！
function showcam(num) {
for (let i = 1; i < 2; i++) {
document.getElementById("camera" + i).style.display = 'none';
}
document.getElementById("camera" + num).style.display = '';
console.log(num)
}iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
max-width: 100%;
z-index: -5;
}<div id="cameramenu">
<ul>
<button id=button1 onclick="showcam(1)">
<li> camera 1 </li>
</button>
<br>
<button id=button1 onclick="showcam(2)">
<li> camera 2 </li>
</button>
</div>
<div id=cameravideo>
<div id=camera1>
<iframe id=camera1 title="Live-stream of the machine" src="https://www.youtube.com/embed/hgZqTIOzOp4?autoplay=1&modestbranding=1&color=red&showinfo=1" playsinline>
</iframe>
</div>
<div id=camera2>
<iframe id=camera2 title="Live-stream of the crowd" src="https://www.youtube.com/embed/CA5-UT_6Cxs?autoplay=1&modestbranding=1&color=red&showinfo=1" playsinline>
</iframe>
</div>
</div>您必须使用 iframe api 才能控制视频。从那里，您将能够添加超过 1 个视频，并制作您自己的播放按钮或在它们之间切换。如果您需要进一步的帮助，我可以尝试给您提供一个在 2 个视频之间切换的示例。
https://developers.google.com/youtube/iframe_api_reference
https://jsfiddle.net/842u0f6v/
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
function showcam(num) {
for (let i = 1; i < 2; i++) {
document.getElementById("camera" + i).style.display = 'none';
}
document.getElementById("camera" + num).style.display = '';
console.log(num)
}iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
max-width: 100%;
z-index: -5;
}<div id="cameramenu">
<ul>
<button id=button1 onclick="showcam(1)">
<li> camera 1 </li>
</button>
<br>
<button id=button1 onclick="showcam(2)">
<li> camera 2 </li>
</button>
</div>
<div id=cameravideo>
<div id=camera1>
<iframe id=camera1 title="Live-stream of the machine" src="https://www.youtube.com/embed/hgZqTIOzOp4?autoplay=1&modestbranding=1&color=red&showinfo=1" playsinline>
</iframe>
</div>
<div id=camera2>
<iframe id=camera2 title="Live-stream of the crowd" src="https://www.youtube.com/embed/CA5-UT_6Cxs?autoplay=1&modestbranding=1&color=red&showinfo=1" playsinline>
</iframe>
</div>
</div>