爲什麼我可以在css中將gif設置爲背景圖片url（），但無法將視頻mp4設置爲背景url？

爲什麼我可以在css中將gif設置爲背景圖片url（），但無法將視頻mp4設置爲背景url？爲什麼我可以在css中將gif設置爲背景圖片url（），但無法將視頻mp4設置爲背景url？

我嘗試了一切，甚至設置url指向svg，它具有在src屬性中編碼爲base64的外來對象視頻。但是不行。

我不需要視頻bcg作爲html中的視頻元素，我需要的確如此，因爲我可以使用繼承背景和選擇器之前模糊兒童的內容。

2017-09-23 Alexa

你期待視頻時設置爲CSS'網址（）'來播放？ – guest271314

完全是 – Alexa

您可以在繪製視頻播放通過在播放媒體CSS 元素，在<canvas>要素描繪播放視頻，並呼籲.toDataURL()設置元素的background到data URI在事件的<video>元素timeupdate

<!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>

來源

2017-09-23 07:01:21 guest271314

@Alexa您可以用'requestAnimationFrame'代替'timeupdate'事件在CSS url（）函數處繪製'data URI'。 – guest271314

這是驚人的！ TNX！ – Alexa

不幸的是，我只在這個視頻上獲得8fps，在高質量視頻不可播放 – Alexa

CSS背景和背景圖像屬性只接受顏色，漸變，位圖和SVG作爲值。

我們可以創建一個簡單的HTML5視頻元素，並將其放置在容器元素中。海報屬性中使用的圖像將首先顯示，然後在加載時由視頻的第一幀替換。因此，將海報圖像的第一幀視頻用於海報圖像是一種很好的做法。

來源

2017-09-23 06:08:39 JiangangXiong

下面是一些視頻的背景代碼爲我工作：

在html：

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

和CSS：

#video-background { 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 75%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
}

來源

2017-09-23 06:27:04

在BG你應該使用視頻

視頻在html5中標記！

這裏是fullscrean視頻編碼：

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

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

來源：https://slicejack.com/fullscreen-html5-video-background-css/

來源

2017-09-23 06:56:24

的Firefox實現CSS element()功能，它允許例如<canvas>元素設置爲background或background-image屬性使用-moz-element()或Document.mozSetImageElement()

的element() CSS功能定義從任意HTML元件產生一個<image>值。此圖片是實時的，這意味着如果 HTML元素髮生更改，則使用結果值的CSS屬性會自動更新。

我們可以用.drawImage()和requestAnimationFrame()繪製<video>到<canvas>看到html5: display video inside canvas，Drawing video on canvas，這使<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>

來源

2017-09-24 00:59:18 guest271314

我最終用畫布完成了它（支持過濾器）。需要模糊視頻的背景的每個元素都有固定位置的子畫布。在那個畫布上，我每4幀畫一個模糊的圖像。父具有css剪輯路徑屬性，它隱藏掉電，因爲固定位置不允許父級隱藏溢出。 https://miketaylr.com/posts/2015/06/position-fixed-overflow-hidden.html tnx – Alexa

爲什麼我可以在css中將gif設置爲背景圖片url（），但無法將視頻mp4設置爲背景url？

回答

相關問題