Question

我正在重构以下代码：https://github.com/idevelop/predator-vision以在视频上叠加热图（具有任何分辨率和宽高比）。

我有以下html代码：

public function getTotalCryptoBalanceAttribute($value)
{
    return sprintf('%.8f', $value);
}

CSS：

<div id="videos" class="embed-responsive">
    <canvas id="heatmap" class="embed-responsive-item"></canvas>
    <video id="remote-video" autoplay muted playsinline class="embed-responsive-item"></video>
</div>

Javascript：

我正在使用以下方式渲染画布：

#remote-video {
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    /* no letterboxing */
    opacity: 1;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: opacity 1s;
    width: 100%;
}

#remote-video.active {
    opacity: 1;
}

#heatmap {
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    /* no letterboxing */
    opacity: 1;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: opacity 1s;
    width: 100%;
}

#heatmap.active {
    opacity: 1;
    z-index: 1;
}

#videos {
    font-size: 0;
    /* to fix whitespace/scrollbars problem */
    height: 100%;
    pointer-events: none;
    position: absolute;
    transition: all 1s;
    width: 100%;
}

#videos.active {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

最初分别从video.offsetWidth和video.offsetHeight设置canvas.width和canvas.height的地方。

当我渲染此代码时，画布并未完全叠加在视频上。我不确定如何解决此问题。

注意：如果我对视频使用object-fit = fill，则画布似乎可以正确叠加。但是视频是拉长的。

如何使用对象适合封面在HTML5视频上叠加画布？

0 个答案: