时间戳

首页 > 解决方案 > 将视频添加到动画帧

javascript - 将视频添加到动画帧

问题描述

我们可以通过将图像添加为背景来将图像添加到框架中，content但是我找不到使用相同方法添加视频的解决方案，而无需手动操作。（我只想要一个视频帧。）

我也想在添加的id视频中添加一个。

这是CodePen。

这是完全相同的代码：

setTimeout(function(){
MovieClip();

}, 2000)



function MovieClip() {
  let video = document.createElement('video');
  video.setAttribute("id", "clip"); // Note: add id to video so that we can interact with it later 
  document.getElementsByClassName('content')[0].appendChild(video);
 
  let clip = document.getElementById("clip");

  let source = document.createElement('source');
  source.src = `http://clips.vorwaerts-gmbh.de/VfE_html5.mp4`;
  
  /* Adding video as the background of the content not working
  let node = document.getElementsByClassName('content')[0];
  node.style.background = `url(http://clips.vorwaerts-gmbh.de/VfE_html5.mp4) center/cover`; */

  source.type = 'video/mp4';
  video.appendChild(source); 
   
}
/* html {
	overflow: hidden;
	background-color: #121518;
}

video {
	position: absolute;
	overflow: hidden;
	left: 0vw;
	top: 0vh;
	width: 90%;
	height: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
  border: 0.1vw dashed #eb4034;


} */

body {
  height: 100vh;
  margin:0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #11151a;
}

.box {  
 border-radius: 1.31vh;
 position: relative;
 overflow: hidden;
}

.box::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
    repeating-linear-gradient(-45deg, white 0  0.48828125vw, hotpink 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw;
    width: calc(100% + 1.380859375vw);
    height: calc(100% + 1.380859375vw);
    transform: translate(-1.380859375vw, -1.380859375vw);
    will-change: transform;
    animation: animate 4s linear infinite;
  }

.box .content {
  width: calc(90vw -  1.953125vw);
  height: calc(85vh - 3.9318479685452163vh);  
  /*border-radius: 1.31vh;*/
  box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);
  margin:1vh;
}


@keyframes animate {
  to {
    transform: translate(0, 0);
    will-change: transform;
  }
}


.stopAnimation:after {
  -webkit-transform: none !important;
  transform: none !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body> 
  
<div id='box' class="box">
  <div class="content"></div>
</div>
  
</body>
</html>

请运行 CodePen，我认为我的代码存在两个主要问题：

第一：视频没有填满框架

第二：比较上角和下角，因为你看到下角被视频意外覆盖了。

标签： javascripthtmlcss

解决方案

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

虽然这会弄乱你的比例。将 a 添加padding-top到.content值为 的元素56.25%将为您提供 16:9 的纵横比。您可以通过(height / width) * 100轻松计算这些。

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

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

setTimeout(function() {
  MovieClip();
}, 2000)

const content = document.querySelector('.content');

function MovieClip() {
  let video = document.createElement('video');
  video.controls = 'true';
  video.addEventListener('canplaythrough', function() {
    content.appendChild(video);
  });
  
  video.id = 'clip'; // Note: add id to video so that we can interact with it later 
  
  let source = document.createElement('source');
  source.src = `http://clips.vorwaerts-gmbh.de/VfE_html5.mp4`;
  source.type = 'video/mp4';
  video.appendChild(source);
  video.load();
}
video {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #11151a;
}

.box {
  border-radius: 1.31vh;
  position: relative;
  overflow: hidden;
}

.box::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(-45deg, white 0 0.48828125vw, hotpink 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw;
  width: calc(100% + 1.380859375vw);
  height: calc(100% + 1.380859375vw);
  transform: translate(-1.380859375vw, -1.380859375vw);
  will-change: transform;
  animation: animate 4s linear infinite;
}

.box .content {
  position: relative;
  width: calc(90vw - 1.953125vw);
  
  /**
   * Remove padding and use the height
   * if you don't want to maintain the aspect ratio
  height: calc(85vh - 3.9318479685452163vh); */
  
  padding-top: 56.25%;
  /*border-radius: 1.31vh;*/
  box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);
  margin: 1vh;
}

@keyframes animate {
  to {
    transform: translate(0, 0);
    will-change: transform;
  }
}

.stopAnimation:after {
  -webkit-transform: none !important;
  transform: none !important;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div id='box' class="box">
    <div class="content"></div>
  </div>

</body>

</html>

推荐阅读