HTMLDosyalarımıza veya web sitelerimize video ekleme işlemini göstereceğim. HTML Video ekleme oldukça basit bir tag ile yapılmaktadır. video tagını kullanarak içeriğimize video eklemesi yapabilmekteyiz.
HTML video ekleme kodu
1 2 3 | <video> <source src="video.mp4"> </video> |
Video eklerken bilmeniz gerekenler
1
Ekleyeceğimiz video da, oynatma durdurma gibi düğmelerin bulunması için “controls” etiketini eklememiz gerekmektedir.
1 2 3 | <video controls> <source src="video.mp4"> </video> |
2
Eklediğiniz videoların boyutlarını değiştirebilir, istediğiniz yükseklikte ve genişlikte boyutlandırmasını yapabilirsiniz. Bunun için width ve height değerlerini kullanmaktayız.
1 2 3 | <video width="300px" height="300px" controls> <source src="video.mp4"> </video> |
3
Sitenize veya html belgenize koyduğunuz videolar, bazı tarayıcılarda çalışmayabilir. Tarayıcıların video formatları desteklerinde olan bazı problemler nedeniyle video açılmayabilir. Bunun için eklediğiniz videonun dosya türüne dikkat etmelisiniz. Örneğin mp4 uzantısıyla bir video ekleyeceksiniz. Tarayıcıda sorun yaşanmaması açısından type=”video/mp4″ kodunu kullanmanız gerekmektedir.
1 2 3 | <video controls> <source src="video.mp4" type="video/mp4"> </video> |
HTML dosyasına video ekleme kodu
Videoyu eklemek için, html dosyasının bulunduğu dizin içerisine videoyu atmamız gerekmekte veya belirli bir klasöre atmamız gerekmekte.
Eğer ki üst klasörlerden birine erişip o klasör içerisinde ki video.mp4 adlı videoya erişmek istersek; “../Videolar/video.mp4” şeklinde src hedefini belirtmemiz gerekir.
HTML dosyasıyla aynı klasör aynı dizin içerisinde var olan videoyu belirmek için, “video.mp4” şeklinde yazmalıyız.
1 2 3 | <video> <source src="../Videolar/video.mp4"> </video> |
Link ile video ekleme kodu
Web sitelerinize, herhangi bir mp4 uzantılı dosyayı sunucu üzerine yükleyerek, uzantısıyla yükleyebilirsiniz. Veya herhangi bir videonun mp4 uzantılı linkini src hedefine yazarak videoyu sitenizde oynatabilirsiniz.
1 2 3 | <video controls> <source src="https://www.siteadi/videoadi.mp4" type="video/mp4" > </video> |
Merhaba web sitesine eklenen videonun yerini nasıl ayarlayabilirim ? Örneğin sağ üst köşeden 10 cm aşağıda olucak şekilde mesela böyle bir düzenleme nasıl yapılabilir? Teşekkürler
Konumlandırma yapmak için CSS kullanmanız gerekiyor. Üstten 10px aşağıda olacak şekilde ayarlamak istersek “margin-top:10px;” kullanabilirsiniz. “margin” etiketi elementler arası boşluğu ayarlamak için kullanılır. Üst boşluk için margin-top, alt boşluk için margin-top, sol boşluk için margin-left, sağ boşluk için margin-right kullanmalısın.
Örnek kodu aşağıda inceleyebilirsiniz.