Autor Zpráva
David11
Profil
Dá se nějak zařídit, aby náhled měl jinou velikost než po kliknutí přehrávané <video>?
Keeehi
Profil
David11:
Můžeš si nad video dát obrázek s náhledem a ten na kliknutí odstranit a spustit video. Ten obrázek samozřejmě může pak být úplně libovolný.
David11
Profil
Keeehi:
Díky. Čili jen nějakou "fintou" v html to nejde a musí se to udělat javascriptem?
To video má pak být větší (náhled v obrázku menší než video). Myslíš to tak, že do odkazu obrázku dát spuštění funkce, která obrázek odstraní, místo něj vloží video, kterému nastavím automatické přehrávání?
Jak se pak ale, po ukončení přehrávání videa, to video odstraní a vrátí tam ten obrázek? Nebo to celé chápu úplně špatně?
N71
Profil *
Tag <video> má mimo jiné i vlastnost "poster", která slouží přesně k tomuto (custom obrázkový náhled). Žádných scriptů pak netřeba.
Keeehi
Profil
David11:
U tagu video existuje atribut poster kterým se dá nastavit nějaký obrázek. Ale to je vše. Jinou velikost než video mít nemůže. Pokud chceš dělat nějaké blbosti s velikostí, pak k tomu budeš potřebovat javascript. Co se týká konkrétní implementace, tak to záleží, čeho tím chceš dosáhnout. Ten obrázek je možné odstranit, zprůhlednit, odsunout, schovat za video, skrýt. Možností je spousta, je potřeba vybrat tu, která bude vhodná pro tvé potřeby.
David11
Profil
Keeehi:
Díky za odpověď. Odstranit video bych uměl - nevím ale jak se "dostat k lizu" poté, co to video dohraje. Čili kód, kterým to video odstraním, bych napsat zřejmě uměl, nevím ale jak zařídit, aby se v pravý okamžik (tzn. po skončení přehrávání videa) spustil.


Keeehi:
... ještě doplňuji, že jsem si tu funkčnost představoval nějak zhruba takto:
- po načtení stránky se zobrazuje malý náhled (to umím).
- po kliknutí na ten náhled se náhled odstraní, vloží se video, které se začne přehrávat (to bych snad také měl umět).
- pokud uživatel klikne na pauzu, video se jen pauzne a nic dalšího se neděje
- pokud uživatel video vypne (tzn. ne jen pauzne, ale zcela zruší jeho přehrávání) nebo se video přehraje celé, vrátí se tam ten náhled (to neumím, resp. neumím odchytnout tu událost, že video bylo vypnuto nebo že dohrálo).
David11
Profil
Narazil jsem ještě na jeden problém s tagem <video> - mohl byste mi prosím někdo poradit?
Jak přinutit Chrome, aby reagoval na autoplay? IE začne v pohodě po načtení stránky přehrávat, Chrome ne. Dá se ho k tomu nějak přimět?
Keeehi
Profil
David11:
resp. neumím odchytnout tu událost, že video bylo vypnuto nebo že dohrálo
https://developer.mozilla.org/en-US/docs/Web/Events/ended

Jak přinutit Chrome, aby reagoval na autoplay?
To je trochu problém. Protože videa ne webu mohou být otravná (zejména třeba u reklam), některé prohlížeče se rozhodly blokovat automatické přehrávání multimediálního obsahu a vyžadují uživatelskou interakci nebo splnění jiné podmínky. Zdroj
David11
Profil
Keeehi:
Díky. Jasně, autoplay si buď uživatel povolí nebo mám smůlu (tedy snad jsem pochopil dobře, že z důvodu ochrany uživatele neexistuje metoda jak mu to zapnutí "vnutit").
K tomu odchytávání událostí - obávám se, že jsem zase (stejně jako u toho přehrávání víc videí najednou - nevím, jestli jsi to zaregistroval, ale to téma bylo přesunuto do sekce javascript) - že jsem tedy zase narazil na to, že se mi zatím nepodařilo proniknout do specifik javascriptu (mám zkušenosti s c++ a připadá mi, že některé javascriptové "finty" jsou naprosto nepochopitelné). Neporadil bys mi prosím ještě něco, co by mě trochu "nakoplo" k pochopení těch pro mě nepochopitelných specifik (v tomhle konkrétním případě jak pracovat s událostmi) javascriptu? Díky.
Keeehi
Profil
David11:
Neporadil bys mi prosím ještě něco, co by mě trochu "nakoplo" k pochopení těch pro mě nepochopitelných specifik (v tomhle konkrétním případě jak pracovat s událostmi) javascriptu?
Záleží, zda jsi někdy v c++ vytvářel vícevláknovou aplikaci a zažil asynchronnost. Javascript je silně asynchronní, obzvlášť právě v obsluze událostí.

