JS – IKWeb.ORG

IK Player web üzerinde videolar oynatabilen bir javascript eklentisidir. Bu eklenti ile web sitenizde video oynatabilirsiniz.

Kurulum için https://github.com/ikweb/ikplayer sayfasından dosyaları indirin. Bir html sayfası oluşturun. ikplayer.js dosyasını çağırın. Bir id’ye html div etiketi oluşturun. Bu etiketi ikplayer() fonksiyonuna tanımlayın. Ardından setup() fonksiyonu ile parametreler tanımlayın.

[code]<script src=”ikplayer.js”></script> <div id=”ikplayer”></div> <script> ikplayer(‘ikplayer’).setup({ file: “file.mp4”, image: “image.jpg”, about: { text: “IK Player”, link: “https://ikplayer.ikweb.org” }, logo: { file: “logo.png”, link: “https://ikplayer.ikweb.org”, position: “top-right”, hide: false }, autoplay: true, controls: false, repeat: true, muted: true, starttime: 5, width: “100%”, height: “100%” }) </script>[/code]

Parametreler:
file: Oynatıcı video dosyası bağlantısı
image: Oynatıcı görüntü dosyası bağlantısı
width: Oynatıcı genişliği. Varsayılan: 100%
height: Oynatıcı genişliği. Varsayılan: 100%
autoplay: Oynatıcı çalıştığında video’yu otomatik oynatır. Varsayılan: false
controls: Oynatıcı cotrolleri aktif eder. Varsayılan: true
repeat: Oynatıcı video’yu sürekli tekrar ettirir. Varsayılan: false
muted: Oynatıcı video’nun sesini kapatır. Varsayılan: false
starttime: Oynatıcı videonun başlangıç süresini belirler. Varsayılan: 0
logo.file: Oynatıcı logo dosyası bağlantısı. Varsayılan: IK Player Logosu
logo.link: Oynatıcı logo link’i. Varsayılan: https://ikplayer.ikweb.org/1.0.9/ikplayer.html
logo.position: Oynatıcı logo konumunu belirler. Varsayılan: top-right
logo.hide: Oynatıcı logo gizliliğini belirler. Varsayılan: false
about.text: Oynatıcı hakkında metin tanımlar. Varsayılan: null
about.link: Oynatıcı hakkında link’i tanımlar. Varsayılan: https://ikplayer.ikweb.org

Bir çok web sitede kaydırma çubuğunu aşağı çektikçe bazı nesnelerin üste sabit durduğunu görürsünüz. Bu işlemin mantığı kaydırma çubuğunu belirli bir seviyeye geldiğinde nesne pozisyonu sabit kalır. Bunu javascript ile yapabilirsiniz. Bu işlemi iki türlü yapabilirsiniz. Birincisi, objeye style değeri vermek. İkincisi, class atamak.

Birinci yöntem;

[code]<div id=”sticky”></div>
<script>
window.onscroll = function() {
var nesne = document.getElementById(“sticky”);
var sticky = nesne.offsetTop;
if (window.pageYOffset > sticky) {
nesne.style.position = “fixed”;
} else {
nesne.style.position = “”;
}
}
</script>[/code]

İkinci yöntem;

[code]<style>
.sticky {
position: fixed;
top: 0px
}
</style>
<script>
window.onscroll = function() {
var nesne = document.getElementById(“myHeader”);
var sticky = nesne.offsetTop;
if (window.pageYOffset > sticky) {
nesne.classList.add(“sticky”);
} else {
nesne.classList.remove(“sticky”);
}
}
</script>[/code]

Her iki yöntemde de dikkat edilmesi gereken bir husus var. “sticky” nesnesi sabitlendiği zaman; “sticky” nesnenin sonrasındaki nesne, “sticky” nesnenin yüksekliği kadar altında kalır. Bu yüzden, “sticky” nesnesi sabitlendiğinde, “sticky” nesnenin sonrasındaki nesnenin padding veya margin değeri (“sticky” nesnenin yüksekliğinden biraz fazla) vermek gerekiyor.