动态更改 youtube 上的视频 ID
Posted
技术标签:
【中文标题】动态更改 youtube 上的视频 ID【英文标题】：Dynamically change the video id on youtube 【发布时间】：2018-01-16 04:33:47 【问题描述】：我正在尝试使用以下代码显示没有视频的 youtube 音频，因此我正在更改视频 ID，但它一次又一次地播放相同的 ID。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>About</title>
<script type="text/javascript">
function val1(val)
document.getElementsByTagName("div")[0].setAttribute("data-video", val);
alert(val);
</script>
</head>
<body onload="val1('WKV_z36pVAk')">
<h3 style="color:#0066dd">Hello</h3>
<center>
<div data-video="8IYzyTYucKQ"
data-autoplay="0"
data-loop="1"
id="youtube-audio">
</div>
</center>
<button>change</button>
</body>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
</html>
【问题讨论】：
您在哪里看到应该设置data-video 来更改当前播放的视频？您应该进行 API 调用，例如：loadVideoById
在 dom:loaded 之后更改数据属性时要小心；它很快就会变得混乱。 ***.com/questions/17762906/…
请运行此程序并检查。你会明白这个问题，程序必须要 youtube 视频 ID，我想更改另一个 ID，但它没有改变。
您能否编辑问题，使其成为可运行的 Javascript/HTML/CSS sn-p，以便我们运行它？
【参考方案1】：
不太确定您要创建什么，但这可能会引导您走向正确的方向。
您可以使用此代码以一种 hacky 方式重新加载特定元素
function reload(vidId) <-- Added a parameter
var container = document.getElementById("youtube-audio");
container.setAttribute("data-video", vidId); <-- Added line to change data-video
var content = container.innerHTML;
container.innerHTML= content;
然后将其添加到您的 HTML
<button onclick="reload('8IYzyTYucKQ')">Reload</button> <-- Added the parameter to what the `data-video` should be changed
【讨论】：
嗨，请在哪里传递新的视频 ID 对不起，我下班了。进行了一些更改，重新加载函数现在需要一个参数。此参数将是正在加载的data-video。希望它仍然可以帮助您！以上是关于动态更改 youtube 上的视频 ID的主要内容，如果未能解决你的问题，请参考以下文章