document.getElementById("identifacator").addEventListener("event", function(){
    // some code
});

Události jsou navázané na elementy, zjednodušeně řečeno na html tagy. Událostí existuje celá řada a když nastanou a daný element má nadefinovanou obsluhu dané události, tak se provede. V kódu document.getElementById("identifacator") vybere element s daným id. Můžeš použít i jiné metody výběru elementu, musíš ho ale vždy nějak získat. addEventListener přidává posluchače událostí na daný element. První parametr určuje událost (v tvém případě by tam mělo být ended) a druhý zase funkci co se má vykonat. Může to být anonymní funkce jako je v kódu, nebo jméno dané funkce, nebo další nyní nepodstatné možnosti. Jde jen o to, aby to bylo něco, co se dá zavolat. V řeči c++, funkce addEventListener jako druhý parametr očekává pointer na funkci. Důležité je, že se tato funkce nevykoná hned, ale až ve chvíli, kdy daná událost nastane. Pokud nastane vícekrát, funkce se zavolá vícekrát. Může se i stát, že daná funkce ještě nestihne doběhnout a událost nastane znovu. V tom případě původní funkce běží normálně dál a nová se ihned spouští. Takže obě dvě běží paralelně vedle sebe. Právě tady dochází k té na začátku zmiňované asynchronnosti.
David11
Profil
Keeehi:
Díky, zkusím se tím příští týden trochu "prokousat" a snad se posunu o kus dál...
Mimochodem - zjistil jsem, že Chrome, pokud tomu autoplay videu zamutuju zvuk, to video spustí - čili zdá se, že pro spuštění videa bez zvuku uživatelskou interakci nevyžaduje - vyžaduje ji jen pro samotné puštění zvuku. Což mi naprosto stačí.
Keeehi
Profil
David11:
zjistil jsem, že Chrome, pokud tomu autoplay videu zamutuju zvuk, to video spustí
Ano. Kompletně je to popsané v tom odkazu na konci v [#8].
David11
Profil
Keeehi:
Díky. Neporadil bys mi prosím ještě s těmito dvěmi věcmi? :
- Existuje v javascriptu nějaká funkce, která by zjistila zda prohlížeč podporuje nebo nepodporuje určitou vlastnost? Konkrétně mi jde o tag <video>. Jde mi ale o funkci, která by vrátila true / false podle toho, zda ten tag v určitém prohlížeči funguje nebo ne, nikoli o zobrazení alternativního obsahu při použití toho tagu.
- A druhá věc: Naivně jsem se domníval, že když v tagu img funguje style="border-color:#FFFFFF" border="2", bude to fungovat i v tagu video. Proč to tam nefunguje, resp. dá se i videu nějak zadat rámeček?
Keeehi
Profil
David11:
Existuje v javascriptu nějaká funkce, která by zjistila zda prohlížeč podporuje nebo nepodporuje určitou vlastnost?
ryanmorr.com/determine-html5-element-support-in-javascript

Proč to tam nefunguje, resp. dá se i videu nějak zadat rámeček?
CSS funguje v pořádku. Živá ukázka. Tedy alespoň na mém mobilu. Pokud by to byl problém někde jinde, můžeš to obalit nějakým jiným elementem a rámeček nastavit jemu.
David11
Profil
Keeehi:
Díky moc, obě věci fungují přesně jak potřebuju.
Poradil bys mi prosím ještě s následujícím? Je korektní toto? :
var sirka = 300;
var elem = document.getElementById("IDECKO"); 
if (elem) elem.width = sirka; // zde v reálném případě nechci natvrdo nastavovat "300", ale hodnotu před tím nějak spočtenou.
Zdá se, že to funguje, ale začínám být trochu "předstrašený" tím, jak vždycky něco vyzkouším, ono se zdá, že to funguje - a pak zjistím, že to funguje jen nějakou de facto náhodou - tzn. jen zrovna v tom prohlížeči, ve kterém jsem to vyzkoušel a v jiných to nefunguje. Tzn. ptám se zřejmě na to, zda se ta šířka v té proměnné korektně přetypuje na "300"? - snad ano - našel jsem si zde Proměnné, že se v javascriptu proměnné přetypovávají automaticky... Čili ten výše uvedený příklad by měl fungovat bezpečně?... Ale dá se spolehnout i na to, že se korektně přetypuje i dopočtené číslo, které není celé? Tzn. když do něčeho, co např. přepokládá počet pixelů, přiřadím např. 179.364454456464764, které jsem předtím dopočetl? - zkoušel jsem to, jak jsem zvyklý z céčka, přetypovávat pomocí (int), ale to nefunguje vůbec... mohu se opravdu (v případě přetypovávání) spolehnout na to, že "nic se nepřetypovává a vše funguje"?
Keeehi
Profil
David11:
Je korektní toto?
Ano. To co jsi napsal funguje v pořádku.

Tzn. ptám se zřejmě na to, zda se ta šířka v té proměnné korektně přetypuje na "300"
Žádné přetypování ale v tomto případě není potřeba.

Ale dá se spolehnout i na to, že se korektně přetypuje i dopočtené číslo, které není celé?
Standard definuje, že hodnota atributu width má být celé nezáporné číslo. Podle definice se na to tedy spolehnout nemůžeš. Jenže v kódu se to vyskytnout může a prohlížeč se musí rozhodnout, co s tím bude dělat. Mohl by třeba přerušit vykonávání scriptu úplně, ale mnohem jednodušší a méně invazivní řešení je to nějak zaokrouhlit a pokračovat dál. Prohlížeče jsou dělány tak, aby se snažily opravovat chyby v kódu, takže to nějak fungovat bude. Chování by mělo být zaručené pouze pokud vyhovíš standardu, pokud ne, může se v takových případech chování prohlížečů lišit. Například to desetinné číslo může každý zaokrouhlit jiným způsobem a ve výsledku se tedy šířka může o jeden pixel lišit. Pokud chceš mít jistotu, zaokrouhli si desetinné číslo sám.

if (elem) elem.width = Math.floor(sirka); // zaokrouhlení vždy dolů (to co C udělá při přetypování floatu na int)
if (elem) elem.width = Math.round(sirka); // zaokrouhlení jak to znají děti ze školy
if (elem) elem.width = Math.ceil(sirka);  // zaokrouhlení vždy nahoru
David11
Profil
Keeehi:
Díky moc, už mi to snad začíná být trochu jasnější.
(To "300" v přirazení té html vlastnosti není řetězec, ale int, který ale je zadán v uvozovkách kvůli synaxi html, ne kvůli tomu, že by to byl řetězec, chápu to tak snad správně, že jo...)

Jinak co se týče toho zda prohlížeč podporuje nebo nepodporuje určitou vlastnost - nakonec jsem ještě zjistil, že ta funkce, na kterou jsi napsal v [#14] odkaz, mi v IE8 nefunguje. V tom odkazu píšou, že místo HTMLUnknownElement IE8 a nižší používají HTMLGenericElement. Řekl bych ale, že to není pravda - má zkušenost je, že IE8 na jakýkoli element (tzn. takový, který určitě zná nebo i takový, který určitě nezná) vrací vždy jen [object Object] a nic jiného, čili ta testovací funkce mi pak v IE8 vrací, že je podporován úplně KAŽDÝ tag - vůbec to Object.prototype.toString.call(element) nereaguje na to, z jakého tagu ten element vzniknul. Protože jsem ale chtěl mít jistotu, že když mi ta funkce vrátí, že tag je podporován, tak aby skutečně BYL podporován (a oželím holt to, že to třeba jen neumí zjistit, ale třeba ho i podporuje - a já se k tomu v tomto případě holt budu chovat jako kdyby ho nepodporoval) - upravil jsem si ten kód takto (a tam, kde se potřebuji rozhodnout zda prohlížeč nějaký tag zná nebo nezná se tedy teď rozhoduji podle funkce JeElementPodporovanAZarovenToUmisZjistit) :

function JeElementPodporovan(tag)
{
  var element = document.createElement(tag);
  return Object.prototype.toString.call(element) != '[object HTMLUnknownElement]'; //!==
}
function JeElementPodporovanAZarovenToUmisZjistit(tag)
{
  if (JeElementPodporovan("uskvfjrvnjg")) // nesmysl ktery urcite neni platny tag
    return false; // sem mi to jde v IE8
  return JeElementPodporovan(tag);
}

Jo a jen ještě malá drobnost - to !== v tom původním kódu z toho odkazu jsem nahradil !=
- předpokládám, že je jedno co použiju, že jo (tzn. že negace rovná se je to samé co nerovná se).
Keeehi
Profil
David11:
Tak zrovna u IE8 a níž víš, že nové věci tam nefungují. Možná by tedy úplně stačilo detekovat, zda je prohlížeč IE a zároveň verze <= 8 a v takovém případě vždy vrátit false.

předpokládám, že je jedno co použiju, že jo
Není. Jsou to jiné operátory. A už vůbec !== není negace operátoru ==.
1 != "1" // false
1 !== "1" // true
existují tyto operátory
a == b  - hodnota se musí rovnat
a != b  - hodnota se nesmí rovnat
a === b - hodnota se musí rovnat a zároveň datový typ se musí rovnat
a !== b - hodnota se nesmí rovnat nebo datový typ se nesmí rovnat
První dva v případě potřeby přetypují proměnnou a pak porovnají, druhé dva nepřetypovávají. A pokud bys chtěl negaci operátoru == tak to vypadá !(a == b) což je ekvivalentní s a != b.
David11
Profil
Keeehi:
Díky, to o tom === a !== jsem vůbec netušil - před tím, než jsem vznesl ten dotaz, jsem se díval sem [ Operátory] a nic takového jsem tam nenašel - dokonce jsem měl i trochu černé svědomí, že votravuju s dost jasnou věcí - a ono se nakonec ukázalo, že jsem narazil na něco, o čem jsem neměl vůbec potuchy... můj problém zřejmě je, že jsem doteď měl zkušenost jen z jazyky s typovou kontrolou...

Ještě večer otestuju zda náhodou ta původní funkce (z toho odkazu) na test toho, zda je tag podporován, třeba nezafunguje i v tom IE8... (i když, podle toho, co jsem si nechal vypisovat, když jsem to v tom IE8 ladil, bych řekl, že nezafunguje - ale teď už si fakt nejsem jistý skoro vůbec ničím...) Ale pokud zafunguje, půjdu si nafackovat za svévolné měnění kódu, aniž bych tušil, co měním ;-)
David11
Profil
... jen sem ještě doplňuji, že ten původní kód (tzn. ten, kde je místo toho operátoru != tento !== v IE8 také nezafunguje (jasně, nemůže to fungovat - vrací tam to call(element) prostě vždy jen [object Object] - ať už to platný tag je nebo ne - a zda to porovnávám bez typové kontroly nebo s ní, na tom už nic nemůže změnit, prostě nikdy to není [object HTMLUnknownElement], čili ta funkce v IE8 vrací vždy, že každý, i sebenesmyslnější tag, "zná"), ale "blesklo mi hlavou", když jsem psal ten svůj předešlý příspěvek, jestli to přece jen nebyla moje chyba... no, nebyla a nafackovat jsem si tudíž nemusel ; - ) ... takže je nutné počítat s tím, že IE8 a nižší to prostě neumí zjistit - a buď se spolehnout na to, že jakýkoli jiný prohlížeč to zjistit umí (Keeehi zřejmě ví, že se na to spolehnout lze) - anebo to mnou dříve navrhované řešení, pokud vymyslím dostatečně nesmyslný tag, funguje taky (řekl bych, že je "univerzálnější", ale já jsem možná zbytečně "předpo..vystrašený" - a zřejmě to bude, jak psal Keeehi, zbytečné). Konec hlášení : - )
...
(a nakonec jsem dospěl k tomu, že tu jinou velikost náhledu a jinou velikost videa nepoužiju... každopádně jsem se ale od původního dotazu dostal nakonec k tomu, že tuším, že existuje i něco jako === a !== , takže "marný" to snad nebylo... nestálo by za to to dopsat do toho Operátory ? Já se fakt díval nejdřív tam - a až když jsem to tam neuviděl, jsem se zde "blbě ptal" ; - )
Každopádně, Keeehi, díky za rady.
Keeehi
Profil
David11:
nestálo by za to to dopsat do toho Operátory ?
To asi stálo. Bohužel málo který zdroj je dokonalý. JPW je celkem dobrý a spolehlivý zdroj i když jak je vidět, některé informace tam můžou chybět. Také informace jsou trochu staršího data vydání, což ale většinou moc nevadí, jelikož základy, které popisuje většinou zůstávají stejné. Skvělým zdrojem informací je https://developer.mozilla.org. Zatím jsem se nesetkal s případem, že by tam informace chyběla nebo byla špatně. Například operátory jsou popsané tady https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators nebo https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators. Pro mě je to nejspolehlivější zdroj informací. Jen musíš umět anglicky.
David11
Profil
Keeehi:
Díky moc.
Mohl bych prosím poradit s ještě několika nejasnostmi?

Hledal jsem informaci zda záleží či nezáleží na pořadí atributů a našel jsem, že by záležet nemělo. Je tomu ale tak skutečně vždy? Např. u atributu preload (viz příklad níže) mám pochybnost - opravdu, pokud bych ho uvedl až za src, by byl zohledněn? Nemůže nějaký prohlížeč, když v tagu video narazí na src ho zkusit načíst - a když pak narazí na preload="none", už je "pozdě", protože se při provedení src zachoval s implicitním nastavením preload, které nemuselo být none? Nebo je vždy zaručeno, že všechny prohlížeče si vždy nejdříve načtou všechny atributy a teprve pak je začnou aplikovat v pořadí, které dává smysl?

A další věc: myslím si správně, že použít atribut type přímo v tagu video je nesmysl, protože video atribut type nezná?

A pokud je odpověď na přechozí otázku "ano", má vůbec smysl místo tohoto:
<!-- varianta A -->
<video controls width="320" height="180" poster="jpg/V034.jpg" preload="none" src="mp4/034.mp4" id="ID034V"></video>
zapsat toto:
<!-- varianta B -->
<video controls width="320" height="180" poster="jpg/V034.jpg" preload="none" id="ID034V">
<source src="mp4/034.mp4" type="video/mp4">
</video>
jen kvůli tomu, abych specifikoval typ? Nebo když ten source hodlám použít stejně jen jeden, je pak zhola zbytečné používat tag source a vystačím si pouze s tagem video? (tzn. s tou variantou A). Nebo je přece jen lepší ten typ specifikovat a použít tag video s jedním tagem source (tzn. tu variantu B)?
Keeehi
Profil
David11:
Nebo je vždy zaručeno, že všechny prohlížeče si vždy nejdříve načtou všechny atributy a teprve pak je začnou aplikovat v pořadí, které dává smysl?
V dnešním světě ti nikdo nic nezaručí ale ano, spolehnout se na to můžeš. Ještě jsem neviděl prohlížeč, který by se tak dnes nechoval.

