私はgssをCSSの背景画像url（）に設定できますが、ビデオmp4を背景URLに設定できないのはなぜですか？なぜ私はgssをCSSの背景画像url（）に設定できますが、背景mp4は背景URLとして設定できません。
私はsrc属性でbase64としてエンコードされた外部オブジェクトビデオを持つsvgを指すようにURLを設定しても、すべてを試しました。しかし、動作しません。
私はhtmlのビデオ要素としてビデオbcgは必要ありません。私はちょうど私が背景を継承し、セレクタの前を使って子供のコンテンツをぼかすことができるので、正確に必要です。
あなたがでビデオの再生を描くことができ、ここで
はfullscreanビデオコードでありますCSSurl()でメディアを再生する要素、
<canvas>要素で再生中の映像を描画し、要素
<!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>@Alexa代わりに、 'timeupdate'イベントの代わりに' requestAnimationFrame'を使って、 'url（）'関数で 'data URI'を描画することができます。 – guest271314
これは素晴らしいです！ tnx！ – Alexa
悲しいことに、このビデオでは8fpsしか得られませんが、高画質のビデオは再生できません – Alexa
CSSの背景と背景画像のプロパティは、色、グラデーション、ビットマップ、SVGのみを値として受け入れます。
シンプルなHTML5ビデオ要素を作成し、コンテナ要素内に配置できます。ポスター属性で使用されている画像が最初に表示され、動画が読み込まれると最初のフレームに置き換えられます。したがって、ビデオの最初のフレームをポスター画像に使用することをお勧めします。
ここでは私のために働いたいくつかのビデオの背景コードです：
を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;
}
ビデオのためにあなたがビデオを使用する必要がありBGには html5のタグ！
<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/
のFirefoxは、例えば、Aが可能になりますCSS element()機能を実装<video>のtimeupdateイベントでdata URIに要素のbackgroundを設定する.toDataURL()を呼び出します<canvas>要素をbackgroundまたはbackground-imageプロパティに設定する場合は、-moz-element()またはを使用します10
element()CSS機能は、任意のHTML要素から 発生<image>値を定義します。この画像はライブです。つまり、 のHTML要素が変更された場合、結果として得られる の値を使用するCSSプロパティが自動的に更新されます。
我々は<canvas>に<video>を描画する.drawImage()とrequestAnimationFrame()を使用することができます<div>要素のCSSプロパティbackground-imageたとえばで<video>再生のライブフィードをレンダリングhtml5: display video inside canvas、Drawing video on canvasを参照してください。
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>私は最終的にキャンバスでそれをやった（フィルターをサポートしている）。ビデオである背景をぼかす必要があるすべての要素には、位置が固定された子キャンバスがあります。そのキャンバス上で、4フレーム毎にbluredイメージを描画します。親にはオーバーフローを隠すことができないので、owerflowを隠すCSSのクリップパスプロパティがあります。 https://miketaylr.com/posts/2015/06/position-fixed-overflow-hidden.html tnx – Alexa
あなたは '）CSS' URL（に設定した場合、映像が再生されることを期待していますか？ – guest271314
はい正確に – Alexa