Javascript 如何根据随机播放的视频以html格式显示文本？

我想根据随机播放的视频显示文本，文本将分配给该特定视频，如果播放该视频，则只显示分配给该视频的特定文本

var视频=[{
id:1，
url:“https://www.youtube.com/embed/k47u9tduwb8?autoplay=1"
},
{
id:2，
url:“https://www.youtube.com/embed/lJ6osaYFSIA?autoplay=1"
}
];
window.onload=函数（）{
var playerDiv=document.getElementById（“随机播放器”）；
var player=document.createElement（“IFRAME”）；
var previousId=localStorage.getItem（'previousId'）；
如果（以前的ID）{
var previousIndex=videos.findIndex（v=>v.id==parseInt（previousId））；
视频拼接（上一个索引，1）；
}
var current=Math.floor（Math.random（）*videos.length）；
localStorage.setItem（'previousId'，videos[current].id）；
getItem（'previousId'）；
var randomVideoUrl=视频[当前].url；
player.setAttribute（'width'，'640'）；
player.setAttribute（'height'，'390'）；
player.setAttribute（'src'，randomVideoUrl）；
playerDiv.appendChild（玩家）；
};

解释

首先
div
标记不是自动关闭标记，意味着您必须编写
才能关闭它

正确的

最后只需为视频对象添加更多属性，每个URL包含文本，并根据当前值将其嵌入html

    var videos = [ { id:1, URL: '...', text: '...' },...]

确保在浏览器中运行代码



jQuery在iFrame中插入HTML
身体{
背景：#333；
}
.视频容器{
位置：相对位置；
}
iframe{
高度：自动；
垂直对齐：中间对齐；
宽度：100%；
}
.叠加说明{
背景：rgba（0,0,0,0）；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
h1{
颜色：白色；
字体系列：“Nobile”，无衬线；
字体大小：9vw；
文本对齐：居中；
}
主要{
保证金：0自动；
宽度：80%；
}
p{
颜色：白色；
字体系列：“开放式Sans”，无衬线；
字号：1.1rem；
线高：1.7雷姆；
}
var视频=[
{id:1，url:“https://www.youtube.com/embed/k47u9tduwb8?autoplay=1"},
{id:2，url:“https://www.youtube.com/embed/lJ6osaYFSIA?autoplay=1"}      
];
window.onload=函数（）{
//document.getElementById（'myIframe'）.src=videos[Math.floor（Math.random（）*videos.length）]；
/*
var player=document.getElementsByTagName（“视频”）[0]；
var sources=player.getElementsByTagName（'source'）；
源[0]。src='1！'https://www.youtube.com/embed/lJ6osaYFSIA?autoplay=1';
player.load（）*/
var playerDiv=document.getElementById（“视频容器”）；
var player=document.createElement（“IFRAME”）；
/*var previousId=localStorage.getItem（'previousId'）；
如果（以前的ID）{
var previousIndex=videos.findIndex（v=>v.id==parseInt（previousId））；
视频拼接（上一个索引，1）；
}
localStorage.setItem（'previousId'，videos[current].id）；
getItem（'previousId'）；
*/
var current=Math.floor（Math.random（）*videos.length）；
var randomVideoUrl=视频[当前].url；
player.setAttribute（'width'，'640'）；
player.setAttribute（'height'，'390'）；
player.setAttribute（'src'，randomVideoUrl）；
控制台日志（播放器）
playerDiv.appendChild（玩家）；
}
视频标题
没有Jquery很难做到这一点。更喜欢这个工作示例，可能会很有帮助。谢谢你，所以非常感谢。我会尝试一下，关于标签，我想我在复制和粘贴时把它弄糟了。它工作得很好。我真的很感谢你的帮助。我也能在正在播放的视频的顶部显示文本吗？就像视频的文本覆盖一样？是的，你可以，我刚刚在Codepen上编辑了上面的示例，你可以看到这是一些CSS的问题，没什么大不了的*我知道这是没有反应的，但你知道如何制作叠加文本的要点。我刚刚尝试了更新的文本，但不幸的是，它对我的代码不起作用。我甚至在我的代码中链接了它，但仍然没有得到任何结果，因为你在那个页面上
<div/> content

   var textContainer = document.getElementById("text");
   textContainer.innerHTML = videos[current].text;

    var videos = [ { id:1, URL: '...', text: '...' },...]