为什么我可以在CSS中将gif设置为背景图像url（），却不能将视频mp4设置为背景url？
[英]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? 
为什么我可以在CSS中将gif设置为背景图像url（），却不能将视频mp4设置为背景url？
I tried everything, even setting url to point to svg that has foreign object video in it encoded as base64 in src attribute. 我尝试了所有方法，甚至将url设置为指向其中具有异物视频的svg，该视频在src属性中编码为base64。 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. 我不需要将video bcg作为html中的video元素，因为我可以使用继承背景和选择器之前模糊孩子的内容，所以我确实需要。
5 个解决方案
解决方案1
3 2017-09-23 06:08:39
CSS background and background-image properties only accept colours, gradients, bitmaps and SVG as values. CSS background和background-image属性仅接受颜色，渐变，位图和SVG作为值。
We can create a simple HTML5 video element and place it inside a container element. 我们可以创建一个简单的HTML5视频元素并将其放置在容器元素内。 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. 因此，最好将视频的第一帧用于海报图像。
解决方案2
1 2017-09-23 06:27:04
Here's some video background code that worked for me: 这是一些对我有用的视频背景代码：
in the html: 在html中：
<video autoplay loop id="video-background" muted plays-inline>
<source src="<yourvideo>" type="video/mp4">
</video>
and in css: 并在CSS中：
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 75%;
width: auto;
height: auto;
z-index: -100;
}
解决方案3
1 2017-09-23 06:56:24
for video in bg you should use video tag in html5! 对于bg中的视频，您应该在html5中使用video标签！
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: 和几行简单的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/ 来源： https : //slicejack.com/fullscreen-html5-video-background-css/
解决方案4
1 已采纳 2017-09-23 07:01:21
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 您可以绘制在CSS视频播放url()通过播放媒体在<video>元素，在绘图播放视频<canvas>元素，并呼吁.toDataURL()设置background元素的data URI在timeupdate的事件<video>元素
<!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>
解决方案5
1 2017-09-24 00:59:18
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() Firefox实现了CSS element()函数，该函数允许例如使用-moz-element()或Document.mozSetImageElement()在background或background-image属性中设置<canvas>元素
The
element()CSS function defines an<image>value generated from an arbitrary HTML element.element()CSS函数定义从任意HTML元素生成的<image>值。 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. 我们可以使用.drawImage()和requestAnimationFrame()来绘制<video>到<canvas>见HTML5：内帆布显示视频 ， 在画布上绘制视频剂，使的实况馈送<video>在例如重放<div>元素CSS background-image属性。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.