Dec
3
SWFObject
Filed Under JavaScript, Web standards
Kirjoitus on suomennettu (lyhennetty versio) Geoff Stearns:n [en] kirjoituksesta SWFObject: Javascript Flash detection and embed script [en]. Koko englannin kielinen versio löytyy täältä.
SWFObject on pieni JavaScript- tiedosto, jonka avulla flashesitys lisätään sivulle. Skripti osaa tunnistaa Flash- laajennuksen kaikissa käytetyimmissä selaimissa (Mac ja PC) ja se on suunniteltu helpottamaan Flash- esitysten lisäämistä sivuille. SWFObject on myös “hakukoneystävällinen”, sitä voidaan käyttää valideissa HTML- ja XHTML 1.0 dokumenteissa ja on eteenpäinyhteensopiva.
Sisältö:
Miten se toimii
Käyttö on varsin helppoa. Sivulle sisällytetään “swfobject.js”- javascripttiedosto ja lisätään pieni embeddauskoodi itse flashia varten. Tässä esimerkki koodista, joka tarvitaan lisäämään esitys sivulle.
<script src="swfobject.js" type="text/javascript"><!--mce:0--></script> <div id="flashcontent"> Tämä teksti korvataan flash-esityksellä</div> <script type="text/javascript"><!--mce:1--></script>
Tässä selvitys skriptin toiminnasta
<div id="flashcontent">[...]</div>
Alustetaan HTML- elementti, joka tulee sisältämään flash- esityksen. Sisältö, joka kirjoitetaan tähän elementtiin, korvataan varsinaisella flash-esityksellä, joten käyttäjät, joiden koneilta löytyy tarvittava flash-plugin, eivät koskaan näe tätä sisältöä. Juuri tämä ominaisuus antaa hakukoneille mahdollisuuden indeksoida vaihtoehtoisen sisällön.
var fo = new SWFObject("movie.swf", "mymovie", "200", "100", "#ffffff");
Luodaan uusi SWFObject ja syötetään tarvittavat parametrit:
- swf – tiedoston polku ja nimi
- id – embed- tagin ID
- leveys – esityksen leveys
- korkeus – esityksen korkeus
- versio – Vaadittava playerin versio. Esim. “7″ tai “6.0.65″
- taustaväri – esityksen taustaväri
Valinnaiset parametrit ovat:
- quality – esityksen laatu. Jos parametria ei anneta käytetään oletusarvoa “high“
- redirectUrl – Käyttäjät, joiden koneelta löytyy vanha pluginversio tai ei löydy pluginia ollenkaan, voidaan ohjata halutulle sivulle
fo.write("flashcontent");
Kommennetaan SWFObject- skriptiä kirjoittamaan sivulle (jos oikea fp- versio löytyy käyttäjän koneelta)
Lisätietoa
Kun rakennat sivustoa, jolla käytät SWFObjectia embeddaukseen, sinun tulisi aloittaa vaihtoehtoisen sisällön (ei Flash) suunnittelulla. Tee sivuistasi toimivat ilman flashia, ja lisää vasta sitten javascript. Näin varmistat, että hakukoneet indeksoivat vaihtoehtoisen sisällön, ja että kävijät joilla ei ole tarvittavaa player- versiota koneellaan, näkevät toimivan HTML- sivun. Jos näin käy, on hyvä ilmoittaa siitä kävijälle ja kertoa miten playerin päivitys tapahtuu. Toisaalta, jos vaihtoehtoinen sisältö riittää korvaamaan flash-esityksen, ei ilmoitus välttämättä ole tarpeellinen.
PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla ja Opera.
Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla ja Opera 7+.
SWFObject tunnistaa fp:n mainituilla selaimilla versiosta 3 uusimpaan jos selain käyttää Netscapen pluginarkkitehtuuria (Firefox, Safari Opera, Netscape, Mozilla) ja versiosta 4 uusimpaan jos kyseessä on IE (Active X plugin).
SWFObjectin fp-tunnistin on myös mahdollista ohittaa. Jos tulevaisuudessa julkaistaan esim. uusi selain tai tunnistin jostain muusta syystä epäonnistuu tehtävässään, voit lisätä sivulle “ohitus“-linkin, joka hylkää tunnistimen ja korvaa vaihtoehtoisen sisällön flash-esityksellä. Linkki voisi olla seuraavanlainen:
<a href="mypage.html?detectflash=false">Tunnistuksen ohitus</a>
Miksi se on parempi kuin muut
Vuosien varrella on ollut monenlaisia metodeja fp:n tarkistukseen ja esitysten embeddaukseen HTML-sivulle. Seuraavassa katsaus suosituimpiin metodeihin ja niiden ongelmat.
1) Macromedian oletusembeddaus
Tämän varmasti kaikki tietävät. Se koostuu object-tagista sekä sen sisälle “varmistukseksi” kirjoitetusta embed-tagista. Tämä on suosistuin tapa sisällyttää esitys sivulle ja flash julkaisee esitykset oletuksena käyttäen juuri kyseistä metodia.
<object id="Untitled-1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="150" height="150" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="align" value="middle" /><param name="allowScriptAccess" value="sameDomain" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="src" value="mymovie.swf" /><param name="name" value="Untitled-1" /><embed id="Untitled-1" type="application/x-shockwave-flash" width="150" height="150" src="mymovie.swf" name="Untitled-1" bgcolor="#ffffff" quality="high" allowscriptaccess="sameDomain" align="middle"></embed></object>
Suosiostaan huolimatta, metodissa on seuraavat onglemat:
- Ei plugin- tunnistinta – Ilman tunnistinta kävijä saataa nähdä “rikkinäisen” sivun tai ei sivua ollenkaan. Jos pluginia ei ole koneella ollenkaan, kävijä saa IE:llä “ActiveX install”- valintaikkunan (moni käyttäjä vieroksuu tätä koska eivät välttämättä ymmärrä mistä on kyse) tai Mozillaan perustuvilla selaimilla “palapelin kuvan”. Kumpikaan systeemeistä ei ole kovinkaan käyttäjäystävällinen, eivätkä usein informoi käyttäjää selkeästi siitä, mitä oikein ollaan asentamassa ja miksi.
- Se ei ole validia (x)HTML:ää – embed- tagi ei kuulu validiin (x)HTML:ään.
2) Flash satay
Tämä metodi on nostanut hurjasti suosiotaan sen jälkeen kun artikkeli julkaistiin A List Apart:ssa vuonna 2002.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="c.swf?path=movie.swf" /><embed type="application/x-shockwave-flash" width="400" height="300" src="c.swf?path=movie.swf"></embed></object>
- Ei plugin- tunnistinta – Sama kuin yllä. Kun Flash Player kohtaa embeddaus koodin sivulla, se yrittää toistaa esityksen huolimatta siitä mikä versio koneelle on asennettu. Eli jos koneelta löytyvä versio on vanhempi kuin vaadittava versio, lopputulos ei välttämättä ole halutun lainen
- Jotkut Flash Satay- metodit eivät striimaa esitystä – Eli tämä metodi saataa vaatia “holder“-swf:n johon varsinainen esitys ladataan. Flash- esitysten ylläpito muuttuu hankalammaksi eikä FlashVarsienkaan käyttö tästä helpotu.
- Vanhemmat Safarin versiot jättävät <param>- tagit huomiotta – Versio 2.0 (Tiger) , 1.3 (Panther)
3) “Pieni Flash-tunnistin index- sivulla”- metodi
Perusideana on siis flash- esitys index- sivulla, jonka tarkoituksena on tarkistaa “$version“- muuttuja ja ohjata käyttjä sen mukaan oikealle sivulle. Metodissa on seuraavat ongelmat:
- Sisäsivuilla ei ole plugin- tarkistusta – Jos kävijä ei tule sivulle etusivun kautta, tunnistusta ei tehdä missään vaiheessa
- Sivuston hakukonelistaus kärsii – Koska etusivusi on nyt varattu tyhjälle flash-tunnistimelle, hakukoneen käyttäjät näkevät listauksen kuvauksessa vain tekstin “Tunnistetaan Pluginia” tai pahimmassa tapauksessa eivät mitään. Useissa tapauksissa sivujen tekijät eivät vaivaudu edes linkittämään etusivua sisältöön, koska linkki on jo tunnistimessa, eikä tällaisissa tapauksissa sisäsivujakaan indeksoida ollenkaan.
4)Macromedia Flash MX 2004 Detection Kit
Tämä metodi on kaikessa yksinkertaisuudessaan vain kauniisti paketoitu versio edellämainitusta ja kärsii siis täysin samoista epäkohdista.
5)Puolivalmiin (jalostamattoman) javascriptin käyttö tunnistukseen ja embeddaukseen
Metodia on vaikea kritisoida, koska se vaihtelee joka sivulla. Kuitenkin useimmista löytyy seuraavat onglemat:
- Epäluotettava plugin-tunnistus – Useimmiten tunnistus toimii halutulla tavalla vain kaikkein uusimpien Player- versioiden kanssa ja skripti pitää päivittä manuaalisesti aina kun uusi player julkaistaan.
- Lisää “turhaa” koodia sivulle – Luonnollisesti tämä hankaloittaa sivun ylläpitoa.
Comments
6 comments to “SWFObject”
Leave a comment
Some Rights Reserved
Terve,
en tiedä onko total newbie kysymys,
mutta miten saan dokumenttini validiksi xhml:ksi,
kun kaikki tagit pitää käsittääkseni olla tagin sisällä?
..ja tagin sisälle laitettuna tuo ei toimi:
var fo = new SWFObject(“movie.swf”, “mymovie”, “200″, “100″, “#ffffff”);
fo.write(“flashcontent”);
Validin XHTML:n yksi kriteeri on siis se, että jokaisella tagilla on aloitus- ja lopetustagi. Näiden tagien sisään sitten tulee sivulla näkyvä info. En aivan täysin ymmärrä tuota ongelmaasi, mutta tuo js-pätkä tulee siis script-tagien väliin (aloitustagin ja lopetustagin väliin). Ei siis itse tagin “sisään”.
Hei,
mun viestissä ei näkynyt puoliakaan jutuista, koska pistin sinne
ym. tagejä, kun en ottanut huomioon että nehän ei tässä blogissa näy koska ne ovat htmllää.
En enää itsekään muista mitä kysyin..
Ja tuosta ei kyllä todellakaan voi tietää mikä kysymys on ollut.
Kiitos kuitenkin vaivannäöstä yrittää ymmärtää tekstiäni.
Hei,
Törmäsin pieneen ongelmaan. Minulla olisi flash tiedosto, jonka päälle halutaan läpikuultava div-layeri. Olen antanut SwfObjectille lisäparametreinä: so.addParam(“wmode”, “transparent”);, jotta tuon läpikuultavan div-layerin toteuttaminen olisi mahdollista.
Jostain syystä Os X:llä FF2.0:lla flash-movie ei toistu lainkaan, muilla selaimilla kyllä.
Kun otin tuon lisäparametrin pois, movie toistu ihan ok, tosin läpikuultavan, leffan päälle tuleva layeri ei onnistu nyt. Kun klikkaan oikealla napilla movien päällä, tulee flashin kontekstimenu esiin, mutta valitettavasti näkyvissä on vain kyseisen div:n taustaväri, johonka tuo Flash-movie embedataan.
Onko tähän jotain ratkaisua olemassa vai joudutaanko odottamaan päivityksiä?
Testatut ja toimivat selaimet, IE6&IE7, Safari, Opera Wii:llä
Lienee vain Os X+FireFox2.0 ongelma.
Kiitos jo etukäteen
Valitettavasti ei ole macista kokemusta, joten tuota en osaa kommentoida
Kannattaa tiedustella ratkaisua/vastausta apukeittiöstä.
Kiitos jo etukäteen