Javascript 将视频添加到动画帧

我们可以通过添加图像作为内容的背景，将图像添加到帧中，但我找不到一个解决方案来使用相同的方法添加视频，而不用手。我只想给我的视频配个相框

我还想给添加的视频添加一个id

这是你的电话号码

下面是完全相同的代码：

setTimeoutfunction{ 电影唇； }, 2000 功能电影剪辑{ 让video=document.createElement'video'； video.setAttributeid，clip；//注意：将id添加到视频中，以便我们以后可以与之交互 document.getElementsByClassName'content'[0].appendChildvideo； 让clip=document.getElementByIdclip； 让source=document.createElement'source'； source.src=`http://clips.vorwaerts-gmbh.de/VfE_html5.mp4`; /*添加视频作为内容的背景不起作用 让节点=document.getElementsByClassName'content'[0]； node.style.background=`urlhttp://clips.vorwaerts-gmbh.de/VfE_html5.mp4 中心/盖`*/ source.type='video/mp4'； 视频源； } /*html{ 溢出：隐藏； 背景色：121518； } 录像带{ 位置：绝对位置； 溢出：隐藏； 左：0vw； 顶部：0vh； 宽度：90%； 高度：自动； 排名：0； 左：0； 右：0； 底部：0； 左边距：自动； 右边距：自动； 页边顶部：自动； 页边距底部：自动； 边框：0.1vw虚线eb4034； } */ 身体{ 高度：100vh； 保证金：0； 显示器：flex； 对齐项目：居中； 证明内容：中心； 背景色：11151a； } .box{ 边界半径：1.31vh； 位置：相对位置； 溢出：隐藏； } .box：：之后{ 内容：； 位置：绝对位置； z指数：-1； 排名：0； 右：0； 底部：0； 左：0； 背景： 重复-线性-梯度-45度，白色0.48828125vw，粉红色0.9765625vw 0 0/1.380859375vw 1.380859375vw； 宽度：calc100%+1.380859375vw； 高度：calc100%+1.380859375vw； 变换：translate-1.380859375vw，-1.380859375vw； 改变：转变； 动画：动画4s线性无限； } .box.content{ 宽度：calc90vw-1.953125vw； 高度：calc85vh-3.9318479685452163vh； /*边界半径：1.31vh*/ 盒影：0.262vh深粉色，0.6553vh rgba0,0,0,1，插图0.6553vh rgba0,0,0,1； 保证金：1vh； } @关键帧设置动画{ 到{ 变换：translate0，0； 改变：转变； } } .停止动画：之后{ -webkit转换：无！重要； 转变：无！重要； }

---

我不确定这是否是您想要的，但是如果您想要在这个box元素的顶部有一个视频，您可以将position:absolute添加到视频元素

加上这个

---

video.style.position='绝对'；视频源之后

要以与背景图像相同的样式使用en元素，请使用CSS object fit属性。当该值为cover时，元素将覆盖父元素的整个宽度和高度。适用于图像和视频

虽然这会弄乱你的比例。在.content元素中添加一个值为56.25%的padding top将获得16:9的纵横比。通过计算高度/宽度*100，您可以轻松地计算这些值

另外，由于您实际上是在偷懒地加载视频，因此每当触发canplaythrough事件时，请等待添加视频。每当视频缓冲到足以播放到视频结束时，以流数据的当前速度触发此事件

视频不会加载到代码段中，但是如果您将其粘贴到代码笔或项目中，它就会工作

setTimeoutfunction{ 电影唇； }, 2000 const content=document.querySelector.content'； 功能电影剪辑{ 让video=document.createElement'video'； video.controls='true'； video.addEventListener'canplaythrough'函数{ 内容视频； }; video.id='clip'；//注意：将id添加到视频中，以便我们以后可以与之交互 让source=document.createElement'source'； source.src=`http://clips.vorwaerts-gmbh.de/VfE_html5.mp4`; source.type='video/mp4'； 视频源； 视频加载； } 录像带{ 位置：绝对位置； 排名：0； 左：0； 最大宽度：100%； 最大高度：100%； 宽度：100%； 身高：100%； -o-对象配合：盖； 对象匹配：覆盖； } 身体{ 高度：100vh； 保证金：0； 显示器：flex； 对齐项目：居中； 证明内容：中心； 背景色：11151a； } .盒子{ 边界半径：1.31vh； 位置：相对位置； 溢出：隐藏； } .box：：之后{ 内容：； 位置：绝对位置； z指数：-1； 排名：0； 右：0； 底部：0； 左：0； 背景：重复线性梯度45度，白色0.48828125vw，热粉色0.9765625vw 0 0/1.380859375vw 1.380859375vw； 宽度：calc100%+1.380859375vw； 高度：calc100%+1.380859375vw； 变换：translate-1.380859375vw，-1.380859375vw； 改变：转变； 动画：动画4s线性无限； } .box.content{ 位置：相对位置； 宽度：calc90vw-1.953125vw； /** *拆下衬垫并使用 高度 *如果不想保持纵横比 高度：calc85vh-3.9318479685452163vh*/ 垫面：56.25%； /*边界半径：1.31vh*/ 盒影：0.262vh深粉色，0.6553vh rgba0,0,0,1，插图0.6553vh rgba0,0,0,1； 保证金：1vh； } @关键帧设置动画{ 到{ 变换：translate0，0； 改变：转变； } } .停止动画：之后{ -webkit转换：无！重要； 转变：无！重要； }

---

请看一看我更新的代码笔和问题…我不想简单地把一个放在另一个上面，我只想为我的视频帧如果你想覆盖框元素，只需在视频元素样式中添加宽度：100%。请注意，它将保持纵横比。或者，在您的情况下，宽度：calc90vw-1.953125vw；只是为了匹配框的边界直到我失去了框的下角。。视频覆盖了下部框架我没有看到任何视频：干得好。。。谢谢。。。今晚要学的东西太多了…还有一个问题我失去了中心对齐我的意思是整个画面不再居中。。。如何修复…居中对齐可能与车身上超过100vh高度的衬垫有关。但很难说清楚。将“对象拟合”值更改为“包含”将使视频在.content div中拟合，而不会扭曲其比率。同时对齐项目：居中可以使子元素溢出而无法滚动。使用显示：网格；并对齐项目：中心安全；与这种行为作斗争。祝你的项目好运！