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
<video width="608" height="256" controls"><source src="video/walle_small.mp4"></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
<video width="608" height="256" controls><source src="video/walle_small.mp4"><!-- H.264 --><source src="video/walle_small.webm" type="video/webm; codecs="vp8, vorbis""><!-- WebM --><source src="video/walle_small.ogv" type="video/ogg; codecs="theora, vorbis""><!-- Theora/Vorbis --><!-- Include fallback here --></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.
- AddType video/ogg .ogv
- AddType video/mp4 .mp4
- 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.
Stadsradio FM Brussel lanceerde een paar weken geleden een nieuwe website. Marlon zorgde voor de uitwerking van het design en de volledige ontwikkeling van de website.
De vorige versie van de website, gelanceerd in 2004, werd ook door ons gebouwd. 6 jaar later was het dringend tijd voor een volledige vernieuwing. Het op maat gemaakte Content Management Systeem (CMS) dat de redactie gebruikt om de website up to date te houden werd grotendeels behouden; het systeem werd alleen op een aantal punten uitgebreid of aangepast.
Het is vooral de website zelf die grondig werd aangepakt. Van design tot wat er precies waar getoond wordt, alles werd vernieuwd. De homepagina wordt veel vaker geupdate, achterliggende pagina’s kregen related content, er wordt gebruik gemaakt van tags en de redactie kan razendsnel artikels verzamelen in nieuwe overzichtspagina’s (bij een bepaalde gebeurtenis, evenement of rond een bepaald thema).
Ook het aanbieden van audio werd volledig herbekeken. De live player is niet enkel meer het ding waarmee je naar de radio luistert, maar biedt een twitter feed aan en de meest recente artikels van de homepagina. De on-demand player biedt de audio nu ook aan als een stream, zodat je razendsnel kan doorspoelen naar een onderdeel in het programma, zonder eerst het hele bestand te moeten inladen. De on-demand player is ook uitgebreid met gerelateerde inhoud en extra audio fragmenten. Beide players werken op basis van een Flash Media Server stream.
Doorheen de site wordt ook inhoud van elders ingepast zoals Flickr slideshows, YouTube video’s, twitter feeds, RSS feeds, etc..
Dit is het eerste deel van een reeks artikels over CSS technieken waarbij sprites op een creatieve manier worden gebruikt om flexibele en performante resultaten te bekomen.
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:
Voorbeeld titels op Plan België website
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%).
(Semi)transparante 24-bit PNG waarbij ter illustratie het transparante gedeelte groen is ingekleurd
De sprite bestaat dus uit twee delen: .bg en .border
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
-
<h2><span class="border">Steun Plan</span><span class="bg"></span></h2>
- Er zijn twee extra spans nodig om de styling naar behoren uit te voeren.
- CSS
-
h2 {position: relative;font-size: 15px;height: 32px;}
- 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.
-
.bg {position: absolute;left: 0;height: 18px;padding: 7px 10px 3px;color: #fff;background: #0D5F99 url(img/sprite.png) no-repeat 0 0;}
- 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.
-
.border {float: left;margin: 2px 0 0;height: 28px;width: 100%;background: #0D5F99 url(img/sprite.png) no-repeat 0 100%;}
- 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.
.bg, .border {background-image: url(img/sprite_8bit.png);z-index: 20;}.example .border {position: absolute;margin-top: 0;height: 30px;z-index: 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.
Voorbeeld van vereenvoudigde PNG titels
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
Flash & custom fonts, het blijft een speciale combinatie. Op zich is een custom font gebruiken niet moeilijk, maar wat als je extended ASCII karakters wil gebruiken?
Bij de uitwerking van een Flash ActionScript 3 project voor Toyota Europe werd ons de vraag gesteld om ondersteuning te bieden voor andere talen, met hun eigen tekenset, zoals o.a. een Cyrillische tekenset. Zo gingen wij op zoek naar de meest efficiënte manier om een custom font te embedden, met ondersteuning voor de meer exotische karakters.
Fonts in de library
Een eerste, logische stap zou zijn om het gewenste font in onze Flash library op te slaan, en daaruit te exporteren.
Met het font in onze library kunnen we nu in de code duiken. We creëren een TextFormat object, waarin we de .name property invullen met de naam van ons font (de naam zoals je die ziet in elke tekst editor). Een goede manier om de naam van het font op te halen is via de Font.enumerateFonts() methode.
var fonts:Array = Font.enumerateFonts(false);
fonts.sortOn("fontName", Array.CASEINSENSITIVE);
var fmt:TextFormat = new TextFormat();
fmt.font = fonts[0].fontName; // Naam van het font als String
fmt.color = 0x4E3E16;
fmt.size = 20;
fmt.bold = false;
Om tekst te tonen hebben we natuurlijk een TextField nodig. Een overzicht van de belangrijkste properties.
var normalField:TextField = new TextField();
normalField.defaultTextFormat = fmt;
normalField.embedFonts = true;
normalField.text = "Custom font\n.text property\n&éèà# Ъ ē Ψ";
Als resultaat krijgen we volgende Flash movie. Het linkse veld is normale tekst, het rechtse html tekst.
Zoals je ziet worden de ‘gewone’ ASCII tekens en accenten getoond, de Cyrillische en Griekse tekens zijn echter in geen van beide gevallen zichtbaar.
[kml_flashembed fversion="9.0.0" movie="/wp-content/uploads/2009/01/as3-fontembedding-swf-01.swf" targetclass="flashmovie" publishmethod="dynamic" width="471" height="140"]
[/kml_flashembed]
Een font embedden in een tekstveld
Als we even terug de Flash IDE induiken, kunnen we een nieuw Flash AS3 bestand aanmaken. In dit bestand creëren we via de IDE een dynamisch tekstveld. In dit veld embedden we ons font via de ‘embed’-knop.
In ons geval embedden we de volgende karakter sets:
- Uppercase [A..Z]
- Lowercase [a..z]
- Numerals [0..9]
- Punctuation [!@#%...]
- Basic Latin
- Latin I
- Latin Extended A
- Greek
- Cyrillic
Als we tekst in dit tekstveld stoppen, zien we dat onze tekst getoond wordt, het font zit dus mee in onze movie.
Het zou natuurlijk nogal omslachtig zijn om per blok tekst een veld manueel op de stage te plaatsen. Een oplossing hiervoor is dat we ons tekstveld in een MovieClip stoppen. We hebben nu dus een MovieClip op onze stage, met daarin een TextField waarin ons font zit.
Deze MovieClip kunnen we nu van onze stage verwijderen, daar die toch nog in de library zit. Als we nu de MovieClip een klasse naam geven (bij de linkage eigenschappen) kunnen we deze exporteren.
Merk op dat ik de Sprite klasse als base class definieer, dit omdat we in deze ‘MovieClip’ geen gebruik maken van de timeline mogelijkheden.
Nu kunnen we ons font binnen onze applicatie gebruiken, mits we deze MovieClip 1x instantieren (zodat het font mee gecompileerd wordt).
new EmbeddedFont(); // Eénmalig instantieren
var field:TextField = new TextField();
field.embedFonts = true;
field.htmlText = "<font face=\"My Font\" size=\"20\" color=\"#4e3e16\">Custom font<br>.htmlText property<br>&éèà# Ъ ē Ψ</font>";
addChild(field);
Dit is echter niet praktisch, als we bijvoorbeeld meerdere SWF bestanden gebruiken zouden we telkens deze MovieClip moeten kopiëren naar elk FLA bestand. En wat dan als we helemaal geen FLA bestanden gebruiken om te compileren (bvb. via het Flex SDK)?
Een tekstveld in een SWC
Hoe kunnen we er nu voor zorgen dat we gemakkelijk aan onze geëxporteerde Sprite kunnen, zodat deze kan geinstantieerd worden? Via een centraal SWC bestand natuurlijk.
Bij de publicatie instellingen van onze FLA kunnen we er voor kiezen om deze Flash movie ook als SWC bestand exporteren.
Dit SWC bestand bevat dus onze Sprite met daarin het tekstveld en kunnen we voortaan gebruiken doorheen onze applicaties.
In ons voorbeeld hebben we de Sprite geëxporteerd als klasse EmbeddedFont. Nu kunnen we in een willekeurige Flash movie deze SWC integreren (via FDT kun je deze bijvoorbeeld aan je ’source folder’ toevoegen). De geëxporteerde klasse kan nu gebruikt worden in ons nieuw project.
Stel dat we in onze Flash applicatie een tekstveld willen, met daarin terug enkele speciale karakters, het enige wat we nu moeten doen is eenmalig een instantie aanmaken van onze geëxporteerde Sprite, zodat de compiler weet dat deze mee in de SWF moet.
Dan kunnen we doorheen alle klasses van de applicatie tekstvelden aanmaken, en ons font gebruiken.
new EmbeddedFont(); // Eénmalig instantieren
var field:TextField = new TextField();
field.embedFonts = true;
field.htmlText = "<font face=\"My Font\" size=\"20\" color=\"#4e3e16\">Custom font<br>.htmlText property<br>&éèà# Ъ ē Ψ</font>";
addChild(field);
Omdat we deze keer gebruik maken van de .htmlText property hoeven we hier geen TextFormat object aan te maken. Wil je gewoon de .text property gebruiken, dan werk je natuurlijk best wel met een TextFormat object.
Let erop dat we terug de naam van het font letterlijk moeten gebruiken, zoals je deze bijvoorbeeld in de Flash IDE ziet.
Links hebben we terug een tekstveld opgevuld via de .text property, links via de .htmlText property.
[kml_flashembed fversion="9.0.0" movie="/wp-content/uploads/2009/01/as3-fontembedding-swf-02.swf" targetclass="flashmovie" publishmethod="dynamic" width="471" height="140"]
[/kml_flashembed]
Meerdere SWF-files
Alles in orde zou je denken, maar wat dan als een applicatie meerdere SWF bestanden bevat?
Links hebben we hier een tekstveld binnen de SWF waarin we onze geëxporteerde EmbeddedFont klasse instantieren, het rechtse tekstveld zit in een SWF die bij runtime ingeladen wordt.
[kml_flashembed fversion="9.0.0" movie="/wp-content/uploads/2009/01/as3-fontembedding-swf-03.swf" targetclass="flashmovie" publishmethod="dynamic" width="471" height="140"]
[/kml_flashembed]
Ons font wordt dus niet getoond doorheen alle SWF bestanden.
Doordat we met een SWC bestand werken waarin ons font vervat zit, kunnen we dit gemakkelijk oplossen. Een gemakkelijke manier is om gewoon binnen elk SWF bestand, onze geëxporteerde klasse één maal te importeren.
In onderstaand voorbeeld hebben we terug een SWF bestand, met links een tekstveld, en rechts een ingeladen SWF bestand met ook een tekstveld. In beide SWF bestanden wordt onze klasse 1x geinstantieerd, en nu worden alle tekens getoond.
[kml_flashembed fversion="9.0.0" movie="/wp-content/uploads/2009/01/as3-fontembedding-swf-04.swf" targetclass="flashmovie" publishmethod="dynamic" width="471" height="140"]
[/kml_flashembed]
Conclusie
Er zijn natuurlijk meerdere manieren om fonts te gebruiken binnen Flash, en elke manier heeft zijn voor- en nadelen. Uit ervaring merken wij echter dat deze manier weinig omslachtig en zeer flexibel is. Ook vooral de ondersteuning van allerhande tekensets naar wens zorgt ervoor dat deze implementatie gemakkelijk werkt.
