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.
Spore hvilke links brugeren trykker på
I nogen tilfælde vil jeg holde styr på hvilke links brugeren trykker på når vedkommende forlader min side. Normalt vil jeg løse dette ved at tilføje et proxy-script der sender videre. Fx:
<a href="redir.php?url=http://mbn.dk">mbn.dk</a>
Det gi’r dog nogle grimme adresser, og problemer hvis brugeren fx vil kopiere adressen og bruge den andre steder.
En løsning som jeg synes er pænere er at bruge noget Javascript der kigger på de events browseren fyrer af når man trykker på et link. Eks:
<script type="text/javascript"> $(document).ready(function() { $("a[target=_blank]").mousedown(function() { $.post("link_tracker.php", { url: $(this).attr("href") } ); }); }); </script>
Efterfølgende skal link_tracker.php samle $_POST['url'] op og behandle den …
Bemærk at jeg kun matcher de events hvor target-attributten er sat til “_blank”. Jeg kan måske ved fordel matche på alle links, og så checke om de starter med “http://”. Jeg matcher på mousedown og ikke click af den simple årsag at mousedown matcher mere. Fx midterklik. Dog matcher den ikke hvis man trykker på linket via tastatur, men koden kan nemt udvides til at tage højde for de senarier.
Ovenstående kræver jQuery som jeg loader via:
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3"); google.load("jqueryui", "1.7"); </script>
Konvertere links til posts (Fra GET til POST)
Det er aldrig smart at lave GET-requests der skal ændre noget på en server. Skal der ske ændringer skal man bruge POST, dvs. en formular for method er sat til post. Det er bare ikke altid hensigtsmæssigt fordi man måske har noget design, hvor man skal slette noget ved at trykke på et link. En smart måde at omgås problemet på er ved at bruge jQuery til at konvertere ens links.
Start med at sætte en class=”convert_to_post” på dine links. Fx:
1 | <a href="bookmark.php?page=123" class="convert_to_post">Bookmark</a> |
Normalt ville overstående bare være et almindeligt link, men pga. class=”convert_to_post” og nedenstående stykke javascript vil den blive konverteret til et ajax-kald der poster i stedet.
1 2 3 4 5 6 | $(".convert_to_post").click(function() { $.post($(this).attr('href'), {}, function() { window.location.reload(); }); return false; }); |
Man skal dog være opmærksom på at hvis man bruger PHP så ligger ens data stadig i $_GET og ikke i $_POST, man skal derfor for at sikre sig at der er brugt POST checke at $_SERVER['REQUEST_METHOD'] er sat til POST.
Et lille jQuery tip
jQuery er rigtig smart, og en lille ting jeg opdage her til aften var, hvor nemt det egentlig er at arbejde med attributter.
Mit problem var at jeg skulle fange kliks på nogle labels, og efterfølgende skjule eller vise dens pågældende inputfelt. Løsningen blev:
1 2 3 | $("label").click(function () { $("input#" + $(this).attr('for')).toggle(); }); |
HTML’en til ovenstående er:
1 | <label for="str">Tekst</label> <input id="str"/> |
Jeg fanger kliks på label-elementer og skjuler eller viser det inputfelt der har samme ‘id’ som label-feltet har ‘for’. Eksemplet er lidt simplificeret ;)
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.
