Как использовать прозрачный Webm без черного фона - PullRequest
Новая
       60

Как использовать прозрачный Webm без черного фона

0 голосов
/ 13 февраля 2019

Я хочу добавить видео .webm на мой сайт.Сначала я использовал .gif, но я хотел ускорить свой сайт, поэтому я последовал совету Lighthouse, чтобы использовать .webm на моем сайте.Это привело к огромному уменьшению размера, но из-за отсутствия поддержки на Ios / OSX / Safari я показываю .gif на этих устройствах.

Webm поддерживается на Chrome, на моем рабочем столе - отлично.Но когда я смотрю его на Android в Chrome, фон видео черный, а не прозрачный.Вы можете просмотреть его здесь: 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");
});

Я пытался использовать этот скрипт для определения поддержки прозрачного альфа-слоя: Как (функция) определить, поддерживает ли браузер альфа-прозрачность WebM? .Но это только определяет, поддерживает ли браузер .webm, если он не поддерживает прозрачность.

Кто-нибудь знает, как я могу сделать видео прозрачным на Chrome в Android.Или кто-нибудь знает скрипт для определения поддержки альфа-слоев?

...