Dilemma: Iframe of HTML5 video

[smierlo]

Hallo,

Ik zit met een "klein" technisch dilemma. Graag zou ik daarbij wat hulp willen hebben in de vorm van advies/ervaring van deskundige medemensen


Inleiding
Ik ben de eigenaar van een kleine website (*snip* spam). Deze website biedt muziek videos aan om te kijken en te downloaden. Ik heb deze site 3 jaar geleden vernieuwd. Daarbij werd het mogelijk om de muziek videos online al te bekijken. Dit omdat dergelijke muziek videos vaak geweigerd werden door Youtube en om de boel ook wat toegankelijker te maken. Echter ben ik beperkt thuis in PHP/HTML dus met wat hulp heb ik het voor elkaar gekregen om Flash-videos online te krijgen. De originele bestanden (van AVI tot WMV) zijn gewoon te downloaden voor bezoekers, dat is geen probleem.

Deze flash videos nemen nu ongeveer 9GB aan ruimte in beslag. In de wereld van webhosting voor non-profit particulieren is dat veel. Ik heb het geluk destijds tijdig bij Mijndomein.nl ingestapt te zijn en heb die ruimte.

Echter de wereld veranderd snel! in 2010 waren tablets nog niet echt heel actief, en telefoons was ook nog vrij zozo. Nu is het bij wijze van spreken, alleen nog maar tablets en telefoons. Dus mijn Flash zorgt ervoor dat ik mijn doelgroep niet lekker kan bereiken. Dus ik wil overstappen naar het aanbieden van videos, zonder flash, en wat werkbaar is op PC's Laptops, Ipad, iOS, Android, Windows Phone, I.E., Firefox, Chrome, de hele mikmak.

Ik heb hiervoor twee opties denk ik (mocht je een betere 3e hebben, dan hoor ik het graag) deze zijn:

• HTML5 video
• Iframe i.c.m. bijv. Google Drive

Issue
De video die ik wil hosten staan nu of lokaal op mijn server, of als flash file online bij bijv. Mijndomein. Voor HTML5 heb ik echter MP4/OGG/WEBM nodig. Daarvoor is er online niet voldoende ruimte, dit omdat HTML5 niet met FTP werkt. Echter is mijn inziens HTML5 wel de mooiste oplossing. Ik zou wat met Dropbox kunnen doen, maar 2GB/3GB is niet voldoende. Dan heb ik minimaal 10 dropbox accounts nodig.
Veel bestanden moet ik dan ook omzetten. Als ik dit ga doen heb ik zelfs geen 20GB nodig, maar bijv. 60GB (3x zoveel bestanden), dat zijn zelfs 20 tot 30 Dropbox accounts. Alleen met dropbox krijg je een html-link naar je video. Dit kan niet met Skydrive of met Google Drive.


Ik kan ook kiezen om alle originele bestande via Google Drive te plaatsen. Daar krijg je 15GB en de videos kan je insluiten m.b.v. Iframe. Ik heb dan maar 2 accounts nodig en Iframe draait ook overal. Enige nadeel is dat ik het idee heb dat Iframe hiervoor niet bedoeld is, HTML5 mooier is (ook qua player, maar ook qua looks), I.E. kan het (Iframe) niet lekker tonen, terwijl Chrome dat al wat beter doet. Echter I.E. genereert automatisch een poster voor de Iframe, dit doet Chrome weer niet (dan heb je zwart beeld). Iframe zou ook via Skydrive kunnen, maar dan kan je de video niet echt embedden, door erop te klikken ga je naar de site van skydrive, dus dat is ook geen optie.

Ik zou evt. ook thuis een apache op mijn ftp server kunnen zetten, en via html dan mijn videobestanden een html-link kunnen geven, maar dan zit ik ook weer met security. Ruimte is daar het issue niet.

Aanvullend zit ik nog met hetgeen, moet ik nog een Flash-Fallback inbouwen in deze tijd. Mijn bezoekers zijn als volgt verdeeld: 45% i.E. / 30% Firefox / 10% Chrome / 15% overig. Flash is eigenlijk niet meer nodig dan lijkt mij.

Advies
Wat kan ik nu het beste kiezen? Er mogen geen extra kosten aan verbonden zijn (je kan dropbox voor 9,99 per maand naar 100GB brengen), Dat vind ik zonde. Mijn website komen maar 300/600 unieke bezoekers per maand. is er een reden om juist niet te kiezen voor Iframe? Wat is jullie mening... Alles om te helpen dat ik een keuze kan maken..

Ik heb een proef pagina gemaakt waar ik een nu een HTML5 en Iframe (google drive) voorbeeld heb staan: dit kan je vinden via *snip* spam
Als je mijn originele site wil zien, moet je op het logo klikken, dan ga je naar de index.

Alvast bedankt voor jullie reacties

[ Voor 2% gewijzigd door RobIII op 17-11-2013 16:31 ]

[NNF]

Je hoeft helemaal niet te gaan klooien met verschillende formaten. Gewoon je bestaande videos converteren naar H.264/AAC (MP4) en een player als Projekktor of VideoJS gebruiken op je site voor het afspelen. Die hebben een Flash-fallback-component ingebouwd voor mensen met antieke browsers (iOS, Android, IE >= 9, Firefox en Chrome kunnen allemaal prima overweg met MP4 i.c.m. het <video>-element), dus daar heb je verder geen werk aan. De geconverteerde videos kunnen dan gewoon in de plaats komen van je huidige FLV's.

Als je nog meer ruimte wil winnen dan gooi je die AVI's en WMV's ook gewoon van je server, dan kunnen mensen de MP4's downloaden als ze dat leuk vinden

[ Voor 20% gewijzigd door NNF op 17-11-2013 16:31 ]

[Scrummie]

Buiten alle technische verhalen om; waarom kies je niet voor het hosten van je filmpjes bij YouTube? Je kan ze dan gewoon embedden in je site, je hebt zelf niet meer de webruimte nodig, het converteren doen hun voor je, en ze leveren een player die iedereen af kan spelen.

[RobIII]

Voor een testpagina kun je jsfiddle gebruiken of een pagina die enkel-en-alleen je probleem/issue toont en dus is ontdaan van alle overige zaken (merknamen maar ook sidebars, menu's etc. etc.). We kunnen je prima helpen zonder namedropping en kunnen ons beter focussen op je vraag en mogelijke oplossing als alle overige zaken aan de kant worden geschoven.

[smierlo]

NNF schreef op zondag 17 november 2013 @ 16:28:
Je hoeft helemaal niet te gaan klooien met verschillende formaten. Gewoon je bestaande videos converteren naar H.264/AAC (MP4) en een player als Projekktor of VideoJS gebruiken op je site voor het afspelen. Die hebben een Flash-fallback-component ingebouwd voor mensen met antieke browsers (iOS, Android, IE >= 9, Firefox en Chrome kunnen allemaal prima overweg met MP4 i.c.m. het <video>-element), dus daar heb je verder geen werk aan. De geconverteerde videos kunnen dan gewoon in de plaats komen van je huidige FLV's.

Als je nog meer ruimte wil winnen dan gooi je die AVI's en WMV's ook gewoon van je server, dan kunnen mensen de MP4's downloaden als ze dat leuk vinden

VideoJS heb ik staan, maar ik zag de meerwaarde nog niet boven het gewone HTML5 video. Maar als ik het goed begrijp is via de CSS de fallback naar flash ingebouwd. Dat zou ruimte vrij kunnen maken online. (ong. 9GB) Desondanks zit ik dan nog met 11GB die ik niet online heb. dan moet ik daarvoor apache of dropbox gebruiken. en als OGG en WEBM is dan niet nodig.. okay, daar heb ik wat aan

quote: scrummie

Buiten alle technische verhalen om; waarom kies je niet voor het hosten van je filmpjes bij YouTube? Je kan ze dan gewoon embedden in je site, je hebt zelf niet meer de webruimte nodig, het converteren doen hun voor je, en ze leveren een player die iedereen af kan spelen.

Youtube laat geen Star Trek Music Videos toe.. dit is afhankelijk van de muziek en beelden.

quote: Roblll

Voor een testpagina kun je jsfiddle gebruiken of een pagina die enkel-en-alleen je probleem/issue toont en dus is ontdaan van alle overige zaken (merknamen maar ook sidebars, menu's etc. etc.). We kunnen je prima helpen zonder namedropping en kunnen ons beter focussen op je vraag en mogelijke oplossing als alle overige zaken aan de kant worden geschoven.

jsfiddle is onhandig voor mij. Ik wil weten hoe het eruit ziet in mijn eigen site, met mijn achtergrond en in de lay-out die ik heb staan. Verder heb ik geen probleem met code, dus speelt dat minder. Ik wist niet (kan het ook niet uit het "spam-linkje" verhaal halen) dat het verboden was om naar een non-profit veilige website naar toe te linken zonder reclame doel-einden.. Sorry daarvoor.

[Bosmonster]

Jouw vragen zijn prima op te lossen zonder te weten hoe je website eruitziet, daarom de spam-link.

Wat betreft je vraag. Als je perse zelf wil hosten (af te raden, maar goed):

Je hebt het over H.264(MP4), OGG en WEBM. Je hebt alleen die eerste nodig met een goede Flash-fallback (zoals VideoJS of jwplayer, etc).

Moderne (of niet-eigenwijze ) browsers en mobile (iOS, Android) ondersteunen allemaal H.264 (MP4). De rest valt dan terug naar de Flash-versie. Grote voordeel aan Flash is namelijk dat die, ongeacht de browser, H.264 kan afspelen.

Probleem wat je nog wel hebt is dat je dan maar 1 formaat aanbiedt en geen bandwidth throttling oid kunt toepassen (lagere kwaliteit voor mobiele verbinding, maar mooi 1080 voor desktops). YouTube doet al die conversie en throttling wel voor je, naast het hosten van die tientallen GB's aan filmpjes.

Je zegt dat ze die filmjpes niet toestaan, wat dan waarschijnlijk met copyright issues te maken heeft. Die heb je dan natuurlijk ook op je eigen domein

[smierlo]

Bosmonster schreef op maandag 18 november 2013 @ 11:55:
Jouw vragen zijn prima op te lossen zonder te weten hoe je website eruitziet, daarom de spam-link.

Wat betreft je vraag. Als je perse zelf wil hosten (af te raden, maar goed):

Je hebt het over H.264(MP4), OGG en WEBM. Je hebt alleen die eerste nodig met een goede Flash-fallback (zoals VideoJS of jwplayer, etc).

Moderne (of niet-eigenwijze ) browsers en mobile (iOS, Android) ondersteunen allemaal H.264 (MP4). De rest valt dan terug naar de Flash-versie. Grote voordeel aan Flash is namelijk dat die, ongeacht de browser, H.264 kan afspelen.

Probleem wat je nog wel hebt is dat je dan maar 1 formaat aanbiedt en geen bandwidth throttling oid kunt toepassen (lagere kwaliteit voor mobiele verbinding, maar mooi 1080 voor desktops). YouTube doet al die conversie en throttling wel voor je, naast het hosten van die tientallen GB's aan filmpjes.

Je zegt dat ze die filmjpes niet toestaan, wat dan waarschijnlijk met copyright issues te maken heeft. Die heb je dan natuurlijk ook op je eigen domein

Ik hoef geen rekening te houden met banwidth throttling o.i.d., klanten met een lagere verbinding hebben daar nu ook al last van. Niet alles is 1080, bij far niet. Houd er rekening mee dat ik op mijn website 500 videos aanbiedt die de afgelopen 30 jaar gemaakt zijn. Alles is op basis van Star Trek, daar is nog niet veel full HD van uit .

Nogmaals, discussie YouTube heeft geen nut. "mijn" filmpjes (vele door andere gemaakt) vallen bij amerikaans recht onder het fair use, alleen YouTube wordt ook gedwongen door CBS/Paramount en de grote partijen. Filmpjes kunnen dus niet op youtube. Voordat ik er ook 10 op heb staan, wordt mijn account gewist. Met mijn eigen website heb ik daar geen last van. Ten eerste valt dit ook onder fair use, en ten tweede val ik niet onder het amerikaans recht.. (NL server, die in NL staat). Dus ik heb geen copyright issues. Hier wil ik de discussie ook niet over hebben.

Wat ik echter nog niet hoor is ook maar iets over het gebruik van Ifram i.c.m. Google Drive. Ik ken de werking van HTMl5 video, en ken de mogelijkheden. Alleen voor HTML5 moet ik al mijn bestanden (ruim 20GB, 500st) omzetten naar MP4. Terwijl met Iframe hoef ik ze alleen maar op mijn google drive te zetten en ben ik klaar. Hoef de bestanden niet om te zetten, het is altijd afspeelbaar.

Iframe is de makkelijkste oplossing voor mij. Weinig werk, maar ik denk dat het niet de mooiste oplossing is. Graag hoor ik er redenen zijn waarom ik Iframe beter niet kan gebruiken t.o.v. HTML5.

Bij HTML5 heb ik de uitdaging om via http de videos te kunnen benaderen. Dit kan namelijk niet via Google Drive of SkyDrive, maar alleen via DropBox, maar die biedt maar beperkte aantal GB's aan. dus kom ik aanzienlijk te kort. Misschien zijn er nog oplossingen die ik over het hoofd zie..

[TERW_DAN]

Als een iframe toch het makkelijkst werkt, dan pak je dat toch? Ook die kun je stylen zodat het in je website eruit ziet zoals je wilt.

[Bosmonster]

Ik snap je Iframe oplossing niet zo goed. Wat doet Google Drive dan? Die zet je video's om en geeft je een standaard player oid?

Verder met TERW_DAN. Waarom moeilijk doen als het makkelijk kan. Ook al heb ik geen idee wat dat iframe precies gaat doen

[ Voor 33% gewijzigd door Bosmonster op 21-11-2013 10:04 ]

[Keeper]

Je zou het ook op Amazon S3 kunnen hosten (eventueel nog met CloudFront ervoor). Snelle rekensom leert dat je dan een paar dollar per maand kwijt bent om 60GB aan filmpjes te hosten. Hoeveel precies kan je berekenen met http://calculator.s3.amazonaws.com/calc5.html (links voor S3 kiezen).

[Verwijderd]

Als je video via Youtube embed via Iframe, heb je probleem dat video niet responsive is voor kleinere schermen, zoals voor smartphones. Iframe hoogte op 100% instellen is meestal ook niet wenselijk omdat video op desktop dan te klein of te ondiep wordt. Ideale tussenweg is om CSS aan te passen. Is simpel uitgelegd op dit WordPress blog. Ik heb deze Youtube responsive embedden oplossing geprobeerd en het werkt. Het gaat bij mij om Genesis WordPress CSS aanpassen, gaat zo: *knip*

Modbreak:

Rot op met je spam.

[ Voor 10% gewijzigd door NMe op 16-09-2017 16:31 ]