Question

我想在我的网站中嵌入.webm视频。起初我使用.gif，但是我想加快网站访问速度，因此我遵循了Lighthouse的建议在网站中使用.webm。这极大地减小了大小，但是由于Ios / OSX / Safari缺乏支持，我在该设备上显示了.gif。

Chrome上支持Webm，在我的桌面上它可以完美显示。但是，当我在chrome中的android上查看视频时，视频的背景是黑色，而不是透明的。您可以在这里查看它：https://codepen.io/Vendio-Websolutions/pen/jdpveV。我添加了用于不同背景颜色的按钮，以使问题更加清楚。

html

<div class="buttons">
  <button id="blue">Make background blue</button>
  <button id="green">Make background Green</button>
  <button id="red">Make background red</button>
</div>

<div class="video-div">
  <video autoplay="" src="http://vendio.offline/wp-content/uploads/2019/01/webdevelopment.webm" alt="Webdevelopment" muted="" style="background-color: transparent; opacity: 1; filter: blur(0px); z-index: 1; display: inline;"></video>
</div>

css

.buttons {
  display: flex;
}
.buttons button {
  background: black;
  color: white;
  border: none;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}.video-div {
  padding: 30px;
}

js

$("#blue").click(function(){
  $(".video-div").css("background-color", "blue");
});
$("#green").click(function(){
  $(".video-div").css("background-color", "green");
});
$("#red").click(function(){
  $(".video-div").css("background-color", "red");
});

我尝试使用此脚本来检测对透明alpha层的支持：How to (feature) detect if browser supports WebM alpha transparency?。但这只会检测浏览器是否支持.webm而不支持透明性。

有人知道我如何在Android的Chrome上使视频透明。还是有人知道一个脚本来检测是否支持alpha图层？

如何使用不带黑色背景的透明Webm

0 个答案: