foto als link naar een video, in hetzelfde kader

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Tjoehhhh,

Ik heb me vanmiddag wat afgeprutst.
Twee foto's achter onder elkaar (totaal en detail) en daaronder de video wilde maar niet lukken.
M.i. voor wat het waard is en wat jij ook al eerder constateerde, ligt het ergens in de a van de muisover.

Ik gebruik nu maar steeds de F8 knop zodat hij hem in firefox opent want de IE van "KIT" laat zelfs geen foto's zien als ik de <video> tag gebruik.
De controls krijg ik er prima in, je hoeft er niets voor te doen, en de poster ook, tenminste van een .jpg, niet van de .mp4, die pakt ie op de een of andere manier niet.

Daarna een simpele manier, dwz met maar een foto geprobeerd.
Maar ik krijg met de tag <video> met en zonder een aparte class de video niet in het scherm van de foto, hij opende een nieuwe pagina.
Dat komt waarschijnlijk omdat ik in de html een fysieke a tag heb gebruikt maar ik kreeg die a niet (werkend) in de CSS.
En in de nieuwe pagina draaide de video op quicktime. De contols van <video> ziet er anders uit. Bij het gebruik van een foto lag die controls player wel op de 1e foto. Geen gezicht.

Zoals ik al zei, als het niet op de manier lukt zoals we in ons hoofd hadden dan maar eenvoudig.
Om de stemming er in te houden een afbeelding (deze is zonder gebruik van controls, als ik hem wel gebruik ligt ie half-transparant op het diafragma) van het resultaat van mijn gezwoeg. Als ik op het diafragma klik gaat de video in een nieuw scherm draaien.

Ik ga even de pijp aan Maarten geven en wacht of jij er nog iets van kunt maken.
Bijlagen
na_de_zondvloed_klein.jpg
na_de_zondvloed_klein.jpg (25.72 KiB) 41212 keer bekeken
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Even een berichtje.
Dat is echt stap voor stap. Wel het leukere detectivewerk, maar het gaat gruwelijk langzaam. Rottig voor jou dat 't langzaam gaat, maar ik vind 't wel leuk.
Ik heb ook nauwelijks verstand van video. Die simpele code in dat voorbeeld werkt wel, maar dit is andere koek. Bleek dat één van mijn video's die bedoeld was voor smallere schermen op bredere vensters problemen gaf. Daar draaien andere browsers, en kennelijk verslikten die zich in de codering. Dat merk je pas als je die controle op de breedte van het venster eruit haalt.
Goed, ik weet nu zeker dat ik een absoluut goed draaiende basis heb in álle browsers, ook op mobiel, behalve Opera Mini, want die draait geen video's. En IE 8 dus.
Nu ben ik stap voor stap de html aan het terugzetten.
Zodra ik de stylesheet koppelde, crashte Android browser. Nu zet ik eerst alleen de html terug. Androis crashte omdat <video> niet tegen de marge kan die je bij <input> hebt opgegeven. Pardon??? <video> crasht bij css voor <input>??? Ja dus. Dit zijn dus typisch bugs, want css voor <input> hoort alleen voor <input> iets te betekenen, en zeker niet voor een totaal ander element als <video>.
Nou, zo zullen er nog wel meer verrassingen komen. Waar je dan vervolgens oplossingen voor moet bedenken. Maar meestal lukt dat wel, als je eenmaal de oorzaak hebt.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Ook even een berichtje tussendoor.

Maakt niet uit dat het langzaam gaat. Belangrijk is dat je het leuk vindt.
En als het lukt dan ...

Ik heb net nog wat geexperimenteerd met een "nieuwe" converter om mp4 naar flash over te zetten.
Ik krijg wel redelijke resultaten maar 2x zoveel data.
Ik heb nog wel een nieuw idee maar dan moet ik eerst een nieuwe render maken van het origineel.
En dat zit er vanwege de paardenkrachten in mijn pc nu net even niet in.
Als straks iedereen glasvezel heeft zal die datastroom minder belangrijk worden, maar dat kan nog wel even duren.
Ik meen me te herinneren dat Nostradamus daar ook iets over heeft gezegd. Boeiend uiteraard, cryptisch natuurlijk, alleen te duiden door exegeten, dat dan weer wel.
Ik had je graag met de originele tekst kennis willen laten maken, in een vorige reactie heb ik mogen constateren dat je daar prijs opstelt, maar ik ben dat naslagwerkje al zo'n 30 jaar kwijt.
Als ik me goed herinner is dat paperbackje, nog een originele copie uit 1683, een keer achter het gasfornuis gedonderd. Misschien wordt het tijd om te verhuizen. Ik houd je op de hoogte.

En zoals jij er eer instelt om dit uit te zoeken vind ik het leuk (het maken zelf is natuurlijk nog leuker) om met zo'n laag mogelijk datastroom een zo goed mogelijk resultaat neer te zetten. En daar komen nogal wat parameters bij kijken.
Op zich vind ik het maken van een website ook best leuk om te doen, maar ik word gek van al die verschillende interpretaties van die browsers.

En zoals je al zei, je moet eerst een goed werkplatform hebben.
Dat heb ik te licht ingeschat en dat heeft mij wel zo'n beetje de das omgedaan.
Maar, zoals mijn vader zaliger, God hebbe z'n ziel, de duivel z'n pelotas, placht te zeggen: Gemakzucht is des duivels (daar hebben we 'm weer) oorkussen.

Dus voor iedereen die deze exercitie in masochisme volgt...
Luister naar je vader.
Want er komt 'n moment dat ie gelijk krijgt.

Ik geloof dat ik een beetje melig word.
Biertje, muziekje, bedje. Die volgorde.

Sterkte,
herman
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Eh, ik weet niet hoe jij zingt, maar als je net zo goed zingt als ik, is de volgorde muziekje biertje voor de buren wel zo prettig...
Ga nog heel even door. Alle html staat er nu in, en de video staat binnen de <a>. De eerste css werkt ook weer. Tot nu toe werkt alles.
Nu is het 'n kwestie van steeds wat toevoegen, tot er een of meer niet meer werken.
Overigens is het bij Opera Mobile geen bug, maar kennelijk een feature dat-ie de hele pagina toont. Maar nu toont hij de hele pagina even, ondersteboven - nee, ik heb niet gedronken - en gaat daarna spelen. Eerst speelde hij gewoon de video niet af.
Windows 8 met Internet Explorer 10 is trouwens ook onderweg, maar die heb ik nog niet opgesteld. In principe houdt Microsoft zich met ingang van IE 9 echt goed aan de standaard, dus dat zal wel werken, als 't verder overal werkt.
Nadeel van flash: dat werkt niet in iOS (iPad enz.) en wordt zeer binnenkort ook niet meer in Android ondersteund. En in Windows 8 zit het ook niet standaard meer. 'n Site moet een of andere toestemming krijgen van Microsoft om het te gebruiken, als ik het goed heb onthouden. En in Linux wordt het ook niet meer ontwikkeld, hoewel nog wel ondersteund met beveiligings-updates. Dat is echt een aflopende zaak.

Als je het trouwens wilt zien: http://www.css-voorbeelden.nl/ t e s t/ (zonder de spaties). Maar kijk niet vaker dan eens in 't uur of zo, want die video's vreten bandbreedte. Ik heb wel vrij veel, maar zelf test ik in 25 browsers, dus dat tikt lekker aan.
Schrik trouwens niet van de verwoestingen...
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Laatste berichtje. Ik denk dat dit ongeveer is wat je bedoelde.
Werkt op Windows 7 in Opera, Firefox, Google Chrome en IE 9.
Werkt op Windows XP in Firefox, Google Chrome en Opera.
Werkt op Android 2.zoveel in Android browser en Opera Mobile
Werkt op Andorid 4.zoveel in Opera Mobile, Android browser, Firefox en Google Chrome
Werkt op iOS in Safari en Google Chrome.
Werkt op OSX in Safari, Google Chrome, Opera en Firefox.
Werkt in Linux in Firefox, Google Chrome en Opera.
Oftewel: in alle browsers, op IE 8 en Opera Mini na. Opera Mini is niet bedoeld voor video's, dus die telt niet mee.

Nog op te lossen (behalve natuurlijk alle css weer werkend krijgen en hopen dat dat geen problemen oplevert):
Op Android sluit Firefox niet. De video blijft zichtbaar. (Niet echt ernstig trouwens als dat niet lukt.)
Google Chrome op iOS: de video is iets groter dan de foto. Mogelijk op te lossen, anders ook niet heel ernstig.
Wel ernstig: de video blijft spelen als je niet meer over de foto hovert of op een touchscreen een andere plaats aanraakt. Terwijl je de video niet ziet. Dit zou met wat eenvoudig JavaScript op te lossen moeten zijn: pauzeer als foto wordt verlaten/touchscreen buiten de foto wordt aangeraakt.
Wel ernstig: op de desktop, niet bij touchscreens, blijven de controls zichtbaar. Die zijn namelijk automatisch zichtbaar bij een muisover. Maar zonder muisover komt de foto terug. De bedoeling is natuurlijk een video zonder controls.

Ik begin nu toch weer goede hoop te krijgen. Zo'n marge bij <input>, daar is natuurlijk omheen te werken.
Nou, ik ga me nu toch maar losrukken van deze uiterst leuke puzzel.

Hmm. Nog even snel. Dat kiertje aan de onderkant komt omdat mijn video gewoon iets te laag is. En ik heb al 'n manier gevonden om de controls er aan de onderkant onder te zetten. Althans: dat werkt in Firefox, Chrome en Opera op Linux. Dus met 'n beetje geluk...

Zei Nostradamus eigenlijk iets over op tijd gaan slapen en zo? En is bij jou de wereld nog vergaan vandaag? De krant wist het niet zeker, want als de wereld was vergaan, zou je daar natuurlijk niets van horen.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

De nieuwe dag begonnen met me te verslapen zodat ik bijna een afspraak miste.
En is bij jou de wereld nog vergaan vandaag?
Nog geen tijd gehad dat met zekerheid vast te stellen. Misschien is de wereld tussentijds wel vergaan en hebben we er een nieuwe voor in de plaats gekregen.
Vaak merk je dat pas aan kleine details: twee manen aan het hemelgewelf bvb of aan sites die je bekijkt, die voor de apocalyps nog anders waren ;) .

Nee, ik ben niet geschrokken van deze kubistisch ogende versie, het gaat er natuurlijk om of het werkt. De CSS staat er immers nog niet in. Dat kan dan ook nog een heikele test worden.

Ik zal een screenshot toevoegen zodat je weet wat ik met mijn browser (firefox) gezien heb.
Ik zal een korte beschrijving geven.
(en dat zie ik vooral als een test van de interpretatie van mijn browser. Ik ben na de ervaringen van de laatste week een beetje wantrouwend geworden)

