Kuika’nın Video Player elementi, uygulamalarınıza video içerikleri entegre etmenizi sağlayan etkileşimli bir medya oynatıcıdır. Kullanıcıların videoları oynatabilmesi, duraklatabilmesi, sesi kontrol edebilmesi ve ilerleme çubuğunu kullanabilmesi için gerekli tüm temel özellikleri sunar. Video Player, hem bilgilendirme hem de eğitim amaçlı içeriklerin kullanıcıya doğrudan aktarılması gereken durumlarda kullanılabilir.
Video Player elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Eğitim ve Öğretim İçerikleri: Uygulama içi eğitim videoları, ders içerikleri veya kullanıcıya süreç anlatımı yapılması gereken durumlarda video oynatma ihtiyacını karşılar.
Ürün Tanıtımları ve Reklam Videoları: Bir ürünün nasıl çalıştığına dair kısa tanıtım videoları veya kampanya içerikleri göstermek için kullanılabilir.
Kullanıcı Kılavuzları ve Rehberler: Uygulamanın bir özelliğini nasıl kullanacağını göstermek için video tabanlı anlatımlar sunulabilir.
Şirket İçi İletişim veya Bilgilendirme: Kurumsal duyurular, etkinlik kayıtları veya iç iletişim mesajları için video yayını kullanılabilir.
Eğlence, Tanıtım ve İçerik Akışı: Blog, haber, röportaj veya hikâye formatındaki videoların kullanıcıya doğrudan iletilmesini sağlar.
2. Temel Özellikler
Video Kaynağı Tanımlama: Videoları URL üzerinden veya uygulama içinde depolanan medya dosyalarından oynatabilirsiniz.
Oynatma Kontrolleri: Kullanıcı videoyu başlatabilir, duraklatabilir, tekrar oynatabilir ve zaman çubuğu üzerinden videoda ileri–geri hareket edebilir.
Ses Kontrolleri: Ses seviyesinin ayarlanması, sessize alma ve ses açma gibi temel ses yönetimi desteklenir.
2.1. Video Player Elementi Özellikleri (Properties)
Video Player elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz:
URL:
Fixed Value: Statik bir URL adresi ekleyerek ilgili videoyu oynatabilirsiniz.
Symbol Picker: Dinamik bir URL eklemek için kullanılır. Örneğin, bir Text Input elementine girilen URL'yi veya bir aksiyon sonucu elde edilen URL'yi gösterebilirsiniz.
Controls: Kullanıcının videoyu oynatma, durdurma veya sesi açıp kapatma gibi kontrolleri görüp göremeyeceğini belirler. Kontrolleri tamamen gizleyebilir veya yalnızca belirli düğmeleri gösterebilirsiniz.
Muted: Videonun sayfa yüklendiğinde sessiz (mute) olarak açılmasını sağlar. Kullanıcı, isterse sesi açabilir. Özellikle otomatik oynatma senaryolarında faydalıdır.
Loop: Videonun süresi sona erdiğinde otomatik olarak tekrar oynatılmasını sağlar. Kullanıcı durdurana veya ekran kapanana kadar video tekrar eder.
2.2. Video Player Elementine Eklenebilen Aksiyonlar
Video Player elementi, kullanıcı etkileşimine bağlı olarak aksiyon tetiklemeyi destekler. Element seçildiğinde ADD ACTION butonu üzerinden aşağıdaki tetikleyici eklenebilir:
onClick
Kullanıcı Video Player elementine tıkladığında çalışır. Bu tetikleyici, video oynatımıyla doğrudan bağlantılı olmayan ancak kullanıcı etkileşimine dayalı işlemler için kullanılır.
Kullanım Senaryoları:
Videonun oynatılmasından önce bir doğrulama ekranı veya bilgilendirme mesajı açmak
Video izleme istatistiği toplamak (ör. "Kullanıcı videoyu başlatmak için tıkladı")
Başka bir elementin görünürlüğünü değiştirmek veya bir popup açmak
Video oynatılmadan önce kullanıcıdan izin istemek (örn. veri kullanımı, içerik onayı)
3. Video Player Elementi Nasıl Kullanılır?
Bu bölümde Video Player elementinin uçtan uca kullanımını bir senaryo üzerinden ele alacağız.
Senaryo: Eğitim İçeriğinin Video Player ile Oynatılması
Bir eğitim uygulamasında, kullanıcılar eğitimin detay sayfasına girdiklerinde ilgili eğitime ait videoyu izleyebilmelidir. Video içeriğine ait URL bilgisi, oynatma davranışları (sessiz başlatma, tekrar oynatma gibi) ve başlık bilgileri sistem tarafından belirlenir.
Senaryoda:
Sayfa açıldığında ilgili eğitime ait video otomatik olarak yüklenir.
Kullanıcı, oynatma ve durdurma işlemlerinin yanı sıra ses açma ve kapama kontrollerini kullanabilir.
Video, tanımlanan ayarlara bağlı olarak sessiz başlatılabilir veya döngü (loop) modunda oynatılabilir.
Adım 1 – Örnek Veri Aksiyonunu Oluşturma
UI Design modülünü açın.
Sol yan panelde Custom Actions alanından yeni SQL Action oluşturun.
Aksiyon adını GetCourseVideo olarak belirleyin.
SELECT *
FROM (
VALUES
(
N'Kuika Low-Code Nedir?',
N'https://www.youtube.com/watch?v=FbqXiDg9Xi4',
N'Bu videoda Kuika Low-Code platformunun ne olduğu ve temel kullanım amacı kısaca anlatılır.' )
) AS VideoContent(Title, VideoUrl, Description);
GetCourseVideo Aksiyonunu ana sayfaya Add Action > Initial Action olarak ekleyin.
Adım 2 – Ana Sayfa Element Ekleme
UI Design modülünü açın.
Sayfaya Elements > Display > Image elementini ekrana sürükleyip bırakın.
Image elementine eklenecek logonuzu Image > Properties > Value > Uploaded Images alanından ekleyin ve seçin.
Image elementinin boyutlandırma konumunu Image > Styling > Layout alanında aşağıdaki ayarlamaları yapın.
Image yanındaki boşluğa tıklayın. Tıklandığında seçili olan Col > Styling > Layout > Align > Dikeyde ve Yatayda Ortala olarak ayarlayın.
Başlık için Elements > Display > Label elementini sayfaya sürükleyip bırakın.
Başlık yazısını Label > Properties > Value > Action Results > GetCourseVideo > First > Title olarak ayaralayın.
Yazı stilinin Label > Styling > Text > Style > Heading 2 olarak ayarlayın.
Sol panelden Elements > Display > Video Player elementini ekrana sürükleyip bırakın.
İzlenecek video Url’ini VideoPlayer > Properties > Url > Action Results > GetCourseVideo > First > VideoUrl olarak ayaralayın.
Video ekranı açıldığında, kullanıcının videoyu duraklatma, sesi artırma/azaltma, oynatma hızını değiştirme gibi işlemleri gerçekleştirebilmesi için VideoPlayer > Properties > Controls> Açık olarak ayarlayın.
Başlangıçta videonun sessiz olarak başlaması için VideoPlayer > Properties > Muted> Açık olarak ayarlayın.
Video bittiğinde otomatik tekrar başlaması için VideoPlayer > Properties > Loop> Açık olarak ayarlayın.
Son olarak sayfaya Elements > Display > Label elementini sürükleyip bırakın.
Yazıyı video açıklamasını gösterecek şekilde Label > Properties > Value > Action Results > GetCourseVideo > First > Description alanını tanımlayın.
Preview
Uygulama test edildiğinde, eğitim detay ekranında “Kuika Low-Code Nedir?” başlığı altında ilgili eğitime ait video içeriği Video Player elementi üzerinden görüntülenir. Video, sayfa yüklendiğinde otomatik olarak hazır hale gelir ve kullanıcı, oynatma, durdurma, ses açma/kapama, ilerletme ve tam ekran gibi temel video kontrollerini kullanarak içeriği izleyebilir.
Video Player’ın altında yer alan açıklama alanında, eğitimin içeriğine dair kısa bir bilgilendirme metni gösterilir. Bu alanda, Kuika Low-Code platformunun ne olduğu ve temel kullanım amacının kısaca anlatıldığı bilgisi kullanıcıya sunulur.
4. Ortak Özellikler (Properties)
Video Player elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Video dosyalarını optimize edin. Büyük boyutlu videolar sayfa yüklenmesini yavaşlatabilir; mümkünse sıkıştırılmış MP4 formatı tercih edin.
Video kontrollerini kullanıcı odaklı yapılandırın. Eğer kullanıcı videoyu durdurmalı, ileri–geri sarmalı veya tam ekran yapmalıysa kontrollerin aktif olduğundan emin olun.
Video kaynaklarını dinamik bağlayın. Özellikle eğitim içerikleri, kampanyalar veya medya galerileri gibi sık değişen içeriklerde video URL’sini Symbol Picker üzerinden aksiyona veya veritabanına bağlamak yönetilebilirliği artırır.
6. Kısıtlamalar
onClick dışında başka aksiyon tetikleyicisi bulunmaz (ör. onPlay, onPause, onEnd desteklenmez).
Video Player elementi içeriği yalnızca oynatır; video düzenleme veya kesme işlevleri desteklenmez.
