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

Kategori: HTML

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!