SWFObject: JavaScript Flash spiller

Norsk oversettelse av Geoff Stearn sin side om SWFObject skriptet hans

SWFObject er en liten Javascript fil brukt til innleggelse av Adobe Flash innhold. Skriptet sørger for at Flash pluginen er oppdaget I alle aktuelle nettleserer (på Mac og PC) og er laget for å gjøre bruk av Flash så lett som mulig. Skriptet fungerer også bra med søkemotorer, degraderer grasiøst, kan bli brukt I gyldig HTML og XHTML 1.0 dokumenter (sent som text/html, ikke application/xhtml+xml) og er frammover-kompatibel, slik at den burde fungere langt inn I fremtiden.

Bemerk

Du leser en oversettelse av Geoff Stearns' SWFObject. Vennligst sjekk den originale siden før du laster ned skriptet for å sikre deg den nyeste versjonen av SWFObject.

SWFObject er SWF integrering skriptet kjent tidligere som FlashObject. Navnet måtte skiftes på lovmessige/varemerke grunner. For mer informasjon, les dette.

Innhold:

Hva er nytt I denne versjonen?

For en full liste av forandringer, vennligst les SWFObject 1.5 blog post.

Hvordan skriptet fungerer

[Übernerder kan lese rene Javascripten her.]

Det er lett å bruke SWFObject. Bare inkluder Javascript filen swfobject.js og bruk litt Javascript på siden din for å integrere Flash filmen. Her er et eksempel som demonstrerer bruk av SWFObject med kun koden som trengs og minst mulig valgmuligheter:

<script type="text/javascript" src="swfobject.js"></script>
		
<div id="flashinnhold">
     Teksten her blir ombyttet med Flash filmen.
</div>

<script type="text/javascript">
     var so = new SWFObject("film.swf", "minfilm", "400", "200", "8", "#336699");
     so.write("flashinnhold");
</script>

Skritt for skritt forklaring av hva koden gjør:

<div id="flashinnhold">[...]</div>

Forbereder ett HTML element som innholder Flash filmen. Teksten I "flashinnhold" området blir erstattet med Flash filmen, slik at brukere med Flash pluginen installert aldri ser innholdet I dette området, kun dem uten Flash installert. I tillegg gjør dette området det mulig for søkemotorer å lese det alternative innholdet.

var so = new SWFObject(swf, id, width, height, version, background-color 
		[, quality, xiRedirectUrl, redirectUrl, detectKey]
	);

Forbered en ny SWFObject og send med nødvendige valgmuligheter:

Valgmuligheter:

so.write("flashinnhold");

Forteller SWFObject skriptet til å legge inn Flash innholdet på siden (om den rette versjonen av Flash pluginen er installert på brukeren sitt system) med å erstatte innholdet I det spesifiserte HTML elementet med Flash filmen.

Detaljer

SWFObject fungerer stilt og rolig I bakgrunnen av HTML dokumentet ditt. Når man lager sider som tar bruk av SWFObject burde man starte med å lage innholdet som sees av dem uten Flash. Få sidene dine till å fungere uten Flash filmene først, deretter kan Flash filmene erstatte det alternative innholdet med bruk av Javascript. Dette forsikrer at søkemotorer kan lese det alternative innholdet, og at brukere uten Flash pluginen ikke ser en HTML side som mangler deler. Om du vil inkludere oppdatering eller installasjons instruksjoner til brukere uten Flash pluginen er opp til deg. Dersom det alternative innholdet er tilstrekkelig er det kanskje ikke nødvendig å fortelle brukeren at noe må installeres eller oppdateres for å se siden din.

SWFObject fungerer I alle aktuelle nettleserer, inkludert, på PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, og Opera. På Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, og Opera 7.5+. Skriptet hører også til å fungere langt inn i fremtiden.

SWFObject oppdager Flash versjonen i disse nettleserne fra og med versjon 3, og tillater vekselvirkning med Flash innhold uten å "aktivere" først. For mer informasjon om dette, les denne blog-posten om Internet Explorer Eolas patent omstriden.

SWFObject kan også oppdage mindre og revisionsversjoner av Flash spilleren, bare med å fortelle skriptet hvilken versjon man vil forlange. For eksempel, å påkreve Flash versjon v.6.0 r65 (eller 6,0,65,0) blir:

