juni 2009

HTML5 Audio en meer Audio Embedding

In vervolg op mijn blog over HTML 5 Video en audio support geef ik hier links naar een ScreenCast en de HTML5 blogpagina bij Webkit.

CSS Tricks heeft een video uitleg van ca. 23 minuten. Daarin worden de diverse mogelijkheden getoond om audio bestanden in een webpagina te tonen. De screencast kwam ik tegen in Miro.

#59: Embedding Audio

Different Ways to Embed Audio

Op de Surfin' Safari (Webkit) blog pagina staat een verhandeling over het HTML5 Video element. Bekijk de pagina, maar vooral de broncode van die pagina hoe e.e.a. in zijn werk gaat.

Het beantwoordt indirect ook mijn opmerking over het vormgeven van de speler.

HTML5 Media Support

Zoals altijd: flink oefenen.

Wetenschappelijk artikel

Vandaag m'n eerste wetenschappelijke artikel gepubliceerd.

Decoupling Online Algorithms from IPv6 in Fiber-Optic Cables

Heb geen mallemoer idee waar het over gaat. Het is dan ook gegenereerd door een programma.

Een en ander naar aanleiding van een nep artikel in een wetenschappelijk tijdschrift.

Lees het verhaal in Nature. Bij de commentaren staat een link naar het verslag van de auteur.

Maak zelf je wetenschappelijk artikel bij : SCIgen - An Automatic CS Paper Generator.

HTML 5 Video en audio support

Op de WWDC 2009 van Apple in San Francisco van vandaag werd gesproken over HTML 5 support voor de iPhone/iPod touch. Een van die ontwikkelingen is het gebruik van het VIDEO en AUDIO HTML element in plaats van het OBJECT/EMBED element.

Safari, ook voor de Desktop, ondersteunt HTML 5. Dus gelijk effe proberen.

De videos hieronder worden vertoond met het VIDEO HTML element. Zowel een .m4v, .flv als een .wmv video worden getoond. Wellicht omdat ik de Flip4Mac en Perian plugins gebruik, die weer door QuickTime worden gebruikt. Let ook op dat je nu geen pixels voor de controller hoeft toe te voegen om de juiste hoogte te krijgen. De width en height van de video voldoen. De controller zoemt in en uit beeld als je de muis over het beeld beweegt.

Firefox, Flock en Internet Explorer ondersteunen het niet en tonen de vervangende tekst.

Hieronder 3 bestanden: .m4v, .flv en .wmv. Bekijk de broncode voor de details.

Wil je specifieke eigenschappen van een videospeler, dan zal je toch de OBJECT code voor die betreffende speler moeten gebruiken. Zie voor dergelijke overzichten de diverse paginas op mijn website.

Verder merk ik dat niet alle attributen werken. Als autoplay="false" wordt aangebracht begint de film toch te spelen. Als je het helemaal weglaat, dan laadt wel de film maar het spelen moet je met de hand starten.

Nadeel in beide gevallen is dat de hele film direct wordt gedownload, ook al speel je 'm niet af. Flash Video en Silverlight spelers beginnen met laden op het moment van spelen. Zie de voorbeeldpaginas elders op mijn Site.

Al met al is het toch een goede ontwikkeling die een hoop gecodeer overbodig maakt. Helaas zal de grote massa met hun verouderde browser er nog niet aan toe zijn.

M4V

Autoplay staat uit.

FLV

Autoplay staat uit.

WMV

Autoplay staat aan.

Unicode tekens in een webpagina tonen

Een simpele uitleg met bewegend beeld over hoe je bijzondere tekens in een webpagina kunt tonen. Kijk hier voor wat paginas die ik in het verleden als vingeroefening heb gemaakt.

Het Lettertekenpalet, evenals Toetsenbordweergave, kan je in een menu tonen/kiezen als je het eerst bij de Systeemvoorkeuren > Landinstellingen hebt aangevinkt.

Hou er rekening mee dat niet elke browser, en zeker niet alle PCs met Windows, Unicode tekens kan tonen.

Dit is de demo tekstregel uit het flmpje:

Type the code here : ↩ and ↩ and display it in the browser.

Embedded fonts

Je kan tegenwoordig letterypes (fonts) in een webpagina invoegen.

Da's handig als je een opmaak wilt waarvoor de nodige fonts niet aanwezig zijn op de computer van je bezoeker.

Maar zoals te doen gebruikelijk kan alleen Safari het kunstje vertonen. Maar daarom is het niet minder handig.

Onderstaand zie je een voorbeeldpagina. Ik heb 'm met een IFRAME in deze blog gelast, omdat de Stylesheet van de blog niet het @fontface element bevat. Hier een uitgebreide pagina met links.