V případě že typ chybí, pošle prohlížeč požadavek na server a z hlavičky si typ zjistí. Mezi variantou A a B moc rozdíl není. Jen v případě, že prohlížeč video nezvládne přehrát tak u varianty A odešle o jeden požadavek navíc. U varianty B to pozná z typu a tak se na to nemusí serveru ptát. Varianta B se tedy dá považovat za lepší. Rozdíl ale není veliký a pokud by jsi použil A, nic strašného se nestane.
David11
Profil
Keeehi:
Díky moc za odpovědi.

Napadla mě ještě taková "šílenost" - vyzkoušel jsem ji a funguje jak v Chrome, tak IE11 (IE8 mě netrápí, protože tam video tag stejně nefunguje) - ale zdá se mi, že to je tak velká šílenost, že bych rád věděl, jestli se mi to jen zdá, že to je šílenost - nebo to až tak velká šílenost není... Jde o následující:
Na stránce, kde chci umožňovat přehrávat videa (mp4) pomocí tagu video, jsem chtěl mít možnost přehrát i nějaká audia (mp3). Použil jsem tag audio, ale nedařilo se mi, aby vizuálně vypadal stejně jako ta ostatní videa. Tak mě napadlo použít i pro mp3 tag video (s tím, že jsem použil tu variantu B z [#22]) a do type dát type="audio/mp3" - a ono to funguje... Líbí se mi na tom i to, že tam mohu stejným způsobem, jako u ostatních videí, vložit poster, který se zobrazuje jako náhled - a zobrazuje se stejně i během přehrávání, což je přesně to, jak jsem chtěl, aby se to chovalo. Dá se to tedy takto používat, nebo to není rozumné použití a měl bych to vyřešit nějak jinak?
David11
Profil
Keeehi:
K tomu přehrání mp3 v tagu video jsem našel, že to správné použití není, ale někdy že to může fungovat:
Object moved
Omlouvám se, že jsem se ptal na něco, co jsem si mohl najít.

Teď mám ale problém, který nevím jak hledat, protože podle všech návodů by to mělo fungovat a přesto mi to nefunguje.
Jde mi o to, že když video neumí něco přehrát, chtěl bych, aby se např. objevil text, že to nejde. A to se mi nedaří. V následujícím kódu pokud např. neexistuje test1.mp4, bez problémů se přehraje test2.mp4, pokud existuje. Pokud ale test2.mp4 také neexistuje, objeví se obdélníček videa, který má ovládací prvky šedivé - místo aby se, jak bych očekával podle těch všech návodů, které jsem všude možně našel, objevil text "Video nejde přehrát." Fakt jsem po tom pátral docela dlouho a nedaří se mi najít čím by to mohlo být...

<video width="320" height="240" controls>
  <source src="test1.mp4" type="video/mp4">
  <source src="test2.mp4" type="video/mp4">
  Video nejde přehrát.
</video>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: