CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

krk Nybegynder

14. juli 2012 - 07:59 Der er 7 kommentarer og
1 løsning

Html5 video med Width og Height i procent

Hej alle

Jeg prøver på at få en html5 video til at blive vist med 100% width and height,men det lykkes ikke rigtig.

Det jeg gerne vil have kan ses her:
http://nanotux.com/plugins/fullscreenr/index.html
Det skal bare være med html5 video

Jeg har prøvet denne løsning, men det virker kun i Firefox
http://wasteofspace.dk/legeplads/video/video2.html
Chrome og Safari er der hvid kant over og under videoen. Jeg tør slet ikke tænke på hvordan det ser ud i IE :-)

Er der nogen der kan hjælpe?

På forhånd tak.

Synes godt om

krk Nybegynder

14. juli 2012 - 08:09 #1

Skal måske lige tilføje at når jeg resizer browseren skal videoen stadig fulde hele skærmen

Synes godt om

scootergrisen Nybegynder

14. juli 2012 - 09:28 #2

Nu har jeg prøvet og se om jeg kunne.

Man kan godt få video afspilleren til at fylde 100% men det betyder ikke at selve videobilledet også gør den.
Videobilledet holder sin aspect ratio som dermed give "ramme" over-under eller venstre-højre om videoen.

Der er en CSS "ting" der hedder objct-fit der kan bruges til at få videobilledet helt ud men det virker kun i Opera ser det ud til.

Demo : http://scootergrisen.dk/test/test0138.html

Synes godt om

krk Nybegynder

14. juli 2012 - 13:17 #3

Hej Scootergrisen

Tak for forsøget.
Jeg lader lige spørgsmålet stå åbent lidt endnu for at se om andre har løsningen :-)

Synes godt om

olebole Juniormester

14. juli 2012 - 14:49 #4

<ole>

Med mindre du får fat i en video, der er gemt i en størrelse, som tåler at blive set i en størrelse på mere end et par hundrede pixels på hver led, må rådet lyde: Glem det ... det ligner bæ og døde øgler! =)

Derudover er du nødt til at bruge JavaScript, da videoen jo skal gøres større end browseren ved langt de fleste browserstørrelser.

/mvh
</bole>

Synes godt om

krk Nybegynder

14. juli 2012 - 22:25 #5

Hej bole

Tak for dit svar og Ja, jeg giver dig ret i det kan blive noget bæ med en fullscreen video.

Det skal nu prøves alligevel :-)

Har du et forslag til hvordan det kan løses med JavaScript?

Synes godt om

olebole Juniormester

14. juli 2012 - 22:44 #6

Sikkert, men jeg gider ikke rigtig sidde og rode med det. Du skal lave et absolut positioneret lag med din video. Det lag resizer du så på browserens onresize event og placerer det i en passende position

Synes godt om

krk Nybegynder

14. juli 2012 - 22:52 #7

Okay. Jeg tror bare jeg lukker.

Scootergris, tak for forsøget :-)

Synes godt om

scootergrisen Nybegynder

15. juli 2012 - 01:23 #8

Du kunne også tegne videoen på et canvas så ville du nok kunne få det til at virke i alle browserne nu. Men nok ikke den bedste løsning også fordi så har du ikke knapperne i bunden af videoen med mindre du selv laver nogen.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS