• címkék:
  • flash
  • video
  • audio
  • mp3
  • sIFR
  • detektál
  • YouTube

jQuery Flash Plugin

Flash beágyazás alapbeállításokkal

Alapbeállítások használatakor a flash mozi elérési útvonalát, a szélességét, valamint a magasságát kell definiálnunk.
Ha szeretnénk a mozi lejátszását egy meghatározott flash player verzióhoz kötni, akkor azt a version paraméterrel tehetjük meg.

        $(document).ready(function(){
          $('#pelda').flash(
            {
              src: 'swf/pelda.swf',
              width: 360,
              height: 240
            },
            { version: 8 }
          );
        });
      

Flash beágyazás változókkal

Ha a flash mozit változók megadásával szeretnénk beágyazni, akkor arra is van lehetőség.
A flashvars paraméternek tömb formájában kell a kívánt változókat átadni:

        $(document).ready(function(){
          $('#pelda').flash(
            { 
              src: 'swf/pelda.swf',
              width: 360,
              height: 240,
              flashvars: { valtozo1: 'ertek-1', valtozo2: 'ertek-2' }
            },
            { version: 8 }
          );
        });
      

Egyedi betűtípus használata (sIFR)

Ha weblapunkon szeretnénk tetszőleges betűtípusokat használni, akkor ez ún. "font replacement" technikát igényel, amelynek egyik megvalósítása a sIFR (Scalable Inman Flash Replacement). A sIFR technika alkalmazásával tetszőleges betűtípusokat ágyazhatunk weboldalunkba, amelyeket ugyanúgy, mint egy normális szöveget, ki tudunk jelölni, illetve másolni.

Mindazonáltal szerintem ennek alkalmazása nem túl nyerő: a böngészőben a JavaScript letiltásával ez a megoldás kiiktatható (a honlap helytelen megjelenítéséhez is vezethet), valamint ha túl sok helyen alkalmazzuk a weblapunkon, akkor az oldal betöltődését is nagy mértékben csökkenteni fogja.

Az alábbi deklarációban használt itc_century.swf forrás file-ja letölthető a plugin honlapjáról: letöltés (.fla)

        $(document).ready(function(){
          $('h3').flash(
            { 
              src: 'itc_century.swf', 
              flashvars: { 
                css: [
                  '* { color: #666666; }',
                  'a { color: #0099CC; text-decoration: none; }',
                  'a:hover { text-decoration: underline; }'
                ].join(' ')
              }
            },
            { version: 7 },
            function(htmlOptions)
            {
              htmlOptions.flashvars.txt = this.innerHTML;
              this.innerHTML = '
'+this.innerHTML+'
'; var $alt = $(this.firstChild); htmlOptions.height = $alt.height(); htmlOptions.width = $alt.width(); $alt.addClass('alt'); $(this) .addClass('flash-replaced') .prepend($.fn.flash.transform(htmlOptions)); } ); });

MP3 player

A plugin segítségével mp3 file-okat is az oldalunkba ágyazhatunk. A beágyazáshoz a Single MP3 Player-t használja
(a szükséges .swf file a letölthető állományban megtalálható).

Beágyazott zene

Alábbi deklarációval az oldal összes olyan linkjére alkalmazzuk a plugin-t, amely egy mp3 file-ra hivatkozik:

        $(document).ready(function(){
          $('a[href$=.mp3]').flash(
            { src: 'swf/singlemp3player.swf', height: 20, width: 100 },
            { version: 7 },
            function(htmlOptions) {
              $this = $(this);
              htmlOptions.flashvars.file = $this.attr('href');
              $this.before($.fn.flash.transform(htmlOptions));						
            }
          ).css('display','none');
        });
      

YouTube video beágyazás

Beágyazott YouTube videó

Alábbi kóddal a plugin-t az oldalon szereplő összes linkhez hozzárendeljük, mely a YouTube oldalára hivatkozik:

        $(document).ready(function(){
          $('a[href^=http://www.youtube.com]').flash(
            { height: 370, width: 450 },
            { version: 8 },
            function(htmlOptions) {
              $this = $(this);
              htmlOptions.src = $this.attr('href');
              $this.before($.fn.flash.transform(htmlOptions));						
            }
          ).css('display', 'none');
        });
      

Inline paraméterek

Inline módban lehetőségünk van a flash movie-kat viszonylag gyorsan és egyszerűen beágyazni. Ehhez tetszőleges HTML elemet használhatunk, melynek pl. a rel attribútumában definiáljuk a beágyazandó flash mozi paramétereit: az első paraméter a beágyazandó flash mozi elérési útvonala, a második a szélessége, a harmadik pedig a magassága - mindezek kettősponttal elválasztva.

Deklaráció:

        $(document).ready(function(){
          $('#example li').flash(null, { version: 8 }, function(htmlOptions) {
            var $this = $(this);
            var params = $this.attr('rel').split(':');
            htmlOptions.src = params[0];
            htmlOptions.width = params[1];
            htmlOptions.height = params[2];
            this.innerHTML = '
'+this.innerHTML+'
'; $this.addClass('flash-replaced').prepend($.fn.flash.transform(htmlOptions)); }).css('list-style-type','none'); });

A HTML kód:

        <ul id="example">
          <li rel="swf/example.swf:160:105">Kicsi</li>
          <li rel="swf/example.swf:320:215">Közepes</li>
          <li rel="swf/example.swf:720:480">Nagy</li>
        </ul>
      

És a végeredmény:

« bezár