Video örneği: Video Jukebox

Flash Player 9 ve üstü, Adobe AIR 1.0 ve üstü

Aşağıdaki örnek, bir video listesini sırayla oynatmak için dinamik olarak yükleyen basit bir video jukebox oluşturur. Bu da, kullanıcının eğitim videoları dizisi içinde gezinmesini sağlayan veya belki de kullanıcının istediği videoyu sunmadan önce hangi reklamların oynatılması gerektiğini belirten bir uygulama oluşturmanıza olanak verir. Bu örnek, ActionScript 3.0'ın şu özelliklerini gösterir:

  • Video dosyasının oynatma ilerlemesini esas alarak oynatma kafasını güncelleme

  • Video dosyasının meta verilerini dinleme ve ayrıştırma

  • Net akışındaki belirli codec bileşenlerini işleme

  • Dinamik olarak yüklenmiş bir FLV'yi yükleme, oynatma, duraklatma ve durdurma

  • Net akışının meta verilerini esas alarak görüntüleme listesinde video nesnesini yeniden boyutlandırma

Bu örneğin uygulama dosyalarını edinmek için bkz. www.adobe.com/go/learn_programmingAS3samples_flash_tr . Video Jukebox uygulama dosyalarını Samples/VideoJukebox klasöründe bulabilirsiniz. Uygulama aşağıdaki dosyaları içerir:

File

Açıklama

VideoJukebox.fla

veya

VideoJukebox.mxml

Flex (MXML) veya Flash (FLA) için ana uygulama dosyası.

VideoJukebox.as

Uygulamanın temel işlevini sağlayan sınıf.

playlist.xml

Video jukebox'a hangi video dosyalarının yükleneceğini listeleyen bir dosya.

Harici bir video oynatma listesi dosyası yükleme

Harici playlist.xml dosyası, hangi videoların yükleneceğini ve bu videoların hangi sırayla oynatılacağını belirtir. XML dosyasını yüklemek için, aşağıdaki kodda görüldüğü gibi bir URLLoader nesnesi ve bir URLRequest nesnesi kullanmanız gerekir:

uldr = new URLLoader(); 
uldr.addEventListener(Event.COMPLETE, xmlCompleteHandler); 
uldr.load(new URLRequest(PLAYLIST_XML_URL));

Başka bir kod çalıştırılmadan önce dosyanın yüklenmesi için bu kod VideoJukebox sınıfının yapıcısına yerleştirilir. XML dosyasının yüklemesi bittiğinde, aşağıdaki kodda görüldüğü gibi, harici dosyayı bir XML dosyasına ayrıştıran xmlCompleteHandler() yöntemi çağrılır:

private function xmlCompleteHandler(event:Event):void 
{ 
    playlist = XML(event.target.data); 
    videosXML = playlist.video; 
    main(); 
}

Videonun XML'i yalnızca video düğümlerini içeren bir XMLList nesnesiyken, playlist XML nesnesi harici dosyanın işlenmemiş XML'ini içerir. Aşağıdaki kod parçasında basit bir playlist.xml dosyası görülebilir:

<videos> 
    <video url="video/caption_video.flv" /> 
    <video url="video/cuepoints.flv" /> 
    <video url="video/water.flv" /> 
</videos>

Son olarak, xmlCompleteHandler() yöntemi, harici FLV dosyalarını yüklemek için kullanılan NetConnection ve NetStream nesnelerini ve görüntüleme listesinde çeşitli bileşen örneklerini ayarlayan main() yöntemini çağırır.

Kullanıcı arabirimini oluşturma

Kullanıcı arabirimini oluşturmak için, beş Button örneğini görüntüleme listesine sürüklemeniz ve şu örnek adlarıyla adlandırmanız gerekir: playButton , pauseButton , stopButton , backButton ve forwardButton .

Bu Button örneklerinin her biri için, aşağıdaki kod parçasında görüldüğü gibi, click olayına yönelik bir işleyici atamanız gerekir:

playButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
pauseButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
stopButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
backButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
forwardButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);

buttonClickHandler() yöntemi, aşağıdaki kodda görüldüğü gibi hangi düğme örneğinin tıklatılmış olduğunu belirlemek için bir anahtar deyimi kullanır:

private function buttonClickHandler(event:MouseEvent):void 
{ 
    switch (event.currentTarget) 
    { 
        case playButton: 
            ns.resume(); 
            break; 
        case pauseButton: 
            ns.togglePause(); 
            break; 
        case stopButton: 
            ns.pause(); 
            ns.seek(0); 
            break; 
        case backButton: 
            playPreviousVideo(); 
            break; 
        case forwardButton: 
            playNextVideo(); 
            break; 
    } 
}

Daha sonra, görüntüleme listesine bir Slider örneği ekleyin ve bu örneğe volumeSlider örnek adını verin. Aşağıdaki kod, kaydırıcı örneğinin liveDragging özelliğini true değerine ayarlar ve kaydırıcı örneğinin change olayı için bir olay dinleyicisini tanımlar:

volumeSlider.value = volumeTransform.volume; 
volumeSlider.minimum = 0; 
volumeSlider.maximum = 1; 
volumeSlider.snapInterval = 0.1; 
volumeSlider.tickInterval = volumeSlider.snapInterval; 
volumeSlider.liveDragging = true; 
volumeSlider.addEventListener(SliderEvent.CHANGE, volumeChangeHandler);

Görüntüleme listesine bir ProgressBar örneği ekleyin ve bu örneğe positionBar örnek adını verin. Aşağıdaki kod parçasında görüldüğü gibi, örneğin mode özelliğini manüel olarak ayarlayın:

positionBar.mode = ProgressBarMode.MANUAL;

Daha sonra, görüntüleme listesine bir Label örneği ekleyin ve bu örneğe positionLabel örnek adını verin. Bu Label örneğinin değeri, zamanlayıcı örneğiyle ayarlanır

Video nesnesinin meta verilerini dinleme

Flash Player, yüklenen her video için meta verilerle karşılaştığında, NetStream nesnesinin client özelliğinde onMetaData() geri çağrı işleyicisi çağrılır. Aşağıdaki kod bir Object öğesini başlatır ve belirtilen geri çağrı işleyicisini ayarlar:

client = new Object(); 
client.onMetaData = metadataHandler;

metadataHandler() yöntemi, kodun önceki kısımlarında tanımlanan meta özelliğine verilerini kopyalar. Bu da uygulamanın tamamı boyunca istediğiniz zaman geçerli videonun meta verilerine erişmenizi sağlar. Daha sonra, Sahne Alanı'ndaki video nesnesi, meta verilerden döndürülen boyutlarla eşleşecek şekilde yeniden boyutlandırılır. Son olarak, positionBar ilerleme çubuğu örneği taşınır ve geçerli olarak oynatılan videonun boyutu esas alınarak yeniden boyutlandırılır. Aşağıdaki kod, metadataHandler() yönteminin tamamını içerir:

private function metadataHandler(metadataObj:Object):void 
{ 
    meta = metadataObj; 
    vid.width = meta.width; 
    vid.height = meta.height; 
    positionBar.move(vid.x, vid.y + vid.height); 
    positionBar.width = vid.width; 
}

Dinamik olarak bir video yükleme

Videoların her birini dinamik olarak yüklemek için, uygulama bir NetConnection ve NetStream nesnesi kullanır. Aşağıdaki kod bir NetConnection nesnesi oluşturur ve connect() yöntemine null değerini iletir. null değeri belirtildiğinde, Flash Player, Flash Media Server gibi bir sunucuya bağlanmak yerine, yerel sunucuda bir videoya bağlanır.

Aşağıdaki kod, NetConnection ve NetStream örneklerini oluşturur, netStatus olayı için bir olay dinleyicisi tanımlar ve client Object öğesini client özelliğine atar:

nc = new NetConnection(); 
nc.connect(null); 
 
ns = new NetStream(nc); 
ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
ns.client = client;

Videonun durumu her değiştiğinde, netStatusHandler() yöntemi çağrılır. Video durumu değişikliği kapsamında, video oynatımının başlatılması veya durdurulması, videonun arabelleğe alınması ya da video akışının bulunamaması yer alır. Aşağıdaki kod, netStatusHandler() olayını listeler:

private function netStatusHandler(event:NetStatusEvent):void 
{ 
    try 
    { 
        switch (event.info.code) 
        { 
            case "NetStream.Play.Start": 
                t.start(); 
                break; 
            case "NetStream.Play.StreamNotFound": 
            case "NetStream.Play.Stop": 
                t.stop(); 
                playNextVideo(); 
                break; 
        } 
    }  
    catch (error:TypeError)  
    { 
        // Ignore any errors. 
    } 
}

Önceki kod, bilgi nesnesinin kod özelliğini değerlendirir ve kodun “NetStream.Play.Start”, “NetStream.Play.StreamNotFound” veya “NetStream.Play.Stop” öğesi mi olduğunu filtreler. Diğer tüm kodlar yoksayılır. Net akışı başlıyorsa, kod, oynatma kafasını güncelleyen Timer örneğini başlatır. Net akışı bulunamazsa veya durdurulursa, Timer örneği durdurulur ve uygulama oynatma listesindeki bir sonraki videoyu oynatmaya çalşır.

Timer her çalıştırıldığında, positionBar ilerleme çubuğu örneği, ProgressBar sınıfının setProgress() yöntemini çağırarak geçerli konumunu günceller ve positionLabel Label örneği, geçen süre ve geçerli videonun toplam süresiyle güncellenir.

private function timerHandler(event:TimerEvent):void 
{ 
    try 
    { 
        positionBar.setProgress(ns.time, meta.duration); 
        positionLabel.text = ns.time.toFixed(1) + " of " meta.duration.toFixed(1) + " seconds"; 
    }  
    catch (error:Error) 
    { 
        // Ignore this error. 
    } 
}

Videonun ses düzeyini denetleme

NetStream nesnesinde soundTransform özelliğini ayarlayarak dinamik şekilde yüklenmiş videonun ses düzeyini denetleyebilirsiniz. Video jukebox uygulaması, volumeSlider Slider örneğinin değerini değiştirerek ses düzeyini değiştirmenize olanak sağlar. Aşağıdaki kod, NetStream nesnesinde soundTransform özelliğine ayarlanan SoundTransform nesnesine Slider bileşeninin değerini atayarak ses düzeyini nasış değiştirebileceğinizi gösterir:

private function volumeChangeHandler(event:SliderEvent):void 
{ 
    volumeTransform.volume = event.value; 
    ns.soundTransform = volumeTransform; 
}

Video oynatımını denetleme

Video, video akışının sonuna ulaştığında, uygulamanın geri kalanı video oynatımını denetler ve kullanıcı önceki veya sonraki videoya atlar.

Aşağıdaki yöntem, geçerli olarak seçili dizin için XMLList öğesinden video URL'sini alır:

private function getVideo():String 
{ 
    return videosXML[idx].@url; 
}

playVideo() yöntemi, geçerli olarak seçili videoyu yüklemek için, NetStream nesnesinde play() yöntemini çağırır:

private function playVideo():void 
{ 
    var url:String = getVideo(); 
    ns.play(url); 
}

playPreviousVideo() yöntemi, geçerli video dizinini azaltır, yeni video dosyasını yüklemek için playVideo() yöntemini çağırır ve ilerleme çubuğunu görünür olacak şekilde ayarlar:

private function playPreviousVideo():void 
{ 
    if (idx > 0) 
    { 
        idx--; 
        playVideo(); 
        positionBar.visible = true; 
    } 
}

Son yöntem olan playNextVideo() ise, video dizinini artırır ve playVideo() yöntemini çağırır. Geçerli video, oynatma listesindeki son videoysa, Video nesnesinde clear() yöntemi çağrılır ve ilerleme çubuğu örneğinin visible özelliği false değerine ayarlanır:

private function playNextVideo():void 
{ 
    if (idx < (videosXML.length() - 1)) 
    { 
        idx++; 
        playVideo(); 
        positionBar.visible = true; 
    } 
    else 
    { 
        idx++; 
        vid.clear(); 
        positionBar.visible = false; 
    } 
}