HTML Sitene Video Nasıl Eklenir? Nasıl Düzenlenir?

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Merhabalar, bugünkü konumuzda sizlere web sitenize nasıl video ekleyebileceğinizi, nasıl ayarlamalar yapabileceğinizi, JavaScript ve CSS'de kullanarak video oynatıcınızı nasıl özelleştirebileceğinizi göstereceğiz..

Adım 1: Video Dosyasını Yükleyin


Öncelikle video dosyanızı, web sunucunuza yükleyin ve dosyanın URL'sini alın.

Örneğin:


https://enesalp.com.tr/video/ornek.mp4

Örnekte bulunduğu gibi videonuza erişebiliyor olmanız gerekir.

Adım 2: HTML Sayfası Oluşturun

Şimdi, videoyu gömmek istediğiniz HTML sayfasını oluşturalım. Aşağıdaki gibi bir temel HTML yapısı kullanabilirsiniz:


<div>
    <h2>Video</h2>
    <video controls>
        <source src="https://enesalp.com.tr/video/ornek.mp4" type="video/mp4">
        Tarayıcınız video etiketini desteklemiyor.
    </video>
</div>

Yukarıda bulunan kod:

  • <video> etiketi ilgili video dosyasını sayfaya ekler.
  • controls özelliği, videoyu oynatma, duraklatma ve ses kontrolü gibi temel kontrolleri sağlar.
  • src özelliği, video dosyasının URL'sini belirtir.

Adım 3: Videoyu Özelleştirme (Opsiyonel)


Videoyu özelleştirmek için CSS kullanabilirsiniz. Örneğin, video boyutunu, kenar boşluklarını ve diğer stilleri ayarlayabilirsiniz.

CSS:


<style>
    .video-container {
        max-width: 400px;
        margin: 0 auto;
    }

    video {
        width: 100%;
        height: auto;
    }
</style>

HTML:


<div class="video-container">
    <video controls>
        <source src="https://enesalp.com.tr/video/ornek.mp4" type="video/mp4">
        Tarayıcınız video etiketini desteklemiyor.
    </video>
</div>

JavaScript:


<script>
    const video = document.querySelector('video');
    const videoContainer = document.querySelector('.video-container');
    
    function setVideoSize() {
        const containerWidth = videoContainer.offsetWidth;
        const videoWidth = video.videoWidth;
        const videoHeight = video.videoHeight;
        const aspectRatio = videoWidth / videoHeight;
        const newHeight = containerWidth / aspectRatio;
        video.style.width = containerWidth + 'px';
        video.style.height = newHeight + 'px';
    }

    setVideoSize();
    window.addEventListener('resize', setVideoSize);
</script>

Bu düzenlemeler ile birlikte HTML, CSS ve JavaScript kullanarak video dosyamızın boyutlarını ayarladık ve artık video'muz istediğimiz gibi görünüyor!

Ek Video Kontrolleri


controls özelliği, bir HTML <video> etiketinde kullanılan ve tarayıcıya video oynatma kontrollerini göstermesini söyleyen bir özelliktir. Bu kontroller genellikle oynatma/duraklatma, ileri/geri sarma, ses kontrolü ve tam ekran modunu içerir.

Örnek kullanım:


<video controls>
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız video etiketini desteklemiyor.
</video>

Ek Kontroller

controls özelliğini kullanarak temel kontrolleri eklersiniz, ancak aşağıdaki ek özelliklerle daha fazla kontrol ekleyebilirsiniz:

  • autoplay: Sayfa yüklendiğinde video otomatik olarak başlar.
  • loop: Video bitince otomatik olarak tekrar başlar.
  • muted: Video sessiz modda başlar.
  • preload: Tarayıcıya videoyu tamamen yüklemesi veya sadece metadataları yüklemesi konusunda talimat verir. Değerler: none, metadata, auto.

Örnek Kullanım:


<video controls autoplay loop muted preload="auto">
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız video etiketini desteklemiyor.
</video>

Bu kontroller, videonun daha fazla özelleştirilmesini sağlar ve kullanıcı deneyimini iyileştirir. Ancak, otomatik oynatma veya sesin otomatik olarak açık olması gibi özellikler, bazı durumlarda kullanıcıları rahatsız edebileceğinden dikkatli kullanılmalıdır. İhtiyacınıza göre özelleştirebilirsiniz.

EA Medya, iyi kullanımlar diler!

Sizin İçin Önerdiklerimiz

Blog Resim
HTML Sitene Video Nasıl Eklenir? Nasıl Düzenlenir?

HTML

Merhabalar, bugünkü konumuzda sizlere web sitenize nasıl video ekleyebileceğinizi, nasıl ayarlamalar yapabileceğinizi, JavaScript ve CSS'de kullanarak video oynatıcınızı nasıl özelleştirebileceğinizi göstereceğiz..

Devamını Oku
Blog Resim
HTML Input Type Nedir? Örnekleri Nelerdir?

HTML

Günümüzde web tasarımı, işletmelerin bir online varlık oluşturması için çok önemli hale geldi. Web siteleri, işletmelerin ürünlerini ve hizmetlerini müşterilere..

Devamını Oku
Blog Resim
HTML'de CSS Nasıl Kullanılır? Örnekleriyle (Ders-8)

HTML

Günümüzde web siteleri, birçok kişi için önemli bir gelir kaynağı olmaktadır. Web siteleri, kullanıcıların ihtiyaçlarına göre tasarlanır ve bu tasarımın..

Devamını Oku
Blog Resim
HTML Renkleri Nelerdir? Nasıl Kullanılır? (Ders-7)

HTML

HTML renkleri, önceden tanımlanmış renk adlarıyla veya RGB, HEX, HSL, RGBA veya HSLA değerleriyle belirtilir. HTML'de, bir renk adı kullanılarak:..

Devamını Oku