×
İçindekiler

Google Drive Videoları HTML5 ile Sayfada Yükletmek

javascript

Gezerken kısa kesitler halinde videolar çekiyorum. Çektiğim videoları amatör bir şekilde birleştirip, kolaj haline getirip sitemde paylaşmak istedim fakat videolar büyük boyutlu medyalar. Fotoğrafları bile 3.parti bir servisle çözerken videoları repoda depolamak anlamsız olurdu. İhtiyaç böyle ortaya çıktı ve araştırmaya başladım.

Başka birisi stackoverflow’da ‘HTML5 videosunu kullanarak Google Drive Videolarını yerleştirme’ şeklinde bir soru sormuş. Cevapta ise video indirme bağlantısına video id verilirse onayatabileceği yönündeydi. Bu cevap tüm ihtiyaçları karşılıyordu.

Hızlıca nasıl yapacağınızı anlatıyorum.

Google Drive üzerinden paylaşılan videoları HTML5 ile kendi playeriniz ile sayfada yüklemek için birkaç adımı takip etmek gerekiyor. Bu adımları takip ederek, Google Drive üzerinden paylaşılan videoları kendi playeriniz ile sayfada oynatabilirsiniz.

Google Drive Videoları Sitenize Ekleme #

<video width="320" height="240" controls>
  <source src="https://drive.google.com/uc?export=download&id=ID" type="video/mp4">
</video>

Buradaki trick Google Drive dosya boyutu maks 99MB olan videolarınızı virüs kontrolü yapmadan indirmenizi sağlayabildiği için playerinize çekebilirsiniz. Fakat üstü boyutları oynatamazsınız hata verir. Bu yüzden videolarınızı 99MB’ın altında tutmanız gerekiyor.

Bu yapıyı özelleştirmek isterseniz #

Öncelikle sık kullanacaksanız bir fonksiyona bağlamakta fayda var.

<div data-video-type="reels" data-video-id="videoID" data-video-title="videoTitle" data-video-cover="videoCover">
    <img src="videoCover" alt="videoTitle" />
    <span>videoTitle</span>
</div>

function createPopupVideo(videoSrc, videoCover, videoTitle) {
    const popupOverlay = document.createElement('div');
    popupOverlay.classList.add('popup-video-overlay');

    const popupVideo = document.createElement('div');
    popupVideo.classList.add('popup-video');
    popupVideo.innerHTML = `
        <div class="close-button">&times;</div>
        <video class="video-reels-frame" poster="${videoCover}" controlsList="nodownload" controls="false">
            <source src="${videoSrc}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="video-reels-desc-popup">
            <span>${videoTitle}</span>
        </div>
    `;

    const closeButton = popupVideo.querySelector('.close-button');
    closeButton.addEventListener('click', function () {
    popupOverlay.style.display = 'none';
    popupOverlay.remove();
    popupVideo.style.display = 'none';
    popupVideo.remove();
    });
    popupOverlay.addEventListener('click', function () {
    popupOverlay.style.display = 'none';
    popupOverlay.remove();
    popupVideo.style.display = 'none';
    popupVideo.remove();
    });
    document.body.appendChild(popupOverlay);
    document.body.appendChild(popupVideo);

    return { overlay: popupOverlay, video: popupVideo };
}
const reelsPopups = document.querySelectorAll('[data-video-type="reels"]');
if (reelsPopups.length > 0) {
    reelsPopups.forEach(function (reelsPopup) {
        reelsPopup.addEventListener('click', function () {
            const videoId = this.dataset.videoId;
            const videoCover = this.dataset.videoCover;
            const videoTitle = this.dataset.videoTitle;
            const videoSrc = `https://drive.google.com/uc?&id=${videoId}`;

            const popupVideo = createPopupVideo(videoSrc, videoCover, videoTitle);
        });
    });
}

.popup-video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(24, 24, 27, 0.92);
    padding: 5px;
    border-radius: 15px;
    z-index: 3;
    @media (max-width: 767px) {
        width: 80%;
    }
    &-overlay {
        background-color: rgba(24, 24, 27, 0.92);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    .close-button {
        background-color: rgba(24, 24, 27, 0.92);
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: -30px;
        top: -30px;
        color: #fff;
        width: 30px;
        height: 30px;
        font-weight: 100;
        font-size: 24px;
        border-radius: 50%;
        z-index: 3;
        cursor: pointer;
    }
    video {
        display: block;
        width: 100%;
        aspect-ratio: 9/16;
        height: auto;
        max-height: 80vh;
        outline: none;
        border: none;
        border-radius: 10px;
        margin: auto;
    }
}

Gerisini kendinize göre özelleştirebilirsiniz.

Sonuç #

Örnek görmek isterseniz buraya bakabilirsiniz.