JavaScript: PrettyPhoto Video für iOS anpassen

31/03/2011

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
No Comments

Protected: Mactechnews Gallerie Downloader

14/01/2011

This post is password protected. To view it please enter your password below:

No Comments

FireFox 4 ist schnell…

3/01/2011
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.
3 Comments

AppleScript in Google Chrome

6/11/2010
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

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

end tell

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

end tell

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
No Comments

Webdev: Webkit Transition Beispiel

31/05/2010
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
No Comments

Safari: Öffne alle JavaScript Links

5/05/2010
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<document.getElementsByTagName('script').length;i++)

{

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

}

jssrcarray

"

repeat with jslink in jslinks

open location jslink

end repeat

end tell

end tell

No Comments

Nervige Overlays auf Website entfernen

4/05/2010
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<document.getElementsByTagName('*').length;i++)

{

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

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

}"

end tell

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<document.getElementsByTagName('*').length;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

end tell



1 Comment

Youtube Downloadlink für Videos

13/04/2010
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 =)
2 Comments

JavaScript:AppleScript Link bauen mit Text aus div-Element

13/03/2010
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: ÖÄÜöää

Hm, fällt mir sonst noch etwas ein... ∂†ΩƒΩ©¨ªºø{|Ω®[€¢€‚∂®çƒ©√∫ª~º∆øπ@•∞œ@"


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.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
No Comments

Paint mit HTML

22/02/2010
Mal sehen, was sich sonst noch dazu finden wird =) html_paint1
No Comments