Добавление видео в анимационный кадр - PullRequest
Новая
       0

Добавление видео в анимационный кадр

0 голосов
/ 18 февраля 2020

Мы можем добавить изображение к кадру, добавив изображение в качестве фона 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, я думаю, что с моим кодом есть две основные проблемы:

Первый: видео не заполняет кадр

Секунда: Сравните верхний угол с нижним, поскольку вы видите, что нижний угол неожиданно покрыт видео.

Ответы [ 2 ]

1 голос
/ 19 февраля 2020

Чтобы использовать элемент en в том же стиле, что и фоновое изображение, используйте свойство CSS object-fit. Когда значение равно cover, элемент будет покрывать всю ширину и высоту родительского элемента. Прекрасно работает с изображениями и видео.

Хотя это ухудшит ваше соотношение. Добавление padding-top к элементу .content со значением 56.25% даст вам соотношение сторон 16: 9. Вы можете легко рассчитать их, выполнив (высота / ширина) * 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>
0 голосов
/ 18 февраля 2020

Я не уверен, что это именно то, что вам нужно, но если вы хотите разместить видео поверх этого элемента box, вы можете добавить position: absolute к элементу video.

Добавить это video.style.position = 'absolute'; после video.appendChild(source);

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...