2

Why I can set gif as background image url() in css, but can't set video mp4 as background url?

I tried everything, even setting url to point to svg that has foreign object video in it encoded as base64 in src attribute. But won't work.

I don't need video bcg as video element in html, i need exactly that as i can blur the content of the children using inherit background and before selector.

Alexa
  • 418
  • 4
  • 12

5 Answers5

3

CSS background and background-image properties only accept colours, gradients, bitmaps and SVG as values.

We can create a simple HTML5 video element and place it inside a container element. The image used in a poster attribute will be showed first, and then be replaced by the first frame of the video when it loads. Therefore it’s good practice to use the first frame of a video for a poster image.

JiangangXiong
  • 2,326
  • 1
  • 12
  • 14
2

You can draw the video playback at CSS url() by playing the media at <video> element, drawing the playing video at <canvas> element and calling .toDataURL() to set background of element to data URI at timeupdate event of <video> element

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div></div>
  <script>
    (async() => {

      let div = document.querySelector("div");

      let url = "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4#t=10,20";

      let video = document.createElement("video");

      let canvas = document.createElement("canvas");

      let ctx = canvas.getContext("2d");

      video.oncanplay = function() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        div.style.width = video.videoWidth + "px";
        div.style.height = video.videoHeight + "px";
        this.play();
      }

      video.ontimeupdate = function() {
        ctx.drawImage(this, 0, 0);
        let dataURI = canvas.toDataURL();
        div.style.background = `url(${dataURI})`;
        
      }

      let mediaBlob = await fetch(url).then(response => response.blob());

      video.src = URL.createObjectURL(mediaBlob);

    })()
  </script>
</body>

</html>
guest271314
  • 1
  • 15
  • 104
  • 177
  • @Alexa You can alternatively substitute `requestAnimationFrame` for `timeupdate` event to draw `data URI` at CSS `url()` function. – guest271314 Sep 23 '17 at 07:15
  • this is Amazing! tnx! – Alexa Sep 23 '17 at 16:56
  • sadly, i only get 8fps on this video, on high quality video is not playable – Alexa Sep 23 '17 at 18:05
  • Have you tried substituting `requestAnimationFrame` for `timeupdate` event of ` – guest271314 Sep 23 '17 at 18:31
  • Are you trying to display HTML content overlay at the video playback at ` – guest271314 Sep 23 '17 at 22:26
  • I am just changing backgroundImage of body element every frame. If image is of hig quality it want be playable. Body has few children elements that have background inherited from body and before selectors on that elements have also background inherited from body and have blur filter on it. – Alexa Sep 24 '17 at 08:28
2

Firefox implements CSS element() function, which allows for example a <canvas> element to be set at background or background-image property using -moz-element() or Document.mozSetImageElement()

The element() CSS function defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.

We can use .drawImage() and requestAnimationFrame() to draw the <video> onto the <canvas> see html5: display video inside canvas, Drawing video on canvas, which render a live feed of the <video> playback at for example a <div> element CSS background-image property.

const div = document.querySelector("div");
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
const video = document.createElement("video");
video.id = "video";
canvas.id = "canvas";
canvas.style.display = "none";
canvas.width = 320;
canvas.height = 280;
div.style.width = canvas.width + "px";
div.style.height = canvas.height + "px";

let raf;

const draw = () => {
  if (video.paused || video.ended) {
    window.cancelAnimationFrame(raf);
    return;
  }

  ctx.drawImage(video, 0, 0, 320, 280);

  raf = window.requestAnimationFrame(draw);
}

video.oncanplay = () => {
  if ("mozSetImageElement" in document) {
    div.style.backgroundImage = "-moz-element(#canvas)";
    video.play();
    draw();
  }
}

video.src = "https://meeseeks.gamepedia.com/media/meeseeks.gamepedia.com/a/a6/Big-buck-bunny_trailer.webm";
div {
  text-align: center;
  font-family: monospace;
  font-size: 24px;
  color: gold;
  text-shadow: 1px 1px 1px red;
}
<div>
  div element
</div>
guest271314
  • 1
  • 15
  • 104
  • 177
  • I eventually done it with canvas(has support for filters). Every element that needs to blur background which is video has child canvas which has position fixed. On that canvas I draw blured image every 4 frame. Parent has css clip path property which hides owerflow because position fixed does not allow parent to hide overflow. https://miketaylr.com/posts/2015/06/position-fixed-overflow-hidden.html tnx – Alexa Oct 01 '17 at 11:12
1

Here's some video background code that worked for me:

in the html:

 <video autoplay loop id="video-background" muted plays-inline>
    <source src="<yourvideo>" type="video/mp4">
 </video>

and in css:

    #video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 75%;
    width: auto;
    height: auto;
    z-index: -100;
}
Nick Tamburro
  • 150
  • 1
  • 4
  • 16
1

for video in bg you should use video tag in html5!

here is the fullscrean video code:

<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
    <source src="video/big_buck_bunny.webm" type="video/webm">
    <source src="video/big_buck_bunny.mp4" type="video/mp4">
    <source src="video/big_buck_bunny.ogv" type="video/ogg">
</video>

and few simple lines of CSS:

.fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

source: https://slicejack.com/fullscreen-html5-video-background-css/

roghayeh hosseini
  • 676
  • 1
  • 8
  • 21