HTML5 en PHP
Ik ben bezig om de nieuwe mogelijkheden van HTML5 eens door te nemen. Nu kom ik op het volgende probleem:
Als ik in een leeg html-formulier een pagina aanmaak met HTML5-code dan gaat alles goed.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<video controls="controls" autoplay="autoplay">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Dit bovenstaande als voorbeeld.
Pas ik deze code toe in een bestaand (HTML4) document, bijv in een gecombineerd PHP/HTML-document, dan blijft de video uit. (Als ik hetr doc save als een PHP-doc)
Wie heeft ervaringen op dit gebied? Is het wellicht zo dat mogelijk de PHP-parser e.e.a. (nog) niet kan verwerken of moet ik de oorzaak elders zoeken.
George van Baasbank
Kijk eens naar de HTML-source van beiden en vergelijk deze eens.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Blaat</title>
</head>
<body>
<video controls="controls" autoplay="autoplay">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
<html>
<head>
<title>Blaat</title>
</head>
<body>
<video controls="controls" autoplay="autoplay">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
Gewijzigd op 20/01/2012 12:33:33 door Bram Boos
Als voorbeeld heb ik het volgende doc beschikbaar:
http://www.vanbaasbank.nl/index_2.php
Bekijk de broncode eens en, indien mogelijk, kijk eens op regel 60 van de broncode. Daar staat de <video>-tag maar op het scherm is niets te zien. Oh ja, ik heb gecontroleerd of het mp4-bestand aanwezig is en dat is in orde.
Klik voor de juiste broncode rechtsonder op de pagina. In het midden zit je op een pagina die door een iframe wordt ingelezen.
Gewijzigd op 20/01/2012 13:02:22 door George van Baasbank
Code (php)
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
gebruik eens:
Gewijzigd op 20/01/2012 13:08:49 door - Ariën -
Het lijkt er op dat mijn mp4-bestand problemen geeft.
<video> is een HTML5-tag, het is dan logisch dat hij niet werkt met HTML4. Probeer <object> en <embed> te gebruiken.
Hier kun je een overzicht vinden van het support voor de verschillende types, waarschijnlijk werk je in een browser welke geen .mp4 ondersteund.
http://www.w3schools.com/html5/html5_video.asp
Om dit het snelste te ondervangen heb je van de video alle 3 de bestandstypes nodig en geef je deze alle 3 mee, zodat de browser vanzelf de goede inlaadt.
Je zou ook eerst de browser kunnen opvragen met javascript bijvoorbeeld en vervolgens de src van de video op de goeie video kunnen zetten.
Verder bestaat er geen HTML5 doctype maar wordt elk doctype door een browser gelezen als HTML5 doctype.
Wel moet het doctype op regel 1 komen en niet op regel 2 en zijn tabellen niet voor lay-out... Ook inline CSS is uit den boze.
Kortom: Ga eerst gewoon goed HTML4.01 leren en dan pas HTML5.
Wouter J op 20/01/2012 14:46:14:
@aar en @Jeffrey, doctype maakt niks uit. Een browser parsed het altijd met de nieuwste parser, dus met HTML5parser.
** ingekort wegens gezeik **
** ingekort wegens gezeik **
Inline CSS in ongewenst, niet uit den boze vind ik.
Beter in een document dan inline, maar het is niet verboden.
Want HTML gaat niet over de opmaak, maar over de semantische weergave van tekst. CSS gaat over de opmaak. En inline CSS is eigenlijk geen CSS maar HTML en dus is het verkeerd.
Overigens als je op het bericht voor je reageert is een quote niet nodig en als je op 1 gedeelte reageert kun je de rest er beter afknippen. Dat maakt het topic wat leesbaarder.
Wouter bedoelt gewoon te zeggen dat je geen inline css moet gebruiken en daar heeft ie gewoon gelijk in.
Als ik even iets wil testen gebruik ik ook gewoon inline css, denk toch echt dat ik zelf de baas ben over mijn document, en als je het over die boeg gaat gooien, als je html 5 gebruikt is het ook ongewenst en lelijk om in je doctype te zetten dat het om html4 of xhtml gaat, ookal wordt hij geparsed als HTML5. Uiteindelijk maakt het ook vrij weinig uit, want daar kwam de TS niet voor.
Ik weet niet wat je bedoelt met "denk toch echt dat ik zelf de baas ben over mijn document" maar ik vind het een vreemde uitspraak. Wouter geeft gewoon een advies. Bijzonder dat daar zo vreemd op gereageerd wordt. Maar goed, back on topic. Topicstarter heeft een nieuewe html5 functie gebruikt die in voorgaande html versies niet werkt. Dat is wat er aan de hand is.
On topic. Dat is niet wat er aan de hand is, want hier werkt het gewoon.
"Ook inline CSS is uit den boze."
Ik zie niet wat daar bazig aan is?
Welke browser gebruik jij?
Maar wat jquery vaak doet is ook inline css..? Dus dan kan het toch niet verboden worden?
Nogmaals, inline CSS is niet verboden, maar ik zou ook aanraden het niet te gebruiken. Maar verboden is het niet..
En @Jeffery G, als je Firefox download bestaat er een plugin voor die heet "Firebug" hierdoor kan je elementen van de bepaalde HTML pagina bekijken en ook on-the-fly HTML en CSS aanpassen. Is super handig!
@Wouter, inline CSS is geen HTML, maar een extentie. Je geeft dmv een html element "style" wat extra css mee. Want zonder CSS kán je helemaal geen vormgeven aan je pagina. Toch?
Waar het ook staat, inline of niet.. blijft CSS.
Verder is de Webkit Webinspector tool (ook wel Chrome Dev. tools) veel beter dan FireBug...
Quote:
Maar wat jquery vaak doet is ook inline css..? Dus dan kan het toch niet verboden worden?
De stelling jQuery doet het dus het is goed is natuurlijk een beetje vaag. jQuery is ook gewoon een lib. om makkelijker JS uit te voeren meer niet.
En JavaScript werkt alleen via inline CSS. Vandaar dat jQuery genoodzaakt is om ook inline CSS te gebruiken.
Veel beter is een mening..
Ik geef een optie die ik vaak gebruik omdat ik met FF werk en geen GC.. Heb het niet over beter of best ofzo. Maargoed.
Ik heb niet gezegd dat als jQuery het doet dat het goed is, maar jij hebt het over verbannen van inline CSS. Als dat dus zo is, kan jQuery bijvoorbeeld ook geen fade-transitie maken, want dat gaat dmv inline CSS.
Als HTML je inline CSS afhandeld, hoe doet hij dat dan met externe CSS? Die rendert hij dan toch ook? haha
Feit: Gaat erom, je MAG inline-css gebruiken, maar het word afgeraden.
Klaar! verder met de echte problemen.
Ben bekend met de tools, graag dan wel argumenten waarom de Webkit webinspector veel beter is dan firebug? K werk zelf niet graag in Chrome, FF is al jaren mijn favortiet en kan met Firebug ook veel beter overweg, puur gewenning, zou niet weten er mist bij firebug wat chrome wel heeft..?
JS debug console enzo heb ik zelf niet nodig.
Dit voldoet aan mijn wensen en ben dik tevreden hiermee.
Het enigste is dat FF bij mij vaak vast staat en langzamer opstart dan Chrome, maar daarvoor ga ik niet switchen.
Firefox vind ik zelf erg fijn. :)
Hopelijk kom je eruit met de problemen die je ondervind Jef.
-- EDIT --
En vind dat Wouter soms een beetje hoog van de toren blaast, net alsof hij alles perfect weet en iedereen maar bij achteraan moet sluiten.
Ik houdt niet echt van dit soort mensen, betweters al zeg ik het zelf.
Heb zelf een sterke mening, maar weet niet alles beter hoor.