Videa v Chrome



Dobrý den, v prohlížeči Chrome se mi občas stane takový nešvar. Když dám přehrávání videa na celou obrazovku (např. youtube.com, nebo stream.cz) tak se mi někdy vide zvětší pouze takto (<https://ctrlv.cz/1Gc4>). Děje se to naprosto náhodně u jakýchkoliv videí. Neví někdo, co by to mohlo způsobovat? Děkuji
zrejme chyba v Chrome, občas sa to stane aj mne..ale pomôže reštart prehliadača
Jen aby spíše než stručnou odpověď komentář: Toto chování závisí jak na přehrávači, který používáte, a na grafické kartě. Co se stane, je následující:


1. Přehrávač videa plní svou videa okno s jediným, barvy bytu. Obvykle to bude buď světlé růžové nebo něco podobného, ​​ale ne přesně, černé. Myšlenka je vybrat si barvu, která není pravděpodobné, že se objeví kdekoli jinde na obrazovce.
2. Přehrávač videa instruuje akcelerační čip na grafické kartě pro přehrání videa, ale jeho zobrazení pouze na části obrazovky, které mají ten přesnou barvu. K dosažení tohoto cíle, je technika nazývá „překrytí“ je používán, který efektivně umožňuje grafickou kartu „překryvné“ video obsahu na libovolnou část obrazovky, která je vyplněna s tímto konkrétním barvou.


Teď, když se snímek přehrávače, zatímco způsob, jak hrát, co máte, je obraz, který obsahuje velký jednotný vyplnit kde je video má být. Máte-li zobrazit tento snímek obrazovky při přehrávání videa, bude grafická karta nebude schopen rozeznat rozdíl mezi barvou v rámci přehrávače a obrazovky to. Bude to jen nahradit tuto barvu s obrazem.


Můžete se bavit s tímto chováním ze strany výkresu na obrázku. Ať už jste čerpal se zdají být vypracovány v horní části obrazu, protože video zobrazuje pouze tam, kde na obrazovce má přesné barvy používané video přehrávač. <p>nezapomeňte, že zatímco monitor může být větší než 800x600, okno prohlížeče nemusí být na celou obrazovku.</p><p>například běžím na monitorech lcd s rozlišením 1600x1200 (stále poměrně velké), ale mé okno prohlížeče je přibližně 1100x1200 (přibližně).</p><p>musíte se tedy podívat na nejběžnější rozlišení <em>prohlížeč</em>, nikoli na nejběžnější rozlišení <em>obrazovka</em>.</p> <p>ve skutečnosti všechny odkazy procházejí přesměrováním google. zkontrolujte, zda používáte prohlížeč firebug nebo dev tools v prohlížeči chrome. uvidíte, že adresy url jsou něco jako <code>/url?sa=t&amp;source=web&amp;cd=11&amp;ved=0cbgqf....</code> předpokládám, že používají nějakou formu javascriptu, aby prohlížeč ukázal skutečnou adresu url ve stavovém řádku.</p> že je to ošklivější mi nevadí. Ale že je horší funkčnost, obslužnost, to je k zamyšlení, proč autoři jdou touto cestou.
Na velkém monitoru PC skoro nepoužitelné, takže jediná možnost je si okno prohlížeče zmenšit do středu monitoru. Snad se ozve dost lidí, aby to vrátili zpátky, případně vyřešili svůj záměr jinak než zhoršením obslužnosti pro uživatele PC. <p>každé video youtube má 4 vygenerované obrázky. jsou předvídatelně formátovány následovně:</p><pre class="lang-none prettyprint-override"><code>https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/0.jpg https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/1.jpg https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/2.jpg https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/3.jpg </code></pre><p>první v seznamu je obrázek v plné velikosti a další jsou miniatury obrázků. výchozí obrázek miniatury (tj. jeden z <code>1.jpg</code>, <code>2.jpg</code>, <code>3.jpg</code>) je:</p><pre class="lang-none prettyprint-override"><code>https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/default.jpg </code></pre><p>pro vysoce kvalitní verzi miniatury použijte adresu url podobnou tomuto:</p><pre class="lang-none prettyprint-override"><code>https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/hqdefault.jpg </code></pre><p>k dispozici je také verze miniatury střední kvality, která používá adresu url podobnou hq:</p><pre class="lang-none prettyprint-override"><code>https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/mqdefault.jpg </code></pre><p>pro verzi miniatury standardního rozlišení použijte adresu url podobnou této:</p><pre class="lang-none prettyprint-override"><code>https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/sddefault.jpg </code></pre><p>pro verzi miniatury s maximálním rozlišením použijte adresu url podobnou tomuto:</p><pre class="lang-none prettyprint-override"><code>https://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/maxresdefault.jpg </code></pre><p>všechny výše uvedené adresy url jsou také k dispozici přes http. navíc, o něco kratší jméno hostitele <code>i3.ytimg.com</code> funguje místo <code>img.youtube.com</code> v příkladu adresy url výše.</p><p>alternativně můžete použít <a href="https://developers.google.com/youtube/v3/">youtube data api (v3)</a> pro získání náhledů obrázků.</p> <p>dával jsem přednost rozvržení tekutin, protože jsem chtěl, aby surfaři využili větších monitorů, když stiskli ctrl - <strong> +</strong> (nebo cmd - <strong> +</strong>) pro zvětšení písma velikost. kdysi dávno, asi v roce 2008, stránky s pevnou šířkou vypadaly opravdu špatně, když stisknete ctrl - <strong> +</strong>, protože nic jiného se nezvýšilo - tabulky a div zachovaly stejnou šířku a text přetékal jim.</p><p>u současných prohlížečů však stisknutí ctrl - <strong> +</strong> nyní funguje spíše jako „zvětšení“ než „zvětšení velikosti písma“: celá stránka je proporcionálně a pěkně zvětšena. v současné době dávám přednost:</p><ul> <li> <p><strong> používá se šířka tekutiny</strong> pro stránky, kde se zobrazují data podobná mřížce nebo tabulce nebo jiné informace. klíčovým rozhodujícím faktorem je to, zda uživatel uvidí více informací, když zvětší okno prohlížeče. zmínili jste mapy google, reader a gmail, všechny vynikající příklady imo aplikací, u nichž má uživatel užitek z větší obrazovky.</p> </li> <li> <p><strong> používání pevné šířky</strong> stránek pro popisné stránky nebo jakoukoli stránku, jejíž velikost se změnila, prohlížeč nebude mít za následek zobrazení dalších informací. příklady jsou tato velmi stackexchange stránka a <a href="http://www.apple.com/imac/">apple imac</a> stránka.</p> </li> </ul><p>fwiw, zjistil jsem, že navrhování šířky tekutiny má větší potíže než hodnota popisných stránek.</p> <p>obecně se mi nelíbí hudba na pozadí na webu. zpomaluje dobu načítání, překvapuje uživatele, kteří mají zapnuté reproduktory a jejich nepříjemné. je to podobné blikajícímu textu na webové stránce.</p><p>jediný čas, který mi dává smysl, je pro web o hudbě nebo pro skupinu. pak to lze očekávat.</p><p>lepším řešením je, aby na vás webová stránka, jako je @aslum, navrhl, aby si lidé mohli vybrat, zda budou vaši hudbu hrát, nebo ne.</p> Vypněte si v nastavení zvuková cvičení (reproduktor). Pokud nevíte jak, napište váš OS, prohlížeč, zařízení. <p><em> aktualizovat: chrome 58+ skryl tyto a další ladicí zprávy ve výchozím nastavení. chcete-li je zobrazit, klepněte na šipku vedle položky „info&ldquo; a vyberte položku „verbose&ldquo;. </em></p><p><em> aktualizace 2: chrome 57 je ve výchozím nastavení zapnut. chcete-li je znovu zapnout, musíte povolit filtry a zrušit zaškrtnutí políčka „skrýt porušení&ldquo;. </em></p><blockquote> <p>najednou se objeví, když se do projektu zapojí někdo jiný</p> </blockquote><p>myslím, že je to více pravděpodobné, že jste aktualizovali na chrome 56. toto varování je (imo) báječná nová funkce - prosím, vypněte ji pouze v případě, že jste zoufalí a váš hodnotitel vás odtrhne. základní problémy jsou v jiných prohlížečích, ale prohlížeče vám neříkají, že je problém. vstupenka chromium je zde, ale na ní není žádná zajímavá diskuse: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=662497">https://bugs.chromium.org/p/chromium/issues/detail?id=662497</a> </p><p>tyto zprávy jsou varování namísto chyb, protože to opravdu nebude způsobovat velké problémy. to může způsobit upuštění rámců nebo jinak způsobit méně hladký zážitek.</p><p>stojí za to prozkoumat a upevnit, aby se zvýšila kvalita vaší aplikace. způsob, jak toho dosáhnout, je věnovat pozornost okolnostem, ve kterých se zprávy zobrazují, a provádět testování výkonu, aby se zúžit, kde se problém vyskytuje. nejjednodušším způsobem, jak spustit testování výkonu, je vložit nějaký kód takto:</p><pre><code>function somemethodithinkmightbeslow() { const starttime = performance.now(); // do the normal stuff for this function const duration = performance.now() - starttime; console.log(`somemethodithinkmightbeslow took ${duration}ms`); } </code></pre><p>chcete-li být pokročilejší, můžete také použít profiler chrome: <a href="https://developers.google.com/web/tools/chrome-devtools/rendering-tools/">https://developers.google.com/web/tools/chrome-devtools/rendering-tools/</a> </p><p>nebo použijte knihovnu benchmarking, jako je tato: <a href="https://benchmarkjs.com/">https://benchmarkjs.com/</a> </p><p>jakmile najdete nějaký kód, který trvá dlouhou dobu (50 ms je práh chrome), máte několik možností:</p><ol> <li>vystřihněte některé z těchto úkolů, které mohou být zbytečné</li> <li>zjistěte, jak dělat stejný úkol rychleji</li> <li>rozdělte kód do několika asynchronních kroků</li> </ol><p>(1) a (2) může být obtížné nebo nemožné. ale někdy je to opravdu snadné a měly by to být vaše první pokusy. v případě potřeby by mělo být vždy možné (3). k tomu budete používat něco jako</p><pre><code>settimeout(functiontorunverysoonbutnotnow); </code></pre><p>nebo</p><pre><code>// this one is not available natively in ie, but there are polyfills available. promise.resolve().then(functiontorunverysoonbutnotnow); </code></pre><p>více o asynchronní povaze javascriptu si můžete přečíst zde:</p><p> <a href="http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/">http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/</a> </p> <p>html5 je nyní podporován všemi prohlížeči, dokonce i ie5! (pokud používáte skript html5shiv). velmi doporučuji přečíst <a href="http://diveintohtml5.org">http://diveintohtml5.org</a> je to jeden z nejlepších zdrojů html5.</p><p>pokud jde o css3, pokud ji používáte, nezapomeňte použít i předvolbu dodavatele, kromě pravidelné syntaxe. např.</p><p>poloměr hranic</p><p>-moz-border-radius</p><p>-webkit-border-radius</p><p>věřím v progresivní vylepšení. podpora ie9 css3 zní velmi slibně.</p>