Streaming med flowplayer
Viser man video med flowplayer vil den som standard loade hele videoen, før end den begynder at afspille. Har man et 2 min. klip kan det nemt fylde 12 MB i god kvalitet. Det kan betyde at der nemt kan gå 20-30 sek. inden videoen begynder at afspille. Det er man typisk ikke interesseret i. Har man ikke en rigtig streaming server findes der dog alligevel et trick man kan bruge.
Der findes et H.264-streaming modul til Apache, som er meget nemt at sætte op. Bare følg de par trin på siden, og modulet virker. Når det er sat op, vil Apache kunne levere video fra vilkårlige steder i klippet.
Næste trin er at sætte flowplayer op til at bruge streaming. Her er det javascript-kode jeg bruger til at afspille med:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript"> $(document).ready(function() { flowplayer("player", { src:'flowplayer-3.1.5.swf', wmode: 'transparent' }, { clip: { autoPlay: true, autoBuffering: true, provider: 'stream' }, plugins: { stream: { url: 'flowplayer.pseudostreaming-3.1.3.swf' }, playlist: ['video.mp4'] }); }); </script> |
Det der skal lægges mærke til er provider: 'stream' samt
1 2 3 | stream: { url: 'flowplayer.pseudostreaming-3.1.3.swf' }, |
Resten er almindelig brug.
Se mere om pseudostreaming på flowplayers hjemmeside.
Sådan fik jeg FFmpeg til at lave H.264
Til mit nye projekt combatclinic.com, som I sikkert har læst alt om ;-) leverer jeg video i H.264-format, og det encoder jeg med FFmpeg. Det viste sig at være lidt mere besværligt at sætte op end jeg havde regnet med, men her er min opskrift:
Tilføje følgende linje i /etc/apt/sources.list
deb http://www.debian-multimedia.org lenny main non-free
Kør apt-get update; apt-get install debian-multimedia-keyring for at opdatere pakkelisten.
Nu kan du installere FFmpeg og x264 ved at køre apt-get install ffmpeg x264.
Når du vil encode dine videoer skal du gøre det på følgende måde:
ffmpeg -i input.mov -vcodec libx264 output.mp4
Det var en meget hurtig guide, men også mest skrevet for at jeg selv kunne huske det til næste gang jeg skal gøre det :)
Undgå at folk linker til billeder
Hvis man vil undgå at folk linker til ens billeder eller videoer, kan man med mod_rewrite kigge på Referer-headeren, og se om brugeren kommer fra ens eget domæne
Her viser jeg hvordan man nægter adgang til .png-filer hvis folk ikke kommer fra www.example.com
1 2 3 | RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://www.example.com/ RewriteRule \.png$ – [F] |
[F] betyder Forbidden.
Det hjælper selvfølgelig ikke mod de folk der selv kan finde ud af at sætte Referer-headeren, men det hjælper mod almindelige browsere.
Sortering på tabeller
Hvis der er en ting jeg hader, så er det at lave trivielle tabeller med sortering. Jeg har dog efterhånden fundet den løsning jeg bedst kan li’.
Typisk vil man ha’ noget html som dette:
1 2 3 4 5 | <table> <tr> <th><a href="list.php?sort=name&type=asc">Navn</a></th> <th><a href="list.php?sort=age&type=asc">Alder</a></th> [...] |
Men det er pænt irriterende at generere linket, samt holde styr på om man sorterer stigende eller faldende, og der kommer sikkert også andre parametre med ind i URL’en. Så det har man ikke lyst til. Jeg ved godt at der findes Javascripts der kan sortere tabeller, men det virker kun hvis man ser hele tabellen, og ikke hvis der er flere sider.
Min løsning er at lave en form med nogle skjulte felter, og med manipulere den med jQuery når man klikker på th’erne.
Min tabel vil så se sådan ud:
1 2 3 4 5 | <table> <tr> <th x:name="name" class="sortable">Navn</th> <th x:name="age" class="sortable">Alder</th> [...] |
I mit stylesheet har jeg selvfølgelig en
1 2 3 | table th.sortable { cursor:pointer; } |
Og måske en text-decoration:underline så man kan se at man kan trykke på feltet.
Så laver jeg en form med to skjulte felter jeg bruger til at sortere med:
1 2 3 4 | <form action="list.php" method="get" id="form"> <input type="hidden" id="order_by" name="order_by" value="<{$smarty.get.order_by|escape|default:"name"}>"/> <input type="hidden" id="order_type" name="order_type" value="<{$smarty.get.order_type|escape|default:"asc"}>"/> </form> |
Derefter noget jQuery:
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> $(document).ready(function() { $("th.sortable").click(function() { $("#order_by").val($(this).attr("x:name")); $("#order_type").val($("#order_type").val() == "desc" ? "asc" : "desc"); $("#form").submit(); }); }); </script> |
Om websmed.dk
Jeg hedder Morten, og jeg har udviklet webapplikationer siden slutningen af 90'erne.
Jeg vil her dele ud af min erfaring, og med jævne mellemrum poste nogle tips og tricks, samt løsningsforslag på generelle dagligdags problemstillinger.
Jeg har en forkærlighed for PHP og MySQL, hvorfor I nok vil se flest indlæg der vedrører den gren af webudvikling.
Jeg har en anden blog af mere personlig karakter på mbn.dk, hvor I kan finde kontaktmuligheder m.m.
Mine indlæg vil tit være baseret på problemstillinger i mit daglige virke, eller i mit eget firma MRLYTICS, hvor jeg sælger kundeundersøgelser samt kundedatabaser.
Denne side er hostet hos slicehost.
