HTML 5 ile video (background) arkaplan yapımı

makale.baslik
HTML

Çoğu sitede görmüşsünüzdür video background bu paylaştığım örnek ile sizlerde arka planda video gösterebilirsiniz.

Video sessizde otomatik başlayacaktır.

Bunları video tagından ayarlayabilirsiniz.

muted =sessiz

loop: tekrar tekrar çalışması

autoplay:otomatik başlaması

 

<video autoplay muted loop id="video" onclick="durBasla()">

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

    Tarayıcınız HTML5 videosunu desteklemiyor.

</video>

 

Örnek uygulamanın index.html kodlarıda şu şekilde:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Arkaplan video</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial;
            font-size: 17px;
        }

        #video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
        }

        #videoIcerik {
            position: fixed;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #f1f1f1;
            width: 100%;
            padding: 20px;
        }

        #buton {
            width: 200px;
            font-size: 18px;
            padding: 10px;
            border: none;
            background: #000;
            color: #fff;
            cursor: pointer;
        }

        #buton:hover {
            background: #ddd;
            color: black;
        }
    </style>
</head>
<body>
<video autoplay muted loop id="video" onclick="durBasla()">
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız HTML5 videosunu desteklemiyor.
</video>

<div id="videoIcerik">
    <h1>Başlık</h1>
    <p>Alt içerik ve açıklamalar</p>
    <button id="buton" onclick="durBasla()">Dur</button>
</div>

<script>
    var video = document.getElementById("video");
    var btn = document.getElementById("buton");

    function durBasla() {
        if (video.paused) {
            video.play();
            btn.innerHTML = "Dur";
        } else {
            video.pause();
            btn.innerHTML = "Oynat";
        }
    }
</script>

</body>
</html>

 

Uygulama dosyasını indirmek için: video.zip

Çalışmanın demo uygulaması için tıklayın.

 
Paylaş:

Yorumlar

  1. Teşekkürler. İşime yaradı...

Kategoriler

En çok okunan yazılar.

 Etiketler