Klikken op het logo linksboven levert een nieuwe pag. op met de foto van de aarde (met de "M".)
Bij muisover van de stierenfoto (links boven, net onder het logo, de enige afbeelding met een border) verandert de foto in een afbeelding van het filmpje met de controls. Video en geluid werken. En zoals je opmerkte verdwijnt het filmpje als de muis het venster verlaat om de controls te laten verdwijnen. Dat is inderdaad niet bevorderlijk voor het "kijkgenot". Minder storend is als de X functie van de controls (groot scherm) de video toont op het hele scherm (is dat te voorkomen? Daar wordt mijn (toekomstig) beeldformaat van 190x111 erg pixelig van).
Bij de 2 foto's daaronder (hooiberg en plein) verandert bij muisover de afbeelding in zwart. Dat lijkt me in deze versie normaal.

25 browsers om te testen... Ik zou er gek van worden. Maar ik kan me voorstellen dat het voor jou een uitdaging is en telkens een gevoel van overwinning als het werkt. En als het niet (helemaal) werkt kun je je kennis en je analytische vermogen er op los laten. Vooral als je iets onderste boven ziet. Ik zou me iets "sterks" inschenken en uitkijken naar een nieuwe bezigheid; avantgardistiche kerstsstukken maken of me verdiepen in een van de 461 vormen in het Japanse bloemschikken of zoiets.
Het werkt dus bijna overal. Geweldig. In IE 8 dus niet. Misschien bedoelden de Mayas dat toen hun kalander ophield de toekomst te beschrijven en dit door een aantal notoire piskijkers gezien werd als het einde van de wereld. Hebben ze die steen (muur) waarop die kalender stond (verleden tijd?) al omgedraaid overigens?

Ach, dat converteren naar Flash was iets waarmee ik me bezighield voor HTML5 en is nu een beetje een service die ik aan vrienden/bekenden geef. Zoals je weet wil ik daar niets mee van doen hebben als het even kan.

Ik hoop dat je evenals ik van een goede nachtrust heb genoten.
Mocht ik nog tekenen zien die duiden op de inmiddels plaats gevonden ondergang van de wereld, dan houd ik je op de hoogte.

P.s. Overigens is het zingen van mij door de buren ten strengste verboden. Zelfs onder de douche.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Even snel tussendoor. Vanavond ga ik weer verder, als dat lukt wat tijd betreft.
Klikken op het logo linksboven stond al op mijn lijstje. Daar moet ook die href in de a worden veranderd in "#" en de title weg, dat is alles. Als het gaat werken, doe ik er nog even een lijstje bij met alle kleine wijzigingen, zoals ook die andere href en die onclick.

Alleen die foto linksboven heeft al een <video>, dus de rest werkt nog niet. Klopt.

De bedoeling is dat de controls onder de video komen te staan.

Fullscreen voorkomen is onmogelijk met alleen css/html. Dan moet je echt met JavaScript <video> gaan aansturen, en dat ga ik niet doen. (Behalve dat-ie moet pauzeren als je de afbeelding verlaat, dat zou moeten lukken.)
Het kan wel, denk ik, maar dan moet je echt iemand hebben die meer van JavaScript weet.
Mogelijk zou de knop verborgen kunnen worden onder dezelfde kleur als de achtergrond van de pagina. Mogelijk werkt hij dan ook niet meer, dus dan heb je je doel simpel bereikt, zonder (ingewikkeld) JavaScript. (Gewoon een div of zo over dat stukje van <video> projecteren, zoiets.)
Overigens vraag ik me af of dat fullscreen erg is. Iedereen zal toch begrijpen dat als je 'n video van 190 px breed of zo op 1500 breed gaat afdraaien, dat die dan blokkerig wordt? Ik denk dat de meeste mensen hier wel ervaring mee hebben, omdat het 'n functie is die standaard zit ingebakken in alle browsers.
Maar ik wil met alle liefde ook dat afdekken even proberen, want - als dat werkt - is het vrij simpel. Denk ik.

Belangrijkste vraag: als de controls eronder komen, en als het afspelen stopt bij verlaten van de foto e.d., is dit dan wat je voor ogen had?
Je kunt natuurlijk nog prima zeggen dat het tegenvalt en niet gebruiken. Voor mij is het gewoon leuk technisch speelgoed, dus als je je bedenkt, lig ik daar niet wakker van. (Integendeel, grinnik, hieraan werken houd me wakker.)
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Nou, het moet wel erg vreemd lopen als ik me bedenk.
Even zag ik het donker in maar er gloort weer licht aan het einde van de tunnel.
Ik zag trouwens dat mijn screenshot van de "test" niet is door gekomen. Ik zal wel "verkeerd" geklikt hebben. Het is, lijkt me, ook niet echt belangrijk.

Even voor de duidelijkheid. Het idee van "totaalfoto > muisover > detailfoto > klik > video met consols" is nu geheel verlaten?
Te veel conflict in HTML/CSS in relatie met het <video> element, heb ik begrepen.
Jammer, maar het is niet anders.
Fullscreen voorkomen is onmogelijk met alleen css/html. etc.
Klopt, je hebt gelijk. Daar lig ik ook niet echt wakker van. Als het slechts met een "druk op de knop" te voorkomen was, zou het welkom zijn.
En dit geldt natuurlijk ook voor andere vragen/wensen die ik nog heb. Ik geef het maar aan, dan weet je waar ik zit. Als het moeilijk is/veel tijd kost, dan houdt het gewoon op.

Belangrijker is de "controls"functie die in beeld komt bij de muisover. Dat je om hem weg te krijgen met de muis van de afbeelding af moet en vervolgens de oppervlakte foto weer te voorschijn komt en de video niet meer ziet. Dat is niet de bedoeling. Maar dat hij blijft staan tijdens het spelen ook niet. De afbeelding is al zo klein en dan ook nog zo'n functie in beeld... . Ik heb tot nu begrepen dat het onoverkomelijk is. Het is dus niet mogelijk dat bij het weggaan van de muis van het videobeelvenster de video toch zichtbaar blijft zonder "controls"?

Ik ben blij dat ik op deze wereld nog iemand wakker houd.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Correctie:
Ik heb tot nu begrepen dat het onoverkomelijk is. Het is dus niet mogelijk dat bij het weggaan van de muis van het videobeelvenster de video toch zichtbaar blijft zonder "controls"?
Sorry, ik was even niet bij de les.
Het is dus mogelijk met (ingewikkeld) Javascript. Maar de "consols" is te bedekken met een "divje" met achtergrondkleur. Je doelde hier op de "X" functie. Die functie, de hele "controls" is semi-transparant. Dat betekent dat ook een stukje van de video niet zichtbaar is. Tenminste dat begrijp ik er uit. Anders zou het natuurlijk voor de hele "controls" kunnen.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Altijd fijn als ik iemand gerust kan stellen. (Wat betreft de controls, zie verderop.)
Als ik het goed begrijp zou je eigenlijk willen: foto -> muisover -> tweede foto -> klik -> video. Pfoe. Dat zou misschien kunnen op de desktop, maar op touchscreens gaat dat (voor mij) heel moeilijk worden. Bij gebruik van een muis zou je het (mogelijk) kunnen splitsen in :hover en :focus. (:focus reageert op 'n klik.)
Maar hoeveel mensen komen op het idee te klikken op een afbeelding?
Maar waarom gebruik je niet als poster die tweede afbeelding? Dan zie je eerst de eerste foto. Bij muisover (of aanraken) verschijnt de tweede foto, dus net zoals nu. Maar daar staan dan controls onder. Dan is ook gelijk duidelijk dat er een video onder zit, want waarom staan die controls er anders?
In IE 8 zou het dan blijven zoals nu: bij muisover tweede foto.

De video moet sluiten als de cursor de video verlaat. Dan komt de foto weer terug. Of bij een touchscreen: als het scherm buiten de video wordt aangeraakt.
De bedoeling is dat de video dan automatisch pauzeert. Dat schijnt niet al te moeilijk te zijn. Als je weer teruggaat naar de foto, verschijnt de video weer en kun je verder spelen waar je was gebleven (na 'n klik/aanraking).
De controls blijven altijd zichtbaar als je boven de video hovert. Dat is gewoon hoe ze werken. Je kunt dat wel uitschakelen in de html, maar dan zijn ze er nooit. Je kunt het waarschijnlijk ook aansturen met JavaScript, maar dat gaat voor mij te ver.
Maar de beloofde geruststelling: na even snel proberen bleek het in Firefox, Google Chrome en Opera op Linux mogelijk om de controls ónder de video te zetten. (Als het daarin lukt, lukt het mogelijk overal) Waarschijnlijk kun je ze zelfs tien centimeter eronder zetten, maar gelijk eronder is mooier (en makkelijker). Als ze gelijk ónder de video staan, storen ze niet, maar laten juist goed zien hoe je de video kunt stoppen/starten, enz.

Die controls op de foto/video is dus niet onoverkomenlijk, lijkt het. Integendeel: zelfs heel simpel. Lijkt het, beloof ik nog niets.
'n Mogelijkheid zou trouwens ook nog zijn om aan de onderkant van de video 'n lege strook te maken. Maar dat vreet natuurlijk bandbreedte. Ik neem aan minder dan 'n bewegend beeld, maar ongetwijfeld meer dan 'n simpele css-regel.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

O, wat mooi. Mijn forum meldt een kruispost! Maar ik heb toch gepost, want het bijt elkaar niet. Die functie kende ik niet.
Je zou (mogelijk) die fullscreenknop kunnen afdekken.
Nee, dat gaat niet lukken. Even snel gekeken, vanavond ga ik pas echt weer aan de slag. Die knoppen zijn verschillend bij de verschillende browsers.
Google Chrome en Firefox zijn hetzelfde, maar bij Opera zit er de geluidsregelaar. En bij IE 9... En bij Safari... En bij Android browser... Bovendien loop je de kans dat Firefox plotsklaps de lay-out verandert en dat de startknop rechts komt te zitten.
Je zou zelf controls kunnen maken, maar dat voert voor mij te ver. Dan moet je echt met die volledige JavaScript-api gaan werken.
Maar ik kan me toch niet goed voorstellen dat iemand die mini-video fullscreen gaat afspelen en dan verbaast is als de kwaliteit belabberd is. Als je youtube bekijkt, gebeurt dat ook. Mensen zijn dat gewend, volgens mij.

Je zou ook, ik denk dat dat mogelijk is, even uit m'n hoofd. een venstertje boven de video kunnen laten verschijnen met wat tekst. Dat het 'n klein formaat is en zo. Dat venstertje verschijnt/verdwijnt gelijk met de video. Maar persoonlijk denk ik dat dat niet nodig is. Is trouwens ook niet echt veel werk.
Ik ga eerst de css erin zetten straks. (En die controls op hun plaats proberen te meppen.)
Dan zes verschillende video's erin zetten. (Zes kopieën, dus ze lijken hetzelfde.)
En dan het afspelen automatisch laten stoppen proberen.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

P.S.: het laten werken in zoveel verschillende browsers is nou juist het leuke!
Het enige waar ik wat tegenop zie: straks (of later, als het te lang duurt) in 25 browsers zes filmpjes proberen. Dat zijn er dus 150... Niet dat ik ze helemaal uitkijk, maar toch... Maar dat hoort er gewoon bij.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Maar hoeveel mensen komen op het idee te klikken op een afbeelding? Etc.
Nee, het is prima zo. Eigenlijk was dat de ook de allereerste opzet. Die detail-foto is er bij gekomen om toch iets “interessants” te laten zien. Het is alleen een beetje uit de hand gelopen met het gespeel met die borders. Met een werkende video is het overbodig geworden.
De video moet sluiten als de cursor de video verlaat. Dan komt de foto weer terug. Of bij een touchscreen: als het scherm buiten de video wordt aangeraakt. De bedoeling is dat de video dan automatisch pauzeert.
Daar moet ik even over nadenken...
… nee, dat hoeft niet. Misschien zelfs beter van niet. Stoppen of pauzeren kan altijd via de “controls”. Het hangt een beetje af wat er gebeurt als, terwijl het 1e filmpje nog draait, er een tweede wordt aangeklikt. En evt andere zaken die ik nu nog niet overzie. Stopt de 1e dan automatisch? Dat zou wel het beste zijn. Ook voor de datastroom. “Alles” in overweging te hebben genomen: het auto sluiten van de video mag wel. Ik overzie de consequenties nog niet goed. Shame me.
Als ze gelijk ónder de video staan, storen ze niet, maar laten juist goed zien hoe je de video kunt stoppen/starten, enz.
Dat zou perfect zijn. Een klein stukje eronder zou ook geen kwaad kunnen. Kijk maar wat het gemakkelijkste is.
Hoe zit het trouwens met de border van de foto? Verdwijnt die bij de video? Ik moet zeggen dat ik daar nog helemaal niet over heb nagedacht. Wat mij betreft mag ie wel blijven maar niet noodzakelijkerwijs.
'n Mogelijkheid zou trouwens ook nog zijn om aan de onderkant van de video 'n lege strook te maken.
Je bedoelt in de video (de render) zelf. Dat kan, maar daar zijn wat practische bezwaren tegen. Of het beeld wordt een cinemascope uitsnede of het wordt in de aspect ratio (breedte x hoogte) een ander formaat. Dan zou ik de foto's ook moeten aanpassen, dwz hoger maken. Dwz dat er minder ruimte in de kolom komt. Conclusie: Als het niet hoeft, liever niet.
Je zou (mogelijk) die fullscreenknop kunnen afdekken. Nee, dat gaat niet lukken.
Hoeft ook niet. Het lijkt me niet mooi. Het was slechts een suggestie als het anders niet kon. Maar je hebt al genoeg alternatieven aan gedragen..
… een venstertje boven de video kunnen laten verschijnen met wat tekst. Dat het 'n klein formaat is en zo.
Precies, daar had ik ook al aan gedacht, of een test in de “title”. Maar dat lijkt me net iets te vluchtig.
Het enige waar ik wat tegenop zie: straks (of later, als het te lang duurt) in 25 browsers zes filmpjes proberen.
Verdomme, dat is vervelend. Dan zou ik nog snel wat content moeten aandragen. Dan heb je tenminste wat variatie. Heb je een voorkeur? :mrgreen:

Moet nu snel weg. Veel plezier vanavond.
Ben vanaf pm 20.00 weer terug.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Oh, speciale filmpjes. Wat dacht je van 'n leuke detective in 25 afleveringen? (Tja, zoveel genres zijn niet geschikt voor 25 delen, denk ik.)

In IE 8 blijft die detailfoto trouwens in principe gewoon werken zoals nu. Dat heeft mooie technische namen: extra's in browsers die dat kunnen, en acceptabel in oude meuk.

Even tussendoor: het is natuurlijk gewoon jouw site, dus het zijn niet meer dan suggesties van mij. Tenzij ik gewetensbezwaren krijg, gaat het op jouw manier. Maar ik zou wat moeite hebben met 'n venstertje met 'Leve Wilders' of zo...

Die border kan weg als de video draait. (Denk ik. Alles is even onder voorbehoud.) Maar ik vind het wel mooi zo, eigenlijk. Heel apart.

Die video's móéten absoluut stoppen met spelen. Nou ja, 'moeten'. Op het moment dat je niet meer over die afbeelding hovert c.q. het scherm aanraakt buiten de afbeelding, komt de foto terug. Dan zie je dus niet meer welk van de zes filmpjes afdraait. Ik neem aan dat er geluid bij zit. Zie je de bezoekers al met stoom uit de oren jacht maken op welke van de zes loopt te loeien?
Los daarvan: het afspelen van video's kost ook relatief veel stroom. Het is niet handig om video's te laten spelen zonder ze te zien als het apparaat op 'n accu werkt. (Ik neem aan dat de video gewoon speelt, al zie je hem niet. In ieder geval moet er 'n mechanisme draaien om de voortgang en zo in de gaten te houden.)
Overigens blijken alle video's volledig gedownload te worden, maar pas nadat ze zijn gestart. Maar pauzeren heeft dan geen invloed meer op het downloaden. Voor zover ik weet is er geen mogelijkheid om het downloaden te stoppen. Dit regelt de browser zelf, voor zover ik weet.

Die controls komen over de border te staan. Dat ziet er in mijn eerste probeersel netjes uit (volgens mij). Maar 't is even afwachten of het overal werkt.

Ik zit aan bijvoorbeeld 'n venstertje te denken dat langzaam onder de video vandaan komt. Vanuit de video naar rechts schuivend. Lichte achtergrond, ronde hoeken. Met 'n korte tekst over de kwaliteit of zo. Je kunt inmiddels in alle browsers met alleen css ook venstertjes laten verschuiven en zo. Alleen niet in IE, daar floept zo'n venstertje in één keer te voorschijn. En IE 8 heeft het niet nodig. (Mogelijk krijgt die op 'n ander manier video, maar dat valt hier helemaal buiten.) Misschien leidt 'n beweging trouwens te veel af, het is maar 'n idee. Je kunt, met alleen css, iets pas na 'n tijdje laten verschijnen. Zo'n venstertje kan zelfs 'n rand van roosjes krijgen. Moet er niet aan denken, maar er is heel veel mogelijk, bedoel ik maar.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Nee, de Grote Blonde Stoot houden we er voorlopig buiten (zie einde).
De bel heeft geklonken. Het speelkwartiertje is voorbij. De les begint weer.
Geef mij maar brunettes met sproeten. Ai, ai, wat zeg ik nu toch weer allemaal :shock: .
In IE 8 blijft die detailfoto trouwens in principe gewoon werken zoals nu.
Gebruikers van die browser kan ik door verwijzen naar een andere mogelijkheid. Ik ga daar (later) over denken.
Die video's móéten absoluut stoppen met spelen. Nou ja, 'moeten'. Op het moment dat je niet meer over die afbeelding hovert c.q. het scherm aanraakt buiten de afbeelding, komt de foto terug. Dan zie je dus niet meer welk van de zes filmpjes afdraait.
Absolutely true. Einde discussie.
De video's beginnen te laden als er gemuisoverd wordt of pas na het indrukken van de startknop? Dat laatste denk ik; toch?
Even ter informatie: De bedoeling is dat het 6 korte video voorbeelden worden (max 10 sec. dus niet al te veel data) en een wat langere achter het diafragma (max. 60 sec). Natuurlijk moeten bezoekers, en dan vooral de laatste, kunnen stoppen. Samenvattend: Met de muis het venster verlaten betekent dat de foto weer naar boven komt en de video stopt. Wil de bezoeker blijven kijken (je weet maar nooit) dan moet de muis (pijltje) in een hoekje blijven staan. En als het pijltje weg is (en de video ook) wordt er dus ook onmiddellijk gestopt met laden. Dat regelt de browser dus zelf. Prima.
Ik zit aan bijvoorbeeld 'n venstertje te denken dat langzaam onder de video vandaan komt. Etc. // Misschien leidt 'n beweging trouwens te veel af,...
Ja, dat denk ik wel. Het filmpje is maar kort en het is erg klein. Het zou na de vertoning kunnen (niet er voor want dat verstoord de "illussie".Ik zou het ook nog als tekst in de video zelf kunnen zetten. Maar liever de eerste mogelijkheid. Dat kan dus in de CSS. Moet je dan de exacte tijd van het filmpje weten zodat het na beeindiging (onmiddelijk) verschijnt? Of kan dat automatisch?
Zo'n venstertje kan zelfs 'n rand van roosjes krijgen. Moet er niet aan denken, maar er is heel veel mogelijk, bedoel ik maar.
Die roosjes bewaren we beter voor de GBS. Roosjes op lange, groene steeltjes met van die ... ja, die..., hoe heten ze ook al weer ... klein maar fijn zal ik maar zeggen.
Ik houd wel van een beetje strak. De info zou op een rechthoekig venstertje over de breedte van het beeld kunnen staan dat dan even "zijn neus laat zien"/ naar boven komt en dan weer verdwijnt. Of gaat dit te ver?
Wat is het eindbeeld overigens als de muis blijft staan? Het laatste beeld van de video?
Of wellicht een pose van de GBS die aan de fantasie niets te wensen over laat. En dan doel ik natuurlijk op zijn orerende "kwaliteiten".
Het is maar een idee.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Ik had net het volgende getypt, toen jouw bericht binnenkwam:
Om maar gelijk met de deur in huis te vallen: die controls zijn niet weg te krijgen. Wat het dus onmogelijk maakt om de video's goed te bekijken.
Zodra je de video verlaat, sluit deze. Maar zolang je erop staat, zie je de controls. catch-22 heet dat, geloof ik?
Er is met alleen css/html geen enkele manier om de controls te laten verdwijnen, zolang je over de video hovert.

Oplossing (hoopte ik): maak <video> hoger. De video zelf blijft even groot en vervormt dus niet, want de breedte blijft hetzelfde. Alleen de hoogte van <video> verandert. Hierdoor verschijnt aan boven- en onderkant van <video> een lege ruimte, boven en onder de video. En de controls verschuiven naar onderen, komen dus in die lege ruimte aan de onderkant. Schuif <video> een eind omhoog, en de lege ruimte aan de bovenkant zie je niet meer. Resultaat: de video staat precies waar de foto's staan, en de controls staan eronder.

Helaas zet IE 9 de controls niet aan de onderkant, maar pontificaal in het midden van de video. Daar werkt dit dus niet. En IE 9 is een van de belangrijkste browsers en neemt snel in gebruik toe. Ik neem aan dat IE 10 dit net zo doet, want er zijn geen regels hoe dit moet.
Nog erger: als ik de hoogte van <video> verander, verandert in IE 9 (en dus in IE 10 denk ik) de hoogte van de video zelf ookl. Terwijl de breedte hetzelfde blijft. Dit gebeurt trouwens ook in Android browser. Totale vervorming dus.
Op touchscreens speelt het probleem van de controls niet, omdat je daar niet hoeft te hoveren. Je raakt de foto aan en de video blijft gewoon open tot je het scherm ergens anders aanraakt.

Ik heb behoorlijk gezocht, maar er is geen enkele standaardmanier om de controls buiten de video te plaatsen. Althans: niet zonder JavaScript.

Je kunt de controls heel simpel volledig uitschakelen. Maar dan kun je alleen nog maar de video starten, stoppen, enz. met rechtsklikken. Ik denk dat de meeste mensen dat niet eens weten. Als je rechtsklikt verschijnt een menu, maar dat is meer bedoeld als noodrem wanneer de video automatisch gaat spelen en er geen stopknop is en de bezoeker hem toch wil stoppen.

Je kunt de controls uitschakelen en eigen knoppen maken. Die kun je dan neerzetten waar je wilt. Maar dat is 'n behoorlijke klus. Dat moet in JavaScript en is bepaald iets meer dan alleen automatisch stoppen met spelen. Dat is iets dat voor mij te hoog is gegrepen, want het zou mij vreselijk veel tijd gaan kosten.

Ik ben dus bang dat het bij die foto's moet blijven, wat mij betreft. Als je elders iemand vindt die die controls kan maken, dan zou het in principe kunnen. Denk ik, want 'n voorwaarde is dan nog wel dat alle browsers zich aan de standaard houden en die api volledig volgen.
Tja, sommige dingen kunnen gewoon niet zonder JavaScript.

Ik geef nog even 'n lijstje van dingen die je zou kunnen veranderen, alles bij elkaar.
<div id="main_container"> veranderen in <div id="main_container" onclick="">
De onclick zorgt dat het menu ook in iOS kan worden gesloten.

<a href="earth_HHF3.jpg" title="earth" class="godver"> veranderen in <a href="#" class="godver">
Voorkomt openen afbeelding in nieuwe venster.
Als je de cursor niet in 'n handje wilt veranderen moet je (hoort eigenlijk alleen boven 'n link)
a.godver:hover {background: url(earth_HHF3.jpg);} veranderen in a.godver:hover {background: url(earth_HHF3.jpg); cursor: default;}

Bij klikken op de afbeelding linksboven opent een nieuw venster. Dit kun je voorkomen als je
<a href="#earth_M.jpg" title="Movimag -moving images-" class="muisoverlogo">
verandert in
<a href="#" class="muisoverlogo">
Als je de cursor niet in 'n handje wilt veranderen moet je
a.muisoverlogo:hover {background: url(earth_M.jpg);}
veranderen in
a.muisoverlogo:hover {background: url(earth_M.jpg); cursor: default;}

Het doctype kan overal worden veranderd in het veel simpeler
<!DOCTYPE html>
<html lang="nl">
en de charset in het veel simpeler
<meta charset="utf-8">
Omdat jij heel consequent in strict hebt gewerkt, kun je het zonder meer veranderen. Dat hoeft trouwens niet, maar dan kun je zonder probleem dingen van html5 gebruiken. En het is natuurlijk 'n veel simpeler type en zo.

En ik zou overwegen om je site in directories (mappen) op te delen. Nu heb je nog vrij weinig bestanden, maar dat worden er snel meer. Als je bijvoorbeeld alle afbeeldingen bij elkaar stop in een map images (of welke naam dan ook), houd je het overzicht.

Ik bewaar de gewijzigde code nog even, want in principe is het dus mogelijk. Als je iemand zou willen zoeken voor dat JavaScript:
het gaat erom dat de gebruikelijke controls (start, stop, pauze, eventueel nog volume en iets om naar 'n bepaalde plaats in de video te kunnen slepen) búíten de video moeten komen te staan. Als dat mogelijk is, ik neem aan van wel, is het niet zo moeilijk om die plaats aan te passen.
Op m'n pagina met links staan wat forums waar je het zou kunnen proberen. Het kan trouwens ook zijn dat iemand met ervaring hierin gelijk zegt dat je dat kunt vergeten, omdat bijvoorbeeld IE 9 van de standaard api afwijkt.
Ik durf dan trouwens nog steeds niets echt te garanderen, maar ik zou niet weten waarom het dan niet zou lukken. Enige lastige puntje is dan nog het stoppen van de video bij het verlaten van de afbeelding, maar dat schijnt vrij simpel te zijn en heb ik al op meerdere plaatsen gezien.

Ik vind het jammer voor je site, maar ik heb me zelf eerlijk gezegd best vermaakt hiermee.
En als je eventueel nog andere mogelijkheden kunt bedenken, hoor ik dat wel.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Hoi GB,

Ik neem even wat dingen in overweging.
Mijn eerste (voorlopige, hoop ik) samenvatting/conclusie:
Dus, wat je heel vaak ziet (Vimeo bvb), dat als de muis het video-venster verlaat de controls ook vanzelf verdwijnt, kan alleen met een eigen gemaakte contro gemaakt met javascript.
Maar wij hebben gekozen voor de standaard controls en dat als de muis het venster verlaat de video sluit. Dat vanwege het onderbreken van de datastroom. Die 2 gaan dus niet samen.

Het javascript zou dan alleen voor IE 9 en 10 en Android browser gelden.

Er zijn een paar opties:
– de video's groter maken zodat de controls minder opvallen. Dan zou het videobeeld ook buiten de border vallen. Maar bij IE blijft die dan in het midden staan. Dus verworpen. Of zet IE hem in een andere code- toepassing toch ook onderin?
- de opvatting verlaten dat de video stopt als de muis het venster verlaat. Maar daarmee is de controls in het midden van het beeld dus ook niet mee opgelost. Of doet IE dat alleen bij een bepaalde combinatie van code?

Blijft over een oplossing in Javascript. Ik zie morgen een paar mensen, misschien weten die iemand die dat in javascript kan oplossen. Mocht dat zo zijn dan is het zaak het een en ander goed te combineren. Want het ene kan alleen als het andere.... Dat soort dingen.

Ik ga dadelijk een biertje drinken en een beetje naar muziek luisteren. Daarvoor ga ik eerst nog je tekst/uitleg doorlezen. want ik geloof dat ik het nu een beetje door elkaar begin te halen. Welke mogelijkheid met welke code combinatie. Alcohol en klassieke muziek: Een goede combinatie om eens rustig over de kwestie na te prakkedenken.

Als ik me iets te binnen schiet, mail ik je.
Misschien vanavond, anders morgen.
In geval van dat laatste; slaap goed.

En bedankt tot nu toe.
We geven het nog niet op. Toch...?
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Nog een kleine toevoeging.
Voor het grote bereik zijn IE 9/10; Google Chrome en Firefox het belangrijkste.
Of vergeet ik er nog een?
De rest is natuurlijk meegenomen.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

herman schreef:Hoi GB,

Ik neem even wat dingen in overweging.
Mijn eerste (voorlopige, hoop ik) samenvatting/conclusie:
Dus, wat je heel vaak ziet (Vimeo bvb), dat als de muis het video-venster verlaat de controls ook vanzelf verdwijnt, kan alleen met een eigen gemaakte contro gemaakt met javascript.
Ja. Vimeo e.d. zijn helemaal apart geschreven, zelfstandige JavaScript-gebeurens. In feite volledige programma's. De meeste bestonden ook al lang voor <video> bestond. Dat gaat dus nog veel verder dan alleen eigen controls.
herman schreef:Maar wij hebben gekozen voor de standaard controls en dat als de muis het venster verlaat de video sluit. Dat vanwege het onderbreken van de datastroom. Die 2 gaan dus niet samen.
Alweer ja. Je kunt met alleen html en css die controls alleen altijd aan, of altijd uit zetten. (Altijd aan zolang je boven de video hangt.) Je ziet dus óf de video plus controls, óf geen controls maar ook geen video.
Die datastroom staat daar los van. Als je de video niet meer ziet, speelt die toch nog af. Dat kost stroom, zeker bij zes video's. Niet goed bij accu's. En als de video's geluid maken, blijf je dat geluid horen, ook als je de video niet meer ziet. Als de video eenmaal is gestart, blijft hij afspelen tot je hem expliciet stopt. En dat stoppen had ik willen 'automatiseren', dat lijkt niet echt heel moeilijk, dus daar strandt het niet op.
herman schreef:Het javascript zou dan alleen voor IE 9 en 10 en Android browser gelden.
Nee. IE 9 zou nog kunnen met conditional comments (dat <!--[if IE en zo). Maar in IE 10 werken die niet meer. Jammer, want dat was echt handig. Dan zou je terug moeten vallen op een techniek uit het verleden die browser sniffing heet, en dat is echt hopeloos onbetrouwbaar. Elke browser verzendt een string met naam en versie en zo. Helaas is daar zo ontzettend veel mee gerommeld in de tijd van de browser war, dat dat een volstrekt onbetrouwbare methode is. Het is ook nooit goed gecorrigeerd, helaas.
Bovendien moet je dan voor IE 11 het er misschien weer uithalen, en voor Firefox 43 er weer in stoppen. Zo ging dat echt in het verleden. Google maar 'ns op 'browser sniffing'.

Grotere video's enz. werkt niet. Het probleem is dat je die controls alleen maar uit of aan kunt zetten, zonder JavaScript, meer niet. De opstellers van de specificatie gingen ervan uit dat, als je meer wilde, je dat dan maar zelf moest maken. Op zich is daar ook best veel over te vinden en zo, maar het is 'n terrein waar ik helemaal niet in thuis ben. En als je er nieuw mee begint, dat kost te veel tijd voor mij.
Ik heb de afgelopen dagen heel veel gezocht en gelezen, en wel gezien dat iedereen niets meer wil dan gewoon video's. Niet wat jij wilt, dat ben ik nergens tegengekomen. Dat maakt het ook zo interessant.

Hmmm. Alcohol en nadenken? Hmmm. Nee, ik zeg niets, mij zul je niet horen :D
herman schreef:We geven het nog niet op. Toch...?
Nee. Maar déze manier werkt gewoon niet.
O, ik haal trouwens dat test gebeuren er even af. Ik bewaar het wel, maar van de site. Google wil in 'n wilde bui nog wel 'ns woest gaan zoeken naar onbekende bestanden en zo, en het staat er zo weer op.

Overigens blijft het goede nieuws natuurlijk: je kunt 'n video verstoppen achter 'n afbeelding en dan de video afspelen als de afbeelding verdwijnt via hoveren/aanraken.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Oke, we geven het even een pauze.
Ik ga morgen wat mensen vragen.
En verdomme, je, nou ja BigBill eigenlijk, schiet het gras voor m'n voeten weg.
(dat <!--[if IE en zo)
Daar was ik net wilde fantasieen over aan het maken.
Hmmm. Alcohol en nadenken? Hmmm. Nee, ik zeg niets, mij zul je niet horen
Heerlijk zo'n wijntje.

Slaap goed.
Plaats reactie