ビデオプレーヤー用のメディアコントロールバーを作成し、背景をぼかすようにします。現在、私はガラスのような外観を得ることができますが、私は動作するようにぼかしを取得することはできません。 私はこのガイドに従って試しました：https://medium.com/@AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91しかし、それは静的な画像でのみ動作するようです。ここでダイナミックビデオ上の曇ったガラス効果
は、私が何をしたいの例です：
私も完璧に見えるが、私はそれを使用することはできませんので、それはサファリにのみ安定してWebKitの背景・フィルタを見ました。ダイナミックビデオの曇りガラスのアドバイスはありますか？
動画の下部をcanvasのフレームにコピーし、CSSでcanvasをぼかすことで、これを達成できました。 Chromeではうまくいくようですが、Firefoxでは時折点滅します。 canvasの中でプログラム的にぼかしを実行すると、Superfast Blurのようになるかもしれませんが、これはもう一日の実験です。明日、おそらく。
function initControls (player, blurRadius, controlHeight, videoWidth, videoHeight) {
// crop player to video size
let video = player.querySelector('video');
videoWidth = videoWidth || video.clientWidth;
videoHeight = videoHeight || video.clientHeight;
player.style.width = videoWidth + 'px';
player.style.height = videoHeight + 'px';
// crop control bar to video size
let controlBar = player.querySelector('.control-bar');
controlBar.style.width = videoWidth + 'px';
controlBar.style.height = controlHeight + 'px';
// canvas needs to be slightly taller than what gets displayed
// to blur cleanly
let canvas = player.querySelector('canvas');
canvas.width = videoWidth;
canvas.height = 2 * blurRadius + controlHeight;
canvas.style.filter = `blur(${blurRadius}px)`;
canvas.style.top = -2 * blurRadius + 'px';
// copy video to canvas
let ctx = canvas.getContext('2d');
let videoCropY = videoHeight - canvas.height;
function updateCanvas() {
ctx.drawImage(
video,
0, videoCropY, canvas.width, canvas.height,
0, 0, canvas.width, canvas.height
);
}
// update the canvas only when necessary
let hovering = false;
function renderLoop() {
updateCanvas();
if (hovering && !video.paused) {
window.requestAnimationFrame(renderLoop);
}
}
// no point in rendering to a canvas you can't see
player.addEventListener('mouseenter',() => {
hovering = true;
renderLoop();
});
player.addEventListener('mouseleave',() => { hovering = false; });
video.addEventListener('play', renderLoop);
}
document.addEventListener('DOMContentLoaded', event => {
// do the magic
initControls(document.querySelector('.player'), 4, 50, 320, 240);
// basic play button functionality
document.querySelector('.play-button').addEventListener('click', event => {
let v = event.target.closest('.player').querySelector('video');
if (v.ended) v.currentTime = 0;
if (v.paused) {
v.play();
} else {
v.pause();
}
});
});/* styling required for blurred control background */
.player {
position: relative;
}
.player > video {
margin: 0;
display: block;
}
.control-bar > canvas {
margin: 0;
display: block;
left: 0;
position: absolute;
}
.control-bar {
margin: 0;
overflow: hidden;
position: absolute;
bottom: 0;
/* height of control bar is specified in javascript, sorry about that */
}
/* simple control-hiding mechanism; other methods also work */
/* javascript relies on mouseover and mouseout to decide whether to update canvas */
.player > .control-bar {
display: none;
}
.player:hover > .control-bar {
display: block;
}
/* styling actual controls; adjust to taste */
.play-button {
height: 30px;
line-height: 30px;
width: 100px;
color: white;
border: 1px solid white;
position: absolute;
top: 10px;
left: 50%;
margin-left: -50px;
text-align: center;
}<div class="player">
<video src="https://archive.org/download/MedicalA1950/MedicalA1950_512kb.mp4"></video>
<div class="control-bar">
<canvas></canvas>
<div class="play-button">PLAY/PAUSE</div>
</div>
</div>
私はこれと同じことにいくつかの研究を行なったし、それは事実上不可能だと結論付けました。すべての曇ったガラスのデモは、参照画像を使用してぼかしを行います。バックドロップフィルターがサポートされるのを待たなければなりません。もし誰かが私を間違っていると証明できるなら、私はそれを愛するでしょう。 –
ええ、静かな解決策を見つけようと数時間をかけています。それは驚くべきことですが、それはかなり一般的な感じです –