Question

我们可以通过将图像添加为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，我认为我的代码存在两个主要问题：

首先：视频未填满框架

第二：将顶部和底部进行比较，因为您看到视频意外覆盖了底部。

Answer 1

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

尽管这会破坏您的比率。将padding-top添加到.content元素中，并将56.25%的值添加为canplaythrough将为您带来16：9的宽高比。您可以通过（高度/宽度）* 100 来轻松计算这些。

此外，由于您实际上是在懒惰地加载视频，因此只要触发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>

template<std::size_t N, typename T, std::size_t ... is>
constexpr auto fun(T&& tp, std::index_sequence<is...>&& i) noexcept {
    return std::tuple((is < N ? std::get<is>(tp) : std::get<is+1>(tp)) ...);
}

template<std::size_t N, std::size_t... elems>
constexpr auto fun2() noexcept {
    constexpr auto t = std::tuple(elems...);
    return fun<N>(std::forward_as_tuple(elems...), std::make_index_sequence<sizeof... (elems) - 1>());
}

Answer 2

我不确定这是否是您想要的，但是如果您想在此框元素的顶部放一个视频，则可以在视频元素中添加position: absolute。

添加此 video.style.position = 'absolute';

之后的video.appendChild(source);

将视频添加到动画帧

2 个答案: