#css #svg #mobile-safari #twitch #svg-filters
#css #svg #мобильное сафари #Twitch #svg-фильтры
Вопрос:
Я пытаюсь применить фильтр CSS / SVG к пользовательскому встраиванию видео (twitch API), и поэтому он работает в Chrome, edge и IOS.
Отлично работает в chrome / edge, но в IOS SVG-фильтр не отображается, почему это?
Вот мой код (вы можете запустить на localhost или сайтах Google):
Я включил изображение и две кнопки для применения фильтров отдельно в качестве сплит-теста — фильтры svg отлично работают в IOS, но только для изображения — это как если бы IOS воспроизводила видео в своем собственном специальном проигрывателе (даже когда он воспроизводится «встроенным», чтобы оно не было полноэкранным), вы знаете, как отключить это или применить к нему фильтр?
Заранее благодарю вас.
<html lang="en" style="overflow: visible;">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
<style type="text/css">
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 30px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
</style>
</head>
<body style="overflow: visible;">
<div>
<div id="all" style="height: 100%; width: 100%; overflow: visible; min-height: 11vw; min-width: 20vw;">
<!-- Add a placeholder for the Twitch embed -->
<div id="whole-embed" style="height: 100%; width: 100%; border: 1px solid black; border-radius: 5px; position: relative; overflow: visible;">
<div id="twitch-embed-container">
<div id="twitch-embed"></div>
</div>
<!-- Add buttons below the twitch embed -->
<div class="playpausecontrols" style="height:30px; grid-template-columns: 1fr 1fr; grid-gap: 20px; position: absolute; bottom: 3%; left: 3%; z-index: 10; border-radius: 5px;">
<i class="material-icons" onclick="playVid();" title="Play" style="color: green; text-align: center; display: inline-block; cursor: pointer;">play_arrow</i>
<i class="material-icons" onclick="pauseVid();" title="Pause" style="color: green; text-align: center; display: inline-block; cursor: pointer;">pause</i>
</div>
<div class="zoomcontrols" style="height:30px; grid-template-columns: 1fr 1fr; grid-gap: 20px; position: absolute; bottom: 3%; right: 3%; z-index: 10; border-radius: 5px;">
<p style="font-size: 0.7vw; color: white; text-align: left; display: inline-block;">PRESS F11 FOR FULL SCREEN</p>
<i class="material-icons" onclick="zoomin();" title="Bigger" style="color: green; text-align: center; display: inline-block; cursor: pointer;">zoom_in</i>
<i class="material-icons" onclick="zoomout();" title="Smaller" style="color: green; text-align: center; display: inline-block; cursor: pointer;">zoom_out</i>
</div>
</div>
</div>
<div id="testdiv"
style="position:relative; z-index: 10; background: black url('https://homepages.cae.wisc.edu/~ece533/images/airplane.png'); height: 20vw; width: 20vw;">
</div>
<button id="mybutton">Photo Filter: <span id="mybuttonspan">none</span></button>
<button id="mybutton2">Video Filter: <span id="mybuttonspan2">none</span></button>
</div>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript">
var options = {
width: "100%",
height: "100%",
controls: "false",
autoplay: "false",
muted: "true",
theme: "light",
allowfullscreen: "true",
channel: "ourchickenlife",
preload: "auto",
scrolling: "no",
parent: ["sites.google.com", document.domain, "gstatic.com", "www.gstatic.com"]
};
var player = new Twitch.Player("twitch-embed", options);
</script>
<script type="text/javascript">
/* get element you want to pause and play */
var vid = document.getElementById("twitch-embed");
/* call funtion as specified in earlier twitch.js API */
function pauseVid() {
player.pause();
}
function playVid() {
player.play();
}
</script>
<script type="text/javascript">
var divall = document.getElementById("all");
var factor = 0.2;
function zoomin() {
var heightname = divall.clientHeight;
var widthname = divall.clientWidth;
var addheight = factor * heightname;
var addwidth = factor * widthname;
var heightcapture = heightname addheight;
var widthcapture = widthname addwidth;
divall.style = "height: " heightcapture "px; width: " widthcapture "px; overflow: visible; min-height: 11vw; min-width: 20vw;";
}
function zoomout() {
var heightname = divall.clientHeight;
var widthname = divall.clientWidth;
var addheight = factor * heightname;
var addwidth = factor * widthname;
var heightcapture = heightname - addheight;
var widthcapture = widthname - addwidth;
divall.style = "height: " heightcapture "px; width: " widthcapture "px; overflow: visible; min-height: 11vw; min-width: 20vw;";
}
</script>
<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurEffect">
<feGaussianBlur stdDeviation="4"/>
</filter>
<filter id="turbulence">
<feTurbulence baseFrequency=".01" type="fractalNoise" numOctaves="3" seed="23" stitchTiles="stitch"/>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10,3" result="outBlur"/>
</filter>
<filter id="inverse">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
<filter id="convolve">
<feConvolveMatrix order="3" kernelMatrix="1 -1 1 -1 -0.01 -1 1 -1 1" edgeMode="duplicate" result="convo"/>
</filter>
<filter id="convoblur">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
<feConvolveMatrix order="3" kernelMatrix="1 -1 1 -1 -0.01 -1 1 -1 1" edgeMode="none" result="convo"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="convo"/>
</feMerge>
</filter>
<filter id="blackandwhite">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
<filter id="convolve2">
<feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/>
</filter>
<filter id="myblur">
<feGaussianBlur stdDeviation="1"/>
</filter>
<filter id="myconvolve">
<feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/>
</filter>
<filter id="noir">
<feGaussianBlur stdDeviation="1.5"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1 1"/>
<feFuncG type="discrete" tableValues="0 .5 1"/>
<feFuncB type="discrete" tableValues="0"/>
</feComponentTransfer>
</filter>
</defs>
</svg>
<script type="text/javascript"> <!--script one for photo -->
var video = document.getElementById("testdiv"),
button = document.getElementById("mybutton"),
current = document.getElementById("mybuttonspan"),
filters = ['blur','inverse','convolve','convoblur','convolve2','blackandwhite','noir'],
i = 0;
button.addEventListener('click',function(){
current.innerHTML = filters[i];
video.style.webkitFilter='url(#' filters[i] ')';
video.style.mozFilter='url(#' filters[i] ')';
video.style.filter='url(#' filters[i] ')';
i ;
if (i>=filters.length) i=0;
}, false);
</script>
<script type="text/javascript"> <!--script two for video -->
var video1 = document.getElementById("twitch-embed"), <!--experiment changing this to different elements of video player-->
button1 = document.getElementById("mybutton2"),
current1 = document.getElementById("mybuttonspan2"),
filters = ['blur','inverse','convolve','convoblur','convolve2','blackandwhite','noir'],
i = 0;
button1.addEventListener('click',function(){
current1.innerHTML = filters[i];
video1.style.webkitFilter='url(#' filters[i] ')';
video1.style.mozFilter='url(#' filters[i] ')';
video1.style.filter='url(#' filters[i] ')';
i ;
if (i>=filters.length) i=0;
}, false);
</script>
</body>
</html> Комментарии:
1. Я не думаю, что Safari поддерживает SVG-фильтры для HTML-элементов. Это делают только Chrome и Firefox.
2. @RobertLongson спасибо, хорошо, это позор, интересно, есть ли альтернатива