Question

我需要的是这个

覆盖图片，可以更改其在youtube视频上的X和Y位置，而无需重新加载页面。

理想情况下，这应该是Javascript，我想Interval会从文本文件（或MySQL）获取X和Y值。

换句话说...假设一辆汽车正在YouTube视频中行驶，则叠加层应为红色矩形，每隔1秒钟左右，Javascript将从文本文件中获取X和Y，然后在youtube屏幕上重新绘制红色矩形。

最终结果应该是这样的：

https://i.ytimg.com/vi/aEBigBm7KBk/hqdefault.jpg

我是C ++ / C＃类的人，对Javascript的了解很少，因此我想将机器学习演示移植到一个友好的界面（网页），我知道这可能太多了，所以如果有人至少可以指点我免费脚本会超级有帮助！谢谢！

Answer 1

我已经准备了一个示例JSFiddle，可以帮助您正确地开始：https://jsfiddle.net/2nfswab3/

基本上，<div class="overlay"...是覆盖视频的红色方块。您可以在#app容器中添加任意数量的标签。您提到它们的位置将每秒动态变化，其中的值来自您的后端代码。更改其位置就像更新其left, right, top, bottom CSS属性一样简单。

您可以通过香草JS这样实现：

var redSquares = document.getElementsByClassName('overlay');
var squareOne = redSquares[0];
squareOne.style.left = '300px';

HTML：

<div id="app">
  <iframe width="100%" height="400px" src="https://www.youtube.com/embed/KGN_9xZBgYY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  <div class="overlay" style="left: 370px; top: 140px;"></div>
  <div class="overlay" style="left: 170px; top: 140px;"></div>
</div>

CSS：

html,body{
  position: relative;
  width: 100%;
  height: 100%;
}

#app{
  position: relative;
}
.overlay{
  border: 2px solid red;
  color: #fff;
  z-index:2;
  position: fixed;
  width: 100px;
  height: 100px;
}

我希望这会有所帮助。如果您进一步需要帮助或详细说明，请提出评论。

寻找某种方法将“运动图像”放在视频（YouTube视频）上吗？

1 个答案: