ダブルバッファリングなしでビデオを背景として再生しますか？

私のウェブサイトにはビデオがありますが、これは主なものです。おそらく、同じビデオを優先的に2回読み込まずに使用して、残りの部分で背景として使用することはできますか？ダブルバッファリングなしでビデオを背景として再生しますか？

_________________ 
| <html>  | 
|  _____  | 
| <video> | 
| </video> | 
|    | 
| Same <video> | 
| as background | 
|    | 
| </html> | 
|_______________|

私はこれがうまく説明が間違っていることを知っていますが、どこから始めるべきかわかりません。私はjQueryが適切なタグのように聞こえたと思ったが、私はそれについてもわからない。私は、通常、彼らが試したことをリンクするだろうが、どこから始めるべきか分からない。私が言ったように、私は非常に多くのことを2回バッファリングすることを望んでいません。私の世界では別の<video>要素を追加しないことを意味しますが、それを何らかの形で反映させるためです。プラグイン、おそらく？

ご指摘いただきありがとうございます。事前に感謝します。

出典

2016-05-31 Algernop K.

timeupdateイベントをvideoとすると、video〜canvas要素の画像をdrawImage()で描画することができます。、ビューポートを覆うようにcanvasを設定するcssvw、vh値を使用canvasのぼかし効果を設定することの両方videoとcanvas要素、blur()値filter性でabsoluteにpositionを設定し、video素子のz-Index未満の評価にcanvasのz-Indexを設定します。

キャンバスデータ上の任意の処理を行っていない場合は、キャンバス上のビデオを引くと、キャンバスのサイズを変更することを忘れないようにrequestAnimationFrameのを使用して

body { 
 
    width: 94vw; 
 
    height: 100vw; 
 
} 
 
video { 
 
    position: absolute; 
 
    z-Index: 1; 
 
    left: 25vw; 
 
} 
 
canvas { 
 
    width: 94vw; 
 
    height: 100vh; 
 
    position: absolute; 
 
    z-Index: 0; 
 
    -webkit-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <video width="300px" height="200px;" src="http://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm" autoplay loop></video> 
 
    <canvas></canvas> 
 
    <script> 
 
    window.onload = function() { 
 
     var video = document.querySelector("video"); 
 
     var canvas = document.querySelector("canvas") 
 
     var ctx = canvas.getContext("2d"); 
 
     video.addEventListener("timeupdate", function(event) { 
 
     ctx.drawImage(this, 0, 0); 
 
     }) 
 
    } 
 
    </script> 
 
</body> 
 
</html>

出典

2016-05-31 02:05:47 guest271314

より良い '' height'プロパティをwidth'andビデオの 'videoWidth'と' videoHeight'プロパティの値に置き換えます。 – Kaiido

@Kaiido遅れた効果が期待されていたか、できるだけ元のものに近いかどうかは確かではありませんでした。定期的な 'timeupdate'イベントによってもたらされる遅延効果はポストで使用されました。 'css'は、' javascript'部分よりも関与しているかもしれません。 _ "とキャンバスの' width'と 'height'プロパティをビデオの' videoWidthand''videoHeight'プロパティの値にリサイズすることを忘れないでください。_ OPは 'canvas'などの方法でビューポート全体を塗りつぶそうとしています。バックグラウンド_ "サイトの残りの部分にバックグラウンドとして（おそらくぼかし効果を加えて）使用しますか？" _そして、ビデオをフォアグラウンドで再生します。 – guest271314

@Kaiido注： 'video：'で 'left：25vw'を使用して、スタックニップセットのビューポートの中央に' video'を配置しました。さらに調整が必要かもしれません – guest271314

ダブルバッファリングなしでビデオを背景として再生しますか？

答えて

関連する問題