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

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.

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.

Share Improve this question asked Sep 23, 2017 at 5:57 Alex 3984 silver badges12 bronze badges

Are you expecting video to be played when set at CSS url()? – guest271314 Commented Sep 23, 2017 at 6:12
yes exactly that – Alex Commented Sep 23, 2017 at 6:25

Add a ment |

5 Answers 5

Sorted by: Reset to default 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.

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>

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./media/meeseeks.gamepedia./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>

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;
}

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./fullscreen-html5-video-background-css/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

5 Answers 5

与本文相关的文章

评论列表(0)