Kauruka

Beranda
Web Code
Cara Membuat Video Streaming dengan Plyr.io, Lazy Load serta Watermark CSS

Cara Membuat Video Streaming dengan Plyr.io, Lazy Load serta Watermark CSS

Pernah kah kamu ingin menampilkan video streaming di situs web kamu? Kali ini kauruka akan membahas cara menggunakan plyr.io, lazyload & watermark.

Halo, teman-teman! Pernah nggak sih kamu ingin menampilkan video streaming di situs web kamu, tapi bingung harus mulai dari mana? Nah, kali ini kita akan bahas cara membuat video streaming menggunakan Plyr.io, sebuah library JavaScript yang super simpel tapi punya fitur lengkap. Dalam artikel ini, kita akan menggali step-by-step bagaimana cara membuat video streaming menggunakan Plyr.io, mulai dari instalasi sampai implementasi. Tenang, kauruka akan coba untuk menjelaskan dengan bahasa yang mudah dimengerti dan nggak ribet.

Apa Itu Plyr.io?

Sebelum kita masuk ke cara penggunaannya, ada baiknya kita berkenalan dengan Plyr.io. Plyr.io adalah sebuah library JavaScript yang memungkinkan kita untuk membuat pemutar media yang ringan dan responsif. Entah itu video, audio, atau live streaming, semuanya bisa dijalankan dengan lancar di Plyr.io. Yang paling keren, Plyr.io ini merupakan library open-source dan bisa digunakan secara gratis. Jadi, kalau kamu mau bikin video streaming di situs web kamu, Plyr.io merupakan salah satu pilihan yang tepat!

Plyr.io mendukung berbagai jenis media, mulai dari file video lokal hingga video dari platform seperti YouTube dan Vimeo. Dengan menggunakan Plyr.io, kita bisa memberikan pengalaman menonton yang lebih baik kepada pengguna, karena tampilan pemutarnya yang modern dan mudah dikustomisasi.

Lazyload pada Plyr.io?

Lazyload adalah teknik yang sangat berguna untuk meningkatkan performa halaman web dengan menunda pemuatan elemen-elemen yang tidak segera diperlukan, seperti video atau gambar, hingga elemen tersebut mendekati viewport pengguna. Dalam konteks Plyr, lazyload dapat diterapkan untuk memastikan bahwa pemutar video hanya akan dimuat saat pengguna berada ke bagian halaman (viewport) yang memuat video tersebut. Dengan begitu, kita tidak hanya mempercepat waktu muat halaman, tetapi juga mengurangi beban pada server dan bandwidth pengguna. Menggunakan lazyload untuk Plyr memungkinkan pengalaman menonton video yang lebih efisien dan optimal tanpa mengorbankan kualitas.

Demo

Cara Membuat Video Streaming Plyr.io dengan Lazyload

Nah, sudah siap untuk memulai? Yuk, kita lanjut ke langkah-langkahnya!

  1. Silahkan buka projek web kamu! carilah kode </head> dan letakkan css dari plyr.io ini di atas kode tersebut.
    <link rel="stylesheet" type="text/css" href="https://cdn.plyr.io/3.7.8/plyr.css"/>

<style>
.plyr__video-wrapper::before {
    content: 'Kauruka.com';
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    height: auto;
    padding: 2.5px 15px;
    background-color: rgb(13 0 57 / 40%);
    opacity: 80%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    backdrop-filter: blur(4px);
}
</style>

    Silahkan rubah teks yang saya blok dengan warna merah dengan teks watermark yang ingin kamu gunakan!

  2. Silahkan taruh kode pemanggil library plyr.io dan javascript lazyload ini di atas </body>.
    <script>/*<![CDATA[*/
document.addEventListener("DOMContentLoaded", function() {
    const video = document.querySelector('.lazy-video');

    const loadPlyr = () => {
        const script = document.createElement('script');
        script.src = 'https://cdn.plyr.io/3.7.8/plyr.js';
        script.onload = () => {
            document.querySelectorAll('source').forEach(source => {
                source.setAttribute('src', source.getAttribute('data-src'));
            });
            video.load();

            const player = new Plyr('#kaurukaplayer');
            window.player = player;

            // Event listeners
            const actions = {
                '.js-play': () => player.play(),
                '.js-pause': () => player.pause(),
                '.js-stop': () => player.stop(),
                '.js-rewind': () => player.rewind(),
                '.js-forward': () => player.forward(),
            };

            Object.keys(actions).forEach(selector => {
                const element = document.querySelector(selector);
                if (element) {
                    element.addEventListener('click', actions[selector]);
                }
            });
        };
        document.body.appendChild(script);
    };

    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    loadPlyr();
                    observer.unobserve(video);
                }
            });
        });
        observer.observe(video);
    } else {
        // Fallback for browsers without IntersectionObserver support
        loadPlyr();
    }
/*]]>*/</script>
    Script ini memuat video player secara otomatis hanya ketika video tersebut muncul di layar pengguna, menggunakan library Plyr.js. Dengan begitu, halaman web lebih ringan dan cepat karena elemen video dan player hanya dimuat saat diperlukan. Proses ini dimulai setelah konten halaman selesai dimuat, diikuti dengan memantau apakah video terlihat oleh pengguna menggunakan IntersectionObserver. Jika terlihat, script memuat Plyr.js dan menginisialisasi kontrol video. Jika browser tidak mendukung IntersectionObserver, player tetap dimuat segera setelah halaman siap.
  3. Sekarang adalah tahap membuat kode htmlnya. Untuk kode yang satu ini, kamu boleh menaruhnya dimana saja. Kamu bisa menaruhnya pada bagian posting atau di halaman, asalkan penempatan kode html ini masih didalam </body>.
    <div id="thisvideo">
    <video controls crossorigin playsinline poster="url poster image" id="kaurukaplayer" class="lazy-video">
        <!-- Video files -->
        <source data-src="video url" type="type video" size="resolution">
        <source data-src="video url" type="type video" size="resolution">
        <source data-src="video url" type="type video" size="resolution">
        <source data-src="video url" type="type video" size="resolution">
    </video>
</div>

    Silahkan rubah text yang saya blok dengan warna merah! Contoh:
    <source data-src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">

Kesimpulan

Secara keseluruhan, menerapkan lazyload pada Plyr merupakan suatu cara yang efektif untuk meningkatkan performa situs web dan memberikan pengalaman pengguna yang lebih baik. Dengan memanfaatkan teknik ini, kita dapat memastikan bahwa elemen video hanya dimuat saat diperlukan, mengurangi beban awal halaman, dan mempercepat waktu muat. Selain itu, lazyload juga membantu mengoptimalkan penggunaan bandwidth, yang sangat penting dalam era di mana kecepatan akses dan efisiensi adalah kunci kesuksesan sebuah situs web. Jadi, jika kamu ingin video di situs web kamu tampil dengan performa terbaik tanpa mengorbankan pengalaman pengguna, pertimbangkan untuk menerapkan lazyload pada Plyr.

Thank you our visiting my site Kauruka