var so = new SWFObject("film.swf", "minfilm", "200", "100", "6.0.65", "#336699");

SWFObject sin innebygget plugin-oppdagelse kan også unngås. Dersom en ny nettleser åpnes eller plugin oppdagelsen ikke fungerer av en eller annen grunn så kan man inkludere en lenke som unngår oppdagelse av Flash, og sørger for at Flash filmen alltid blir skrevet til siden. For å bruke slik en lenke inkluderer man bare en enkel URL variabel som heter "detectflash" og setter den som "false". Her er et eksempel av hva en slik lenke kan se ut som:

<a href="minside.html?detectflash=false">unngå Flash Oppdagelse</a>

SWFObject Eksempler

Eksempelet ovenfor er det minste man trenger for å bruke SWFObject, men hva om man har lyst till å utnytte flere parametre som Flash pluginen har å tilby? SWFObject gjør det svært enkelt å tilføre enhver ekstra parameter som man kan trenge. Eksemplene nedenfor viser forskjellige måter man kan legge inn Flash innhold på.

Et eksempel som lett tilfører noen ekstra parametre

<script type="text/javascript">
     var so = new SWFObject("film.swf", "minfilm", "400", "100%", "8", "#336699");
     so.addParam("quality", "low");
     so.addParam("wmode", "transparent");
     so.addParam("salign", "t");
     so.write("flashinnhold");
</script>

Her finnes en full liste av mulige parameter og deres mulige verdiger på adobe.com.

Send variabler til filmene dine ved bruk av "Flashvars" parameteren:

Flashvars er den enkleste måten å få data fra HTML inn I Flash filmene dine, men man kan bare sende dataen til filmen når den først lastes. Vanligvis tilføyer man en parameter som kalles "flashvars" og for verdien sender man navn/verdi par slik:

variabel1=verdi1&variabel2=verdi2&variabel3=verdi3

SWFObject gjør dette en del enklere ved å tillate så mange variabler eller navn/Verdi par som man trenger på den samme måten som andre parametere sendes. Her er et eksempel som bruker Flashvars til å sende verdier til en Flash film:

<script type="text/javascript">
     var so = new SWFObject("film.swf", "minfilm", "400", "200", "8", "#336699");
     so.addVariable("variable1", "verdi1");
     so.addVariable("variable2", "verdi2");
     so.addVariable("variable3", "verdi3");
     so.write("flashcontent");
</script>

På denne måten blir alle variablene som sendes øyeblikkelig tilgjengelige inne I Flash filmen, bare bruk dem slik som enhver variable på _root tidelinjen.

SWFObject skriptet kommer også med en ekstra funksjon som tillater at man bruker variabler fra URLen. Et eksempel er om man har en URL som ser slik ut:

http://www.eksempel.com/side.html?variable1=verdi1&variable2=verdi2

Ved bruk av funksjonen getQueryParamValue() kan man lett bruke verdiene fra URLen og sende dem til Flash filmen. Her er et eksempel som antar at URLen ser ut som den ovenfor:

<script type="text/javascript">
     var so = new SWFObject("film.swf", "minfilm", "400", "200", "8", "#336699");
     so.addVariable("variable1", getQueryParamValue("variable1"));
     so.addVariable("variable2", getQueryParamValue("variable2"));
     so.write("flashcontent");
</script>

Funksjonen getQueryParamValue() støtter også variabler fra location.hash, ofte brukt når man lenker dypt inn I Flash applikasjoner. For et eksempel av hvordan man lenker dypt inn I Flash filmer ved bruk av location.hash, ta en titt på denne demonstrasjonen av Slideshow Pro, som bruker SWFObject.

Express Install med SWFObject

SWFObject har full støtte for Adobe Flash Player Express Install. Brukerne dine trenger aldri å forlate siden din for å oppgradere Flash spilleren deres.

For å bruke ExpressInstall må man først opplaste expressinstall.swf filen til webserveren din. Deretter bruker man useExpressInstall variabelen for å spesifisere hvor expressinstall.swf filen ligger. Om ingen Verdi er spesifisert så leter SWFObject I samme mappen som HTML filen finnes i.

<script type="text/javascript">
	  var so = new SWFObject("film.swf", "minfilm", "200", "100", "8", "#336699");
	  so.useExpressInstall('expressinstall.swf');
	  so.write("flashcontent");
</script>

Dersom du ønsker å så in installasjon som utnytter ExpressInstall kan du installere versjon 7 (eller 6.0.65) av Flash spilleren og besøke denne siden.

FLA filen til expressinstall.swf er inkludert med SWFObject dersom man ønsker å tilpassere ExpressInstall til sine behov.

I tilfelle Flash filmen skal åpnes I et popup vindu, eller man ønsker å omdirigere brukere etter ExpressInstall oppdateringer så kan man utnytte xiRedirectUrl parameteren for a omdirigere brukere tilbake til siden med lenke til Flash filmen, istedenfor siden som spiller filmen.

<script type="text/javascript">
     var so = new SWFObject("film.swf", "minfilm", "200", "100", "8", "#336699");
     so.useExpressInstall('expressinstall.swf');
     // må være hele URLen til siden 
     so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); 
     so.write("flashcontent");
</script>

Nedlasting

SWFObject er utgitt under MIT Lisens. Dette betyr (for det meste) at du kan bruke skriptet for hva som helst, uten begrensninger.

Last ned SWFObject 1.5 - Zip fil, inkluderer swfobject.js og HTML eksemplene listet nedenfor.

Eller, om du vil se og få en følelse for fungerende eksempler, kan du ta en titt på de følgene eksempler:

*Sider sent som text/html, ikke application/xhtml+xml.

Trenger du hjelp med SWFObject? Prøv å spør etter hjelp på SWFObject forumet!

Hvorfor den er bedre en resten

I det siste har det har vært mange måter å oppdage Flash versjoner og innlegge Flash filmer I HTML dokumenter. Denne seksjonen tar en titt på enhver av de mest brukte og populære metodene og forklarer problemene med dem.

1) Vanlig innleggelse som Adobe tilfører

Alle kjenner till den vanlige måten å innlegge Flash som Adobe tilfører. Den består av en <object> med en <embed> inni for nettleserer å falle tilbake på. Dette er den vanligste måten å innlegge Flash, og er vanligvis metoden brukt for Flash filmer som er utgitt fra Adobe Flash IDE. Denne metoden er mest kompatibel og fungerer I flest antall nettleserer. Her er et eksempel av koden til vanlig Flash innleggelse:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
     codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
     width="550" height="400" id="Untitled-1" align="middle">

     <param name="allowScriptAccess" value="sameDomain" />
     <param name="film" value="minfilm.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#ffffff" />
     <embed src="minfilm.swf" quality="high" bgcolor="#ffffff" width="550" 
     height="400" name="minfilm" align="middle" allowScriptAccess="sameDomain" 
     type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

Selv om dette er den vanligste metoden for innleggelse av Flash filmer så har den en del ulemper:

2) Kun Object-tag / Flash satay

Denne metoden ble populæ etter en artikkel i A List Apart ble utgitt i 2002. Her er to eksempler av innleggelse med kun object-tag og "Flash satay":

Kun Object-tag

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
     width="300" height="120">
     <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
     <param name="quality" value="high">
     <param name="bgcolor" value="#FFFFFF">
     <!--[if !IE]> <-->
     <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
     width="300" height="120" type="application/x-shockwave-flash">

     <param name="quality" value="high">
     <param name="bgcolor" value="#FFFFFF">
     <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
     FAIL (nettleseren hørrer til å vise Flash innhold, ikke dette).
 </object>
 <!--> <![endif]-->

</object>

Flash satay

<object type="application/x-shockwave-flash data="c.swf?path=film.swf" width="400" height="300">
     <param name="movie" value="c.swf?path=film.swf" />
     <img src="noflash.gif" width="200" height="100" alt="" />
</object>

3) Oppdagelse: Den klassiske 'liten Flash film på index siden' metoden.

Denne metoden involverer en eneste Flash film som blir innlagt på index siden av web siden din (hjemmesiden) som sjekker $version variabelen i Flash spilleren til brukeren og omdirigerer dem enten videre inn i web siden, eller til en plass der brukeren kan oppgradere Flash spilleren sin.

Problemene med denne metoden inkluderer:

4) Adobe Flash Player Detection Kit

Adobe har gjort en utmerket oppgave med sin nye Flash 8 Detection Kit - men dessverre ikke utmerket nok. Den innholder to forskjellige måter å oppdage Flash pluginen:

  1. Den Klassiske "lille Flash filmen på index siden" - (Se ovenfor)
  2. Javascript - Ja, det stemmer, Flash inkluderer nå mal til Flash oppdagelse ved bruk av Javascript. Denne måten er dessverre ikke veldig bruker vennlig, med blandinger av Javascript, VBscript, og HTMLen på den samme siden. Den har faktisk mange ulemper I likhet med forrige Javascript oppdagelse og innleggelse skript, gjør ingenting for å hjelpe deg som Flash/HTML utvikler. I tillegg så godkjennes den ikke XHTML eller HTML (I tilfelle du bryr deg om dette).

Du kan lese mer om dette på deconcept.

5) Bruk bare JavaScript for å oppdage og innlegge Flash filmene dine

Det er vanskelig å kritisere denne metoden siden den har tendens til å variere fra web side til web side, men de fleste Flash oppdagelse skriptene som jeg har funnet har ofte liknende feil:

FAQ (Ofte Spurte Spørsmål)

SWFObject har fått seg forum, for dem som vil ha hjelp med å implementere skriptet. Om du har spørsmål gjeldene funksjoner eller bruk av SWFObject vær snill å bruk forumet - det er mange dyktige som kan hjelpe deg der.

SP. Hva feiler Internet Explorer og 'Active Content Update' jeg har hørt om, fixer SWFObject problemet?
SV. For det meste, ja, SWFObject fixer 'Activating Active Content' problemene med den nye oppdatering til IE. Du kan lese mer om temaet her.
SP. Hvorfor flimrer mitt alternative innhold imens Flash filmen lastes? (hender bare i IE på Windows)
SV. Det virker som om dette er I sammenheng med FOUC buggen. Det kan fikses ved å tilføye en tag I hode (head) området på hvilket stylesheet som helst.
SP. Kan jeg bruke SWFObject for å innlegge mer enn en SWF på en HTML side?
SV. Ja, bare sørg for at enhver SWF og <div> eller HTML element som innholder en SWF har sin egen Id.
SP. Hvordan kan jeg få SWFObject til å fungere i Netscape 4.x?
SV. Denne kommentaren har eksemplar som kan brukes til å få SWFObject til å fungere I Netscape 4.x.
SP. Kan jeg bruke SWFObject med min Blog?
SV. Ja, det finnes plugin til Wordpress og Textpattern her.
SP. Kan jeg bruke SWFObject med Dreamweaver og Golive?
SV. Det finnes tillegg til Dreamweaver som er tilgjengelid på CommunityMX. Det finnes for tiden ingen Golive tillegg, men om du ønsker å lage en, linker jeg gjerne til den ifra denne siden. Man burde klare å få SWFObject til å fungere uten tillegg, selv om tillegg gjør det en del enklere.
SP. Finnes denne siden I forskjellige språk?
SV. Her er en Fransk oversetning av deler av denne siden, en Svensk oversetning, Italiensk, Tysk, Spansk, Polsk (delvis), Japansk , Portugisisk (Brasiliansk), Kinesisk, og her er en Finsk oversetning. Jeg lenker gjerne til noen som ønsker å oversette denne siden til et nytt språk.
SP. Finnes "publishing template" som kan brukes med Flash?
SV. Ja. En kan nedlastes fra Fluid Flash Blog.
SP. Hvem bruker SWFObject/FlashObject?
SV. Web sider som The Library of Congress, Adobe.com (En delvis forandret versjon), Amazon.com, Windows.com, YouTube.com, skype.com, Snapple.com, den er inkludert med Adobe Photoshop (i Flash web foto galleriene) og tusenvis av andre. Colin Moock anbefaler den som et alternativ til Adobe Detection Kit.

Har du enda problem? Prøv å lese igjennom forrige SWFObject forum poster [1, 2, 3] på deconcept (spesielt kommentarene), der man kan finne svar på mange forskjellige spørsmål.

Takk

Toby Boudreaux gav tonnevis med gode råd, hjalp med å lage koden til SWFObject mye renere og utførte 'name spacing' med det samme.