Зеркальное воспроизведение видео в качестве фона без двойной буферизации?

На моем веб-сайте показано видео, это своего рода главное, что он делает. Интересно, могу ли я использовать одно и то же видео, желательно, не загружая его дважды, и использовать его в качестве фона (возможно, с размытым эффектом) на остальной части сайта?Зеркальное воспроизведение видео в качестве фона без двойной буферизации?

_________________ 
| <html>  | 
|  _____  | 
| <video> | 
| </video> | 
|    | 
| Same <video> | 
| as background | 
|    | 
| </html> | 
|_______________|

Я знаю, что это смехотворно плохо объяснено, но я не знаю с чего начать. Я понял, что jQuery звучит как соответствующий тег, но я даже не уверен в этом. Я знаю, что обычно можно связать то, что они пробовали, но я не знаю с чего начать. Как я уже сказал, я бы предпочел не переупаковывать его дважды, что в моем мире означает не добавлять еще один элемент <video>, а использовать какой-то js, чтобы каким-то образом отразить его. Возможно, плагин?

Любое руководство будет высоко оценено, спасибо заранее.

источник

2016-05-31 Algernop K.

Вы можете использовать timeupdate событию video нарисовать образ video для canvas элемента с использованием drawImage(); использовать cssvw, vh значения для установки canvas, чтобы покрыть область просмотра, установите position к absolute на обоих video и canvas элементов, свойство filter с blur() значением для того чтобы установить эффект размывания canvas, установить z-Index из canvas на значение меньше z-Index из video элемента.

body { 
 
    width: 94vw; 
 
    height: 100vw; 
 
} 
 
video { 
 
    position: absolute; 
 
    z-Index: 1; 
 
    left: 25vw; 
 
} 
 
canvas { 
 
    width: 94vw; 
 
    height: 100vh; 
 
    position: absolute; 
 
    z-Index: 0; 
 
    -webkit-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <video width="300px" height="200px;" src="http://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm" autoplay loop></video> 
 
    <canvas></canvas> 
 
    <script> 
 
    window.onload = function() { 
 
     var video = document.querySelector("video"); 
 
     var canvas = document.querySelector("canvas") 
 
     var ctx = canvas.getContext("2d"); 
 
     video.addEventListener("timeupdate", function(event) { 
 
     ctx.drawImage(this, 0, 0); 
 
     }) 
 
    } 
 
    </script> 
 
</body> 
 
</html>

источник

2016-05-31 02:05:47 guest271314

лучше, используя requestAnimationFrame обратить ваше видео на холсте, если вы не делаете любую обработку данных холст, и не забудьте изменить размер холста '' width'and свойства height' к свойствам видеофильма 'videoWidth' и' VideoHeight'. – Kaiido

@ Kaiido Не был уверен, что ожидаемый эффект ожидался или как можно ближе к оригиналу. Отложенный эффект, обеспечиваемый периодическим событием «timeupdate», использовался на посту. 'Css' был или может быть более задействован в части' javascript'. _ "и не забудьте изменить размеры ваших свойств' width 'и 'height' на свойства' videoWidthand' 'VideoHeight' видео. _ Верьте, что OP пытается заполнить весь видовой экран с помощью' canvas' или другого подхода, так как фон _ "использовать его в качестве фона (возможно, с размытым эффектом) на остальной части сайта?" _ и воспроизводить видео на переднем плане. – guest271314

@ Kaiido Примечание: 'left: 25vw' на' video' был использован для размещения 'video' в центре окна просмотра stacksnippets; может потребоваться дополнительная корректировка – guest271314

Зеркальное воспроизведение видео в качестве фона без двойной буферизации?

ответ

Смежные вопросы