1

我正在尝试在可以动态更改的视频上放置一个简单的文本背景。

在我的 html 中，我有：

<div class="row justify-content-center">
    <div id="videoWrapper" class="video-wrapper">
        <video id="videoPlayer" class="azuremediaplayer amp-default-skin"></video>
    </div>
</div>

我发现一些在线代码允许我通过创建 CSS 变量和 svg 元素来静态显示文本。这很好用，在整个视频中重复文本。

:root {
    --videoBackground: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \
    <text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font-size='16'>Background Test</text></svg>");
}

.video-wrapper {
    position: relative;
    width: 1280px;
    height: 960px;
    z-index: 2;
}

.video-wrapper:before {
    content: "";
    position: absolute;
    background-image: var(--videoBackground);
    width: inherit;
    height: inherit;
    z-index: 2;
    opacity: 0.3;
}

然后我尝试使用javascript设置变量。我通过设置使用图像文件对其进行了测试：

document.documentElement.style.setProperty("--videoBackground", "url('/images/test.svg')");

效果很好。

然后我尝试将初始 CSS 值替换为 set 属性。

let newUrlString = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'><text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font size='16' > Background JS Test. </text ></svg >";
let encodedURIString = encodeURI(newUrlString);
document.documentElement.style.setProperty("--videoBackground", "url('" + encodedURIString + "')");

我尝试过使用encodedURIString 和newUrlString，以及使用编码单引号&apos;（因为当我在Chrome 开发工具中查看数据时它们显示为双引号）。我可以看到在 Chrome 的 DOM 树中设置了 --videoBackground，但是当我导航到 videoWrapper div 并检查 :before 元素时，背景图像值始终为无。因此，假设可以做到这一点，我可以使用一些帮助来格式化 newUrlString 并设置属性。

4

0 回答 0