hubionmac.com » javascript

JavaScript: PrettyPhoto Video für iOS anpassen

hubi — Thu, 31 Mar 2011 05:32:55 +0000

Ich habe für einige Seiten PrettyPhoto in Verbindung mit dem Flowplayer genutzt, um Videos einzubinden. Da die Filme als mp4 vorliegen und die Seiten auch für das iPad&Co nutzbar sein sollen, waren hier einige Anpassungen an PrettyPhoto selbst notwendig.
Zunächst sollten die Videos auch ohne aktiviertes JavaScript abspielbar sein, hierzu wurde ein PHP-Seite erstellt, die zwischen iOS und anderen Geräten unterscheiden kann und die mp4 Dateien entsprechen einbindet (FlashObject oder HTML5-Video-Tag für iOS). Die Links zu die dieser Seite (player.php?url=/media/meinfilm.mp4) wurde entsprechend eingefügt.

Ist nun JavaScript aktiv werden diese Links (rel=”prettyphoto”) entsprechend umgebaut. Alle nicht-iOS Geräte zeigen in einer PrettyPhoto-Box den Inhalt der Player.php (in einem iFrame) an, hierzu wird zumindest iframe=true an den Link angehängt. iOS Geräte gehen etwas weiter und ersetzen zunächst den Link zur Player.php gegen den direkten Link zur mp4-Datei.
Nun kommt eine kleine eigene Anpassung in der PrettyPhoto.js zum Tragen, nämlich
else if (itemSrc.match(/\b.mov\b/i)|| ((navigator.userAgent.indexOf('iPad')>-1 || navigator.userAgent.indexOf('iPhone')>-1 || navigator.userAgent.indexOf('iPod')>-1) && (itemSrc.indexOf('.mp4') != -1))) { return 'quicktime';
Auf diesem Weg wird unter iOS das Video direkt in ein Overlay eingebunden (als Quicktime Object).

Diese Anpassung war notwendig, da das Video in dem sonst genutztem iFrame nicht 100%ig zentriert wurde…

Fazit:
Es scheint eine recht solide Weise zu sein, Videos einzubinden. Vielleicht sollte man eine zentrale Stelle definieren, auf die JavaScript und PHP zugreifen, die die Bedingungen für iOS definiert. Am schönsten wäre es, wenn die PHP, sowie JavaScript-Lösung das Video über einen HTML-5-Video-Tag einbinden würden, neben iOS gibt es schließlich ja auch noch Android und WebOS… to be continued

Protected: Mactechnews Gallerie Downloader

hubi — Fri, 14 Jan 2011 11:36:43 +0000

FireFox 4 ist schnell…

hubi — Mon, 03 Jan 2011 21:59:56 +0000

Ich bin vor einiger Zeit von FireFox auf Safari gewechselt. Wenn ich mir aber nun die JavaScript-Performance der 4er Beta ansehe werde ich doch langsam wieder etwas schwach. Das ganze Ding macht wirklich den Eindruck einer schnellen Mac-Anwendung.
Jetzt müssen Sie nur noch die AppleScript-Unterstützung etwas voran bringen und ich habe meinen neuen Standard-Browser =)
Ok, die Webkit-Animationen dürften mir etwas fehlen, aber da wir sich bestimmt etwas finden, was mich darüber hinweg tröstet.

AppleScript in Google Chrome

hubi — Sat, 06 Nov 2010 21:15:50 +0000

Bei meiner Arbeit nutze ich oft AppleScript in Verbindung mit JavaScript. Viele meiner täglichen Aufgaben müssen über Webseiten abgewickelt werden und wenn es z.B. darum geht ein Web-Formular mit Daten aus Excel oder einem anderen Programm zu füttern oder Daten aus Webseiten zu extrahieren, dann kann so eine AppleScript-JavaScript-Lösung einem schon wirklich einiges an Zeit ersparen.
Bisher war hierfür eigentlich nur Safari geeignet, da nur Safari das Ausführen längere JavaScripts via AppleScript unterstützte.

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application “Safari”

tell document 1

do JavaScript “document.links.length”

end tell

Aber jetzt hat auch Google Chrome eine Schnittstelle für AppleScript erhalten und kann (wenn auch noch etwas rudimentär) JavaScript-Befehle über AppleScript ausführen.

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application “Google Chrome”

tell window 1

tell tab 1

execute javascript “document.links.length”

end tell

Das Problem was dabei aber noch besteht: Der Aufruf führt das angegeben JavaScript zwar aus, gibt aber an AppleScript nichts aus. Stattdessen erscheint nach dem Ausführen des obigen Codes nur missing value in der Ausgabe. Zur Zeit behelfe ich mir noch damit den Rückgabewert in den Titel des Dokuments zu schreiben und diesen dann via AppleScript auszulesen:

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application “Google Chrome”

tell window 1

tell tab 1

execute javascript “document.title = document.links.length + 1″

delay 1

get title

end tell

Etwas unschön zumal ein delay mit rein muss, da der Titel sich nicht unmittelbar aktualisiert, aber zumindest schon mal ein Anfang, wenn Chrome der auserwählte Web-Browser sein sollte.

Kleiner Nachtrag… statt tab 1 kann man auch active tab nutzen

Webdev: Webkit Transition Beispiel

hubi — Mon, 31 May 2010 02:52:21 +0000

Ich wollte für eine kleine Web-Anwendung die ich gerade schreibe einen Effekt nutzen, den ich auf der Seite von The Wonderfactory gesehen habe. Dort kann man auf der Seite die Schlagzeilen durchblättern, was vermutlich mit der selben Technik umgesetzt wurde, die die auch für die HTML-5 Ausgabe der Sports-Illustrated genutzt haben.
Ich bin nicht so ein Freund von aufgeblähten JavaScript-Bibliotheken (zu aufgebläht für meine Seite) und diesen setTimeout-Pfusch den man nutzt, um etwas Bewegung in eine Seite zu bringen. Deshalb und weil die Seite die ich gerade schreibe wohl hauptsächlich von Webkit-Browsern angesteuert werden dürfte, habe ich mir so eine Wisch-Effekt-Box mit dem ein bissle JavaScript und etwas mehr CSS zusammengebaut. Unterm Strich können diese Webkit-Transition-Effekte einiges an JavaScript-Code überflüssig machen und die Seite läuft damit auch problemlos auf dem iPhone =)
Und die Animation soll angeblich auch von der Hardware beschleunigt werden.
Link zur Demo Seite

Safari: Öffne alle JavaScript Links

hubi — Wed, 05 May 2010 20:16:46 +0000

Kann recht praktisch sein, wenn man sich mal alle JavaScript-Dateien zu einer Website anzeigen lassen möchte…

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application “Safari”

tell document 1

–set mybaseURL to do JavaScript “document.URL.slice(0, document.URL.lastIndexOf(‘/’)+1)”

set jslinks to do JavaScript “var jssrcarray = new Array()

for (var i=0;i

{

jssrcarray.push(document.getElementsByTagName(‘script’)[i].src)

}

jssrcarray

“

repeat with jslink in jslinks

open location jslink

end repeat

end tell

Nervige Overlays auf Website entfernen

hubi — Tue, 04 May 2010 07:41:37 +0000

Früher waren es die Pop-Up-Fenster heute sind es nervig Overlays, die die Sicht auf eine Website versperren. Entweder schaltet man stumpf JavaScript aus oder klickt die Overlays weg, was dann den Aufruf von anderen Overlays oder Popups zur Folge hat. Ein kleine Hilf stellt diese JavaScipt-Code dar, den der alle diese Overlay-Dinger schlichtweg ausblendet. (Quick&Dirty).

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application “Safari”

tell document 1

do JavaScript “for (var i=0;i

{

if ((document.getElementsByTagName(‘*’)[i].style.position == ‘absolute’)||(document.getElementsByTagName(‘*’)[i].style.position == ‘fixed’))

document.getElementsByTagName(‘*’)[i].style.display = ‘none’

}”

end tell

Macnews hat da eine etwas abgeänderte Form, das Overlay wird dort über eine Stylesheet definiert, deshalb nun computed style und schon funktioniert es wieder =)

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application “Safari”

tell document 1

do JavaScript “for (var i=0;i

{

if ((document.defaultView.getComputedStyle(document.getElementsByTagName(‘*’)[i],null).position == ‘absolute’)||(document.defaultView.getComputedStyle(document.getElementsByTagName(‘*’)[i],null).position == ‘fixed’))

document.getElementsByTagName(‘*’)[i].style.display = ‘none’

}”

end tell

Youtube Downloadlink für Videos

hubi — Mon, 12 Apr 2010 23:32:50 +0000

Ich hatte da mal ein sehr schönes JavaScript als Bookmark, welches mit einen Download-Link der mp4 in die Seite einbaute, nur leider funktionierte das nicht mehr. Ein ungleich kürzes Skript habe ich hier gefunden und mit daraus dann das hier gebaut:

Code zum markieren einmal anklicken

javascript:swfHTM%20=%20document.getElementById(‘movie_player’).getAttribute(‘flashvars’);%20w%20=%20swfHTM.split(‘&’);%20for%20(i%20=%200;%20i%20<=%20w.length%20-%201;%20i++)%20{%20if%20(w[i].split(‘=’)[0]%20==%20′t’)%20{%20t%20=%20w[i].split(‘=’)[1];%20}%20if%20(w[i].split(‘=’)[0]%20==%20′video_id’)%20{%20videoid%20=%20w[i].split(‘=’)[1];%20}%20}%20bla%20=%20document.createElement(‘a’);%20bla.setAttribute(‘href’,'http://youtube.com/get_video?video_id=’%20+%20videoid%20+%20′&t=’%20+%20t%20+%20′=’%20+%20′&fmt=18′);%20bla.innerHTML%20=%20′DOWNLOAD’;%20document.getElementById(‘masthead-nav’).appendChild(bla);

Einfach kopieren, als Bookmark abspeichern und schon hat man einen DownloadButton für You-Tube-Videos =)

JavaScript:AppleScript Link bauen mit Text aus div-Element

hubi — Sat, 13 Mar 2010 00:13:34 +0000

Ich poste ja den AppleScript-Quellcode hier immer in so einem Div-Elementen, das ab einer gewissen Größe einen Scroll-Balken bekommen.

Zudem wählt ein Klick auf den besagten Container den kompletten Inhalt aus und weil ich copy&paste eh schon so oft mache, gibt es dazu noch einen Link “Code im Script-Editor öffnen”.

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

display dialog “Hallo, ich bin ein Dialog voller Sonderzeichen!\”§$%&/()=?

und Umlaute: ÖÄÜöää

Um diesen Link geht es nun, den baue ich mir nämlich via JavaScript und da die Routine, die ich dazu geschrieben hatte, etwas buggy war, jetzt aber nach einer kleinen Anpassung anscheinend endlich auch mit allen Sonderzeichen und Umlauten zu funktionieren scheint, hier der Code dazu:

function buildAppleScriptLink() {
 var txt = '';
 if (window.getSelection)
 {
 txt = window.getSelection();
 }
 else if (document.getSelection)
 {
 txt = document.getSelection();
 }
 else if (document.selection)
 {
 txt = document.selection.createRange().text;
 }
 else return;
 window.open(("applescript://com.apple.scripteditor?action=new&script=" + (new String(txt)).replace(/\"/g,'%22').replace(/\n/g,'%0D'))).close();
 window.getSelection().removeAllRanges();
 }

Das Ding wird nach eine anderen Routine aufgerufen (selectThis(this)), die den Inhalt des “Code-Divs” auswählt. Der Text, also nicht der HTML-Quellcode (innerHTML) wird dann zu einem AppleScript-Link umformatiert (Anführungszeichen und Zeilenumbrüche werden ersetzt gegen URL-Konforme Escape-Sequenzen) und dieser Link wird via JavaScript dann auch gleich in einem

neuen Fenster aufgerufen, was dann zumindest auf einem Mac, den AppleScript-Editor öffnet. Meine Tests unter 10.6.2 und Safari (4.0.5) waren bisher allesamt erfolgreich. Sollte jemand noch eine Idee zu einer Verbesserung des Codes haben, bitte in die Comments. Ich denke das sollte aber alles Funktionieren, sofern die Seite vom Encoding auf UTF-8 steht.

Paint mit HTML

hubi — Sun, 21 Feb 2010 22:12:59 +0000

Mal sehen, was sich sonst noch dazu finden wird =)
html_paint1