HTML Dersleri #10 | iFrame ve Video ile Çalışmak

HTML Dersleri #10 | iframe ve Videolar ile Çalışmak

Iframe

Temel HTML derslerimizin sonuncusunda <iframe></iframe> etiketini kullanmayı, hem iframe etiketi ile hemde video etiketlerini kullanarak sayfamızda video görüntülerin nasıl eklenebileceğini öğreneceğiz.

iframe etiketi kendi html sayfamızın içinde bir başka sayfanın gösterilmesi için kullanılır. Daha iyi anlaşılması için şöyle bir örnek verirsek; bir hava durumu yayını yapan sayfayı kendi sayfanızın bir bölümünde gösterebilirsiniz. Bunun için uzun uzun kodlar yazmak zorunda kalmazsınız, başka bir örnek vermek gerekirse belki günlük döviz kurlarının gösteren veya bir haber sitesini kendi sayfanız içinde yayımlayabilirsiniz. Ancak bilinmeli ve dikkat edilmelidir ki yapılan bu işlem arama motorları tarafından spam olarak algılanabilir.

Aşağıdaki örnek incelendiğinde;

<iframe src="https://www.esencan.net" width="500" height="500"></iframe>

iframe etiketinin src (source/kaynak) özelliğine https://www.esencan.net değeri verilmiş ayrıca html sayfamızın içerisinde gösterilmesi gereken alanlar width (genişlik) ve height (yükseklik) özelliklerine 500px değeri atanarak 500px kenar uzunluğuna sahip bir kare içerisinde esencan.net sayfası gösterilmesi sağlanmıştır. Gösterilecek olan sayfanın mimarisine bağlı olarak yaratılan frame’in sağ ve alt kısmında scrool bar oluşacaktır. Eğer site responsive olarak tasarlanmış ise alttaki scrool bar gözükmeyebilir.

iframe etiketinin kaynak özelliği örneğin bir youtube video linki alıyorsa bu çerçeve içerisinde youtube videosu gözükecektir.  Aşağıdaki örnek incelendiğinde;

<iframe src="https://youtube.com/embed/pof3cZHX1H0" width="300" height="200"></iframe>

Kaynak (src) özelliğine bir youtube linki değer olarak verilmiş, genişlik özelliği 300px değerini, yükseklik özelliği ise 200px değerini almıştır. Tarayıcıda incelediğinizde 300px genişlik ve 200px yükseklik boyutunda bir çerçeve içerisinde youtube videosu gözükecektir. Eğer bir youtube videosuna link vermek istiyorsunuz ve tarayıcıdan oynatılan videonun URL’ini kopyalayıp src özelliğine bu değeri verirseniz hatalı bir işlem yapmış olursunuz. Youtube videolarının eklemek için yapmanız gerekenler https://support.google.com/youtube/answer/171780?hl=tr adresinde de açıkça anlatılmıştır.

Hostunuzda bulunan bir video dosyasını html sayfanızın içerisinde göstermek için <video></video> etiketleri içerisine eklenen başka bir <source> etiketi ile gerçekleştirilir. Aşağıdaki örnek incelendiğinde;

<video width="300" height="200" controls="" autoplay="" loop="">
<source src="Sihirli-Ayna.mp4" type="video/mp4">
</video>

Video Ekleme

Video etiketinin alt etiketi olarak bir source etiketi ve src özelliğinin aldığı değer ile video dosyasının yolu belirtilmiş ve bu dosyaya ait MIME tipide type özelliğinin aldığı “video/mp4” değeri ile belirtilmiştir. Video etiketinin içinde yaratılan genişlik (width), yükseklik (height) özelliğlerinin aldığı değerler sonucunda video 300px’e 200px bir alan içerisinde gösterilmesi sağlanmıştır. Eğer video etiketinin içerisine bir özellik tanımlanmaz ise sayfanızda videonun ilk frame görüntüsünün resmi olarak gözükecektir. Videoların gözükmesini sağlamak için video etiketi içine verilecek bir controls özelliği ile videonun altında gösterilecek kontrol paneli ile video ziyaretçi tarafından play yapılarak oynatmaya başlanacaktır. Sayfanızda bu videonun sayfa yüklenmesi ile otomatik olarak başlamasını isterseniz yine video etiketinin içerisine autoplay özelliği eklenmelidir. Bu şekildeki durumuyla sayfanızın yüklenmesi ile video çalışmaya başlayacak, videonun bitmesi durumunda stop işlemi gerçekleşecektir. Eğer videoların sayfa içerisinde sürekli olarak bittiğinde yeniden başlamasının isterseniz video etiketi içerisine bir loop özelliği atamanız ile mümkün olacaktır.

Konu anlatımlı videoya ulaşmak için tıklayınız…

Bir önceki HTML Dersleri Ders#9 | Form İşlemleri konulu yazıma ulaşmak için tıklayınız..

Olmalısın giriş yapmış yorum yazmak için

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com