Işık Üniversitesi Media Player Kullanımı
Transkript
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.