Så här får du video på webben med HTML5
Och lite hjälp av flash
Med de här enkla stegen kommer vi att skapa en HTML5-sida med video som kan spelas upp i alla webbläsare oavsett plattform som har stöd för antingen äkta HTML5-video eller flash-video. På skrivbordet innebär det Safari, Firefox, Opera och Internet Explorer med flera. Mobilt innebär det i princip alla mobiler med Webkit-baserade läsare som Iphone, Android, Nokia S60 med flera.
1. Börja med att hämta Flowplayer. Det här är en flashspelare som är lätt att styra med javascript och som kan spela upp samma AVC-video som Safari och Iphone.
2. Ladda ner och installera en OGG-codec för Quicktime 7.
3. Öppna filmen i Quicktime 7 pro och exportera den för webben, och som Ogg. Genom att exportera för webben skapas flera Webkit- och flashkompatibla MPEG4-filer. De filer som har suffixen .mp4 och .m4v är MPEG4/AVC (h.264). Det är samma typ av fil oavsett om den heter .mp4 eller .m4v, och de kan därför användas på samma sätt båda två. Ogg gäller för Firefox.
4. Släng ReadMe.html och skapa en ny fil som heter index.html i mappen. Se till att alla filmfilerna (ogg, mov, m4v och 3gp) ligger i samma mapp.
5. Kopiera de tre filerna flowplayer-3.1.5.swf, flowplayer.controls-3.1.5.swf och flowplayer-3.1.4.min.js från Flowplayer-mappen till samma mapp som filmerna.
6. Öppna index.html i valfri text- eller html-redigerare och skapa ett grundläggande HTML5-dokument. Jag använder Coda för detta.
7. Lägg till javascriptet för Flowplayer i <head>, och skapa <video> i <body>. De extra parametrarna i <video> lägger en bild som platshållare för filmen och slår på play/paus/stop och volymkontroll för användaren.
8. Sedan behövs dels sökvägen för filmerna för de läsare som klarar att hantera <video>, och dels en behållare för övriga läsare där flashfilmen ska spelas upp. Det är viktigt att sökvägarna läggs till i rätt ordning: .mov först följt av .mp4/.m4v och .ogg och sist behållaren för flash.
9. Flowplayer måste ha en behållare med ett id, så till det använder vi <a id=”flash”> och parametern blir då ”flash” i skriptet. Den andra parametern är sökvägen till själva spelaren, och under clip: är sökvägen till filmen som ska spelas upp.
10. Slutligen måste både behållaren för HTML5-videon och för flash-videon storleksbestämmas. Som en extra åtgärd lägger vi även poster-bilden som en bakgrundsbild så att om man inte har Flash installerat så får man en bild man kan klicka på för att ladda ner filmfilen.
Avslutningsvis kommer här hela html-koden som jag använt i exemplet ovan.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5-video</title>
<style type="text/css">
/* Skärm */
@media screen {
video,
#flash {
display: block;
width: 640px;
height: 360px;
background: url(film-poster.jpg) no-repeat top left;
}
}
</style>
<script src="flowplayer-3.1.4.min.js"></script>
<script>
flowplayer("flash", "flowplayer-3.1.5.swf", {
clip: {
url: "film-desktop.mp4"
}
});
</script>
</head>
<body>
<video poster="film-poster.jpg" controls>
<source src="film.mov" type="video/quicktime" /><!-- Safari / iPhone -->
<source src="film-desktop.mp4" type="video/mp4" /><!-- Webkit-video -->
<source src="film.ogg" type="video/ogg" /><!-- Firefox 3.5 OGG -->
<a id="flash" href="film-desktop.mp4"></a><!-- Alla andra -->
</video>
</body>
</html>
Utifrån det här är det inte speciellt svårt att utöka funktionaliteten via javascript för att kunna starta och pausa filmen eller använda en lightbox-liknande lösning för att lägga den ovanpå resten av sidan när den spelas upp.