"heidi.mp4" Video Dosyasını İndir

HTML Kodu

<video> heidi.mp4 </video>

HTML Kodu

<video> <source src="heidi.mp4" /> </video>

HTML Kodu

<video> <source src="heidi.mp4" type="video/mp4" /> </video>

olacak şekilde düzeltiyoruz. Ancak yine aynı görüntü (videonun ekran görüntüsü) karşımıza çıkıyor ve video açılmıyor:

İşte bunun sebebi, sitemizde oynatmak istediğimiz videonun kontrol özelliğinin atanmamış ve tarayıcıya tanıtılmamış olmasıdır. Öyleyse videonun kontrol özelliğini de "controls" olacak şekilde kodlarımız arasına (<video> etiketinden hemen sonra gelecek şekilde) yerleştireceğiz. <Video> etiketideki "video" yazısının arkasına "controls" ifadesini eklememizin nedeni, dediğim gibi hem videonun kontrol özelliğinin tarayıcıya tanıtılması hem de videonun (oynatma, durdurma, ses gibi) kontrollerinin kullanılabilmesinin sağlanmasıdır. Öyleyse şimdi "controls" özelliğini de kodlarımıza eklediğimiz zaman kod yapımız şu şekilde olacaktır:

HTML Kodu

<video controls> <source src="heidi.mp4" type="video/mp4" /> </video>

Aşağıdaki resimde de gördüğünüz gibi videomuz kontrol özellikleriyle birlikte açıldı ve videoyu oynatabiliyoruz:

Burada hemen şunu söylemekte yarar görüyorum: Belki bazı yerlerde veya sitelerde bu kodların "<video controls = "controls">" ya da "<video controls = "autoplay">" şeklinde yazıldığını görmüş olabilirsiniz. Burada ilk "controls" ifadesi bir kategoriyi, atanmış bir özelliği belirttiği için daha sonra ("=" işaretinden sonra) gelen "controls" yazısı videomuzda (durdurma, oynatma, ses gibi) özelliklerin olmasını istediğimizi belirtirken; "autoplay" ifadesi de (oynatma, durdurma, ses gibi) kontroller olmadan videonun otomatik olarak açılmasını istediğimizi belirtmektedir. Ancak (özellikle Google Chrome gibi birçok tarayıcı -insanların sayfayı açar açmaz yüksek sesle karşılaşmaması, istenmeyen durumların önüne geçilmesi gibi bazı sebeplerle- otomatik oynatma özelliğini görmezden geldiği için) biz bu kodları "<video controls = "controls">" ya da "<video controls = "autoplay">" şeklinde yazsak da videomuz otomatik olarak açılmayacak, kontrolleriyle birlikte görünecektir. Bu yüzden de sadece "<video controls = "controls">" ya da "<video controls>" yazmamız yeterli olacaktır.

Yine yukarıdaki örnekte gördüğümüz gibi; biz sayfamızda videomuz için herhangi bir boyut ya da yer belirtmediğimiz için videomuz tarayıcımızın varsayılan olarak belirlediği boyutlarda ve yerde göründü. Oysa biz bu videonun daha küçük ya da daha büyük boyutlarda görünmesini isteyebiliriz. Öyleyse kodların arasına bu videonun görünmesini istediğimiz yükseklik ve genişliğini de yazalım:

HTML Kodu

<video width="200px" height="200px" controls> <source src="heidi.mp4" type="video/mp4" /> </video>

Bunun sonucunda ekran görüntümüz şu şekilde oldu:

Görüldüğü gibi videonun boyutları küçüldü. Ben örnek olması bakımından "width / genişlik" ve "height / yükseklik" değerlerinin ikisine de "200px" verdim. Siz bunu istediğiniz şekilde düzenleyebilirsiniz.

Peki, örneğin videonuzun ekranın tamamında (ya da bir kısmında) açılmasını istiyorsanız veya videonuzu sitenizde bir tablonun içine koyduysanız o tablonun boyutlarında açılmasını istiyorsanız ne yapmanız gerek? Bu durumda da "%" değerini kullanabiliriz. Yani "width / genişlik" ve "height / yükseklik" değerlerine "%" ifadesini atayabiliriz. Hemen kodlarla gösterelim:

HTML Kodu

<video width="100%" height="100%" controls> <source src="heidi.mp4" type="video/mp4" /> </video>

Bu durumda videomuz kodlarda gösterdiğimiz yüzdelik değerler boyutunda açılacaktır ve ekran görüntümüz (biz değerleri %100 yaptığımız için) tüm ekranı kaplayacak şekilde aşağıdaki gibi olacaktır:

Yüzdelik değerlerle çalışmanın en güzel taraflarından biri html belgenizde oluşturduğunuz bir tablonun içine videonuzu yerleştirmek istediğinizde o tablonun boyutlarına göre videonuzu ayarlayabilmenizdir. (Tabii bu başka bir konuyu oluşturduğundan burada hiç değinmeyeceğim.)

Şunu da söylemek gerekiyor ki; kodlarınızda yer verdiğiniz ve tarayıcının arama yapacağı dosya yolu da önem arz ediyor. Örneğin oluşturduğunuz "html" belgesiyle videomuz (bizim örneğimizde "heidi.mp4" dosyası) aynı klasörde olduğunda yukarıda söylediklerimizin hepsi geçerli. Ancak diyelim ki; "heidi.mp4" video dosyamız oluşturduğumuz site sayfasının kaynağı olan "html" belgesiyle aynı klasörde yer almıyorsa, mesela "heidi.mp4" dosyamız "filmler" adlı başka bir klasörün içindeyse ne yapmamız gerek? Bu durumda da tarayıcıya "heidi.mp4" adlı video dosyasının "filmler" klasörü içinde olduğunu bildirecek ve tarayıcının video dosyasını bulması için yolu göstereceğiz. Öyleyse son hâliyle kodumuz şu şekilde olacak:

HTML Kodu

<video controls> <source src="filmler/heidi.mp4" type="video/mp4" /> </video>

Başka bir örnek olarak da; eğer video dosyamız kodları yerleştirdiğimiz "html" belgesinin bulunduğu dizinden daha üst bir dizindeyse, o zaman da tarayıcının html belgemizin bulunduğu dizinden / klasörden çıkıp bir üst dizinde video dosyasını bulması için "../" ifadesini kullanacağız. Bunu yapınca kodlarımız şu şekilde olacak:

HTML Kodu

<video controls> <source src="../heidi.mp4" type="video/mp4" /> </video>

Yine diyelim ki; video dosyamız html belgemizin bulunduğu klasörün bir üst dizininde "filmler" klasörünün içinde tutuluyor. O hâlde de kodlarımız şöyle olacak:

HTML Kodu

<video controls> <source src="../filmler/heidi.mp4" type="video/mp4" /> </video>

Son olarak bu örneği size göstermek için oluşturduğum "video.htm" sayfasının html kodlarını da bir fikir vermesi açısından aşağıya alıyorum:

HTML Kodu

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <title>heidi</title> </head> <body> <video controls> <source src="heidi.mp4" type="video/mp4" /> </video> </body> </html>

Şimdilik benim bu konuda söyleyeceklerim özetle bunlar. Siz deneme yanılma yöntemiyle ve sürekli test ederek bu konudaki başka püf noktalarını keşfedip daha da geliştirebilirsiniz. Umarım buraya kadar özet olarak verdiğim bilgiler işinize yarar.