HTML5 videospeler

Met de komst van HTML5 werd de video-tag geïntroduceerd en daarmee een alternatief voor de Adobe Flash-player om video in een site af te spelen. Dat is vooral handig op devices die geen Flash ondersteuning aanbieden.
Zoals verder in detail aangegeven is implementatie in de huidige browsers niet optimaal en voorzien we nog altijd een Flash-player als fallback voor browsers zoals Internet Explorer 6, 7 en 8.

De basiscode

1. <video width="608" height="256" controls">
2. <source src="video/walle_small.mp4">
3. </video>

Ondersteuning van video

• Firefox 3.5+, Chrome 5.0+, Opera 10.5+: Theora (.ogv files)
• Safari 3.0+, Chrome 5.0+, iPhone 3.0+, Android 2.0+: H.264 (.mp4 files, baseline Profile + AAC audio met een “low-complexity” profile)
• Internet Explorer 9, Firefox 4.0+, Chrome 6.0+, Opera 11.0+: WebM (.webm files)

Zoals je ziet, wordt de video-tag enkel in recente browsers ondersteund, en bovendien ondersteunen ze niet allemaal hetzelfde formaat. We moeten daarom 3 verschillende sources vermelden in de code. Daarbij vermelden we ook het type en de codec die gebruikt moet worden op het bijhorende bestand te kunnen lezen. De enige uitzondering daarop is de .mp4 want Android 2.2 kan dit dan weer niet lezen.
Ook de volgorde is belangrijk. De .mp4 moet eerst staat, vooral omdat iOS 3.x enkel de eerste source-tag leest en de rest overslaat.
Meer informatie over codecs en converteren vind je op Dive into HTML5

De code

1. <video width="608" height="256" controls>
2. <source src="video/walle_small.mp4"><!-- H.264 -->
3. <source src="video/walle_small.webm" type="video/webm; codecs="vp8, vorbis""><!-- WebM -->
4. <source src="video/walle_small.ogv" type="video/ogg; codecs="theora, vorbis""><!-- Theora/Vorbis -->
5. <!-- Include fallback here -->
6. </video>

Om ervoor te zorgen dat de server het juiste mime-type gebruikt plaatsen we nog deze regels in onze .htaccess file. als dit niet werkt moeten de mime-types waarschijnlijk nog toegevoegd worden aan de server zelf.

1. AddType video/ogg .ogv
2. AddType video/mp4 .mp4
3. AddType video/webm .webm

Oudere browsers

De fall-back code (bvb. een embed van een Flash player of een YouTube video) mag je tussen de video-tags, na de source-tags zetten. Recente browsers zullen die code negeren, terwijl oudere browsers de video- en source-tags dan weer niet gebruiken.

Mobiele browsers

• Android 2.2 bevat een bug waardoor de default controls van video niet gebruikt kunnen worden, we zijn dus genoodzaakt om via javascript custom controls te voorzien.
• iPad/iPhone kunnen dan weer geen custom controls inlezen dus moeten we daar terugvallen op de default controls.
• iOS 3.x op iPad en iPhone bevat een bug waardoor de video niet zal spelen als er een poster-attribute meegegeven is aan de video. Dus vooral geen poster gebruiken als je deze wil ondersteunen.

Custom controls

Als we graag wat meer controle hebben over hoe onze player eruit ziet (en als we Android 2.2 willen ondersteunen) gaan we zelf knoppen toevoegen en aansturen via JavaScript. In onderstaande custom player gebruiken we alvast deze functies, opgebouwd via JQuery:

• Play/pauze knop
• Grote play/pauze knop als overlay
• Rewind
• Tijdsverloop
• scrubber
• Totale speeltijd
• Mute
• Volume slider

Demo

Je kan de player zien in deze demo.

• Toegevoegd op: 3 May 2011
• Geschreven door: rembrand
• Tags: code, frontend, html5

• Reageer
• Permanente link
• Reacties (5)
• Links naar dit artikel

CSS sprites in de praktijk: Plan België titels

Aan de hand van CSS sprites kan je het aantal requests op een website beperken, door verschillende afbeeldingen in 1 of meerdere afbeeldingen te combineren. Dit heeft een grote impact op de performantie van je website. Als de sprites dan ook nog eens gecached worden, kan dit de rendering van de pagina’s drastisch optimaliseren.

Plan België

Zo hebben we ondermeer gezorgd voor een grondige frontend optimalisatie bij de uitwerking van de Plan België website. Het doel daar, was om het aantal requests tot een minimum beperken, omwille van het grafische karakter van de site. Daarom leek het ons wel een uitdaging om creatief aan de slag te gaan met PNG afbeeldingen en trachten 1 sprite te maken voor alle titels over heel de website.

Flexibele en herbruikbare PNG’s

Doorheen de Plan België website vind je dit soort titels:

Zoals je kan zien: verschillende kleuren en variabele breedtes zijn mogelijk.

Analyse en aanpak

Het idee dat we hadden, was om een transparante afbeelding te gebruiken, waarbij we hetgene dat wit moet zijn, wit houden en hetgene ingekleurd moet worden, transparant. Daardoor kunnen we via CSS een achtergrondafbeelding + achtergrondkleur specifiëren.

Om het gewenste effect te krijgen, maken we gebruik van een 24-bit PNG file. De afbeelding omvat tevens een semi-transparant gedeelte, waar een lichtere variant van de kleur doorschijnt (opacity 85%).

Omdat transparante 24-bit PNG files niet ondersteund worden in Internet Explorer 6, opteren we ervoor om in die browser een 8-bit PNG versie te voorzien. Het resultaat in deze browser is een iets ruwere versie, maar omdat bij Plan België het toch ging om een grunge look, vormde dat geen probleem.

De code

HTML

1. <h2>
2. <span class="border">Steun Plan</span>
3. <span class="bg"></span>
4. </h2>

Er zijn twee extra spans nodig om de styling naar behoren uit te voeren.

CSS

1. h2 {
2. position: relative;
3. font-size: 15px;
4. height: 32px;
5. }

Position wordt op relative geplaatst, om een span absoluut te kunnen positioneren t.o.v. de h2. Verder wordt een vaste hoogte bepaald, omdat de children ofwel absoluut gepositioneerd zullen zijn, ofwel een float zullen krijgen.

1. .bg {
2. position: absolute;
3. left: 0;
4. height: 18px;
5. padding: 7px 10px 3px;
6. color: #fff;
7. background: #0D5F99 url(img/sprite.png) no-repeat 0 0;
8. }

De .bg class is het gekleurde vlak achter de tekst. Het wordt absoluut gepositioneerd, krijgt een witte tekstkleur, als achtergrond een kleur én een afbeelding (het bovenste deel van de sprite).

De totale hoogte is 18px + 7px (padding-top) + 3px (padding-bottom) = 28px.

1. .border {
2. float: left;
3. margin: 2px 0 0;
4. height: 28px;
5. width: 100%;
6. background: #0D5F99 url(img/sprite.png) no-repeat 0 100%;
7. }

De .border class krijgt een float: left, alsook de achtergrondkleur en afbeelding (het onderste deel van de sprite). De hoogte wordt ook ingesteld op 28px, maar met een margin-top van 2px, zodat de lijn net onder het tekstvlak wordt getoond.

De breedte van de .border krijgt een waarde van 100%. Hij neemt dus de hele breedte van zijn parent in (dus de h2). Hierdoor zal de titel steeds even breed zijn als de container waarin hij zich bevindt (bvb smalle kolom, volledige pagina breedte, …)

Om een gelijkaardig resultaat te krijgen in IE6 waren nog enkele aanpassingen nodig in de conditional stylesheet.

1. .bg, .border {
2. background-image: url(img/sprite_8bit.png);
3. z-index: 20;
4. }
5. .example .border {
6. position: absolute;
7. margin-top: 0;
8. height: 30px;
9. z-index: 10;
10. }

Varianten

Op de Plan België website wordt ook een vereenvoudigde versie van deze titels gebruikt, waarbij een grunge lijntje onder de titel staat. Ook hier hanteren we dezelfde techniek.

Demo

Voor het gemak heb ik een demo klaargezet.

Voordelen van deze techniek

• Slechts 1 HTTP request voor de afbeelding
• Alle kleuren van titels (voor- en achtergrond alsook het semi-transparante gedeelte) kunnen eenvoudig via CSS aangepast worden
• Geen image replacement technieken nodig
• Titel zijn horizontaal schaalbaar
• Je moet geen afzonderlijke images maken voor de verschillende titels of kleuren

• Toegevoegd op: 27 May 2009
• Geschreven door: davy
• Tags: code, CSS, CSS sprites, frontend, optimalisatie, PNG, technieken

• Reageer
• Permanente link
• Reacties (2)
• Links naar dit artikel

$client = new Zend_Rest_Client('http://localhost:5984');

// compose document
$document = array();
$document['title'] = 'document title';
$document['content'] = 'document content';

// JSON-ize document
$document = Zend_Json::encode($document);

// add document (use POST here)
$response = $client->restPost('test', $document);

// print response
Zend_Debug::dump($response);

object(Zend_Http_Response)#6 (5) {
  ["version:protected"] => string(3) "1.1"
  ["code:protected"] => int(201)
  ["message:protected"] => string(7) "Created"
  ["headers:protected"] => array(6) {
    ["Server"] => string(39) "CouchDB/0.10.0a773105 (Erlang OTP/R12B)"
    ["Location"] => string(59) "http://localhost:5984/test/c447a8366d74d880f35720d92d68419e"
    ["Date"] => string(29) "Tue, 19 May 2009 18:23:59 GMT"
    ["Content-type"] => string(24) "text/plain;charset=utf-8"
    ["Content-length"] => string(2) "73"
    ["Cache-control"] => string(15) "must-revalidate"
  }
  ["body:protected"] => string(73) "{"ok":true,"id":"c447a8366d74d880f35720d92d68419e","rev":"1-3753022840"}
"
}

// get document
$response = $client->restGet('test/c447a8366d74d880f35720d92d68419e');

// un-Json-ize document
$document = Zend_Json::decode($response->getBody());

// print document
Zend_Debug::dump($document);

// get document
$response = $client->restGet('test/c447a8366d74d880f35720d92d68419e');

// un-Json-ize document
$document = Zend_Json::decode($response->getBody());

// change values
$document['title'] = '"updated title!"';

// update document
$response = $client->restPut('test/c447a8366d74d880f35720d92d68419e', Zend_Json::encode($document));

// print response
Zend_Debug::dump($response);

object(Zend_Http_Response)#7 (5) {
  ["version:protected"] => string(3) "1.1"
  ["code:protected"] => int(201)
  ["message:protected"] => string(7) "Created"
  ["headers:protected"] => array(7) {
    ["Server"] => string(39) "CouchDB/0.10.0a773105 (Erlang OTP/R12B)"
    ["Location"] => string(59) "http://localhost:5984/test/c447a8366d74d880f35720d92d68419e"
    ["Etag"] => string(13) ""2-114293395""
    ["Date"] => string(29) "Tue, 19 May 2009 18:41:10 GMT"
    ["Content-type"] => string(24) "text/plain;charset=utf-8"
    ["Content-length"] => string(2) "72"
    ["Cache-control"] => string(15) "must-revalidate"
  }
  ["body:protected"] => string(72) "{"ok":true,"id":"c447a8366d74d880f35720d92d68419e","rev":"2-114293395"}
"
}