Işık Üniversitesi Media Player Kullanımı

Işık Üniversitesi Media Player Kullanımı
Content 1 alanında video player embed ederek inline olarak kullanabilir veya bir link, button veya
resim click’inde videoyu lightbox içersinde gösterebilirsiniz. Her iki kullanımın da örneği
http://aday.isikun.edu.tr/typography sayfasında mevcuttur. Her iki kullanımda da video’yu init etmek
için daha önce tanımladığımız video() isimli JavaScript fonksiyonunu çalıştırmak gerekmekte.
video() fonksiyonu:
Kullanımı:
video(type, container, url, thumbnail, width, height, autostart);







type: Video’nun inline veya lightbox olarak gösterileceğini belirler.
Örnek: “inline” veya “lightbox”
container: type inline ise player’ın embed edileceği div’i, lightbox ise tıklanınca açılacak olan
a tag’ini belirtir.
Örnek: “sendeisikvarVideo”
url: Video dosyasının URL’ini belirtir. (Bkz: Supported Video and Audio Formats)
Örnek: "i/images/videos/sendeisikvar.flv"
thumbnail: Opsiyoneldir. Video’u play yapmadan önceki önizleme resmini belirtir. Eğer video
autoplay ise bu alan pas geçilir.
Örnek: “i/images/videos/sendeisikvarpreview.jpg”
width: Opsiyoneldir. Player’ın genişliğini belirtir. Eğer width girilmez ise video dosyasının
default genişliği baz alınır.
Örnek: “500” veya “100%”
height: Opsiyoneldir. Player’ın yüksekliğini belirtir. Eğer height girilmez ise video dosyasının
default yüksekliğini baz alınır.
Örnek: “300” veya “100%”
autostart: Video’nun otomatik başlayıp başlamayacağını belirler.
Örnek: true veya false
Supported Video and Audio Formats:







MP4 (.mp4, .m4v, .f4v, .mov)
WebM (.webm)
FLV (.flv)
OGG (.ogv)
AAC (.aac, .m4a, .f4a)
Vorbis (.ogg, .oga)
MP3 (.mp3)
Inline Kullanım Örneği:
Player’ın embed edileceği container tag’i belirlenmeli öncelikle.
Örnek: <div id="sendeisikvarVideo"></div>
Sonrasında yukarıda oluşturulan div’e video fonksiyon ile player embed edilir.
Örnek:
<script type="text/javascript">
video("inline", "sendeisikvarVideo", "i/images/videos/sendeisikvar.flv",
"i/images/videos/sendeisikvarpreview.jpg", "100%", "383", false);
</script>
Lightbox Kullanım Örneği:
Tıklanınca lightbox’ın açılacak link belirlenmeli öncelikle.
Örnek: <a id="sendeisikvarVideoLink">Video'yu izlemek için tıklayın</a>
Sonrasında yukarıda oluşturulan a’ya lightbox init edilmeli.
Örnek:
<script type="text/javascript">
video("lightbox", "sendeisikvarVideoLink", "i/images/videos/sendeisikvar.flv",
"i/images/videos/sendeisikvarpreview.jpg", "580", "383", true);
</script>
Her iki kullanımda da önemli olan nokta: JavaScript kodlarının ilgili HTML tag’lerinden sonra
yüklenmesi gerektiğidir.