Bagaimana jika video yang kamu sematkan di website ternyata dapat menjadi pintu gerbang ke dunia interaktif untuk memikat pengunjung situs kamu?

Namun, bagaimana cara mengaplikasikannya?

Di artikel ini, kita akan membahas lebih dalam tentang HTML video, mulai dari definisi, format, atribut, sampai cara menambahkan. Ikuti terus pembahasan dalam artikel ini dan temukan langkah-langkah sederhana untuk memaksimalkan daya tarik visual website kamu dengan HTML video!

Apa Elemen HTML untuk Memutar Video?

Tag < video > dalam HTML5 adalah elemen yang berfungsi untuk menyematkan video ke dalam halaman web. Penggunaan HTML video sangat vital karena membantu web developer menyematkan video dengan cara yang lebih efisien dan mudah.

Dengan tag ini, kamu dapat memutar video langsung dari browser tanpa perlu menggunakan plugin tambahan.

Sebelum adanya tag < video >, proses penyisipan video bisa sangat rumit dan memerlukan pengetahuan khusus. Namun, setelah ada elemen HTML video dalam HTML5, kamu tidak hanya dapat menyematkan video dengan mudah, tetapi juga mengontrol aspek-aspek seperti ukuran, tampilan kontrol, dan format video yang didukung. Hal ini membantu menciptakan pengalaman pengguna yang lebih baik dan membuat konten lebih interaktif.

Penting juga untuk mengecek browser mana saja yang cocok dengan fitur ini di link https://caniuse.com/video karena tidak semua browser mendukung tag < video >.

Berikut kode yang dapat kamu pakai:

controls adalah atribut yang akan menampilkan tombol play, pause, dan sebagainya. Kamu bisa juga menambahkan atribut lain seperti autoplay untuk memutar video secara otomatis.

Namun, atribut autoplay sekarang hanya berfungsi jika video di-mute atau tidak memiliki suara. Jika kamu ingin video autoplay, kamu bisa memberi property muted lalu property controls untuk mengontrol suara dan property lainnya. Dengan cara ini, kamu memiliki fleksibilitas untuk memutar video secara otomatis sambil memberikan kontrol kepada audiens atas pengaturan suara dan fitur lainnya.

Format File Video yang Didukung HTML

Saat menyematkan video menggunakan tag < video > dalam HTML, perlu diingat bahwa tidak semua browser mendukung keseluruhan format video. Oleh karena itu, penting untuk mengetahui format file video mana yang didukung oleh HTML, sehingga kamu dapat menyajikan video yang dapat diputar di berbagai browser.

Secara umum, ada tiga format utama yang umumnya didukung oleh browser modern:

• MP4: format ini bersifat paling universal dan didukung oleh hampir semua browser utama. Tak hanya itu, format MP4 juga bisa dibaca di semua sistem operasi.
• WebM: WEBM merupakan format terbaik berdasarkan performa karena ukurannya yang kecil. Format ini juga banyak didukung oleh browser, terutama pada browser berbasis Chromium seperti Google Chrome dan Opera. WebM biasanya lebih kecil dari MP4, sehingga dapat memuat lebih cepat. Namun, perlu dipahami bahwa OS Mac tidak mensupport WEBM.
• Ogg: format ini didukung oleh beberapa browser seperti Firefox dan Chrome. Ogg adalah pilihan yang tepat jika kamu ingin memberikan alternatif tambahan. Dengan menyediakan beberapa format, kamu memastikan video dapat diputar di berbagai platform dan device.

Lalu, berapa ukuran yang disarankan untuk menyematkan video?

Biasanya, ukuran video yang disarankan dalam penggunaan HTML video bisa bervariasi tergantung pada kebutuhan dan tujuan desain web kamu. Namun, ada beberapa pedoman umum yang bisa kamu pertimbangkan:

• Resolusi: resolusi yang umum digunakan adalah 480p (854 x 480 piksel) untuk video dengan kualitas standar dan 720p (1280 x 720 piksel) atau 1080p (1920 x 1080 piksel) untuk video berdefinisi tinggi. Resolusi yang lebih tinggi memberikan kualitas gambar lebih baik tetapi ukuran file-nya lebih besar.
• Ukuran file: mengingat waktu pemuatan halaman, ukuran file video sebaiknya tidak terlalu besar. Usahakan file video berukuran di bawah 5MB agar mengoptimalkan user experience. Kamu bisa menggunakan teknik kompresi untuk mengurangi ukuran file tanpa kehilangan kualitas yang signifikan.
• Aspek rasio: aspek rasio yang paling umum adalah 16:9 karena cocok untuk kebanyakan layar device. Aspek rasio ini memberikan tampilan proporsional.

Atribut untuk Video

Menyematkan video ke dalam halaman web bukan hanya tentang menentukan sumber file saja. Kamu juga dapat mengontrol bagaimana video tersebut ditampilkan dan berfungsi dengan menggunakan berbagai atribut.

Berikut beberapa atribut yang umum digunakan dalam tag < video > dalam HTML:

Cara Menambahkan Video Menggunakan Tag < video >

Menambahkan video ke halaman web bisa dengan menggunakan tag < video >. Berikut adalah langkah-langkahnya:

Langkah 1: siapkan file video

Pastikan kamu memiliki file video dalam format yang didukung seperti MP4, WebM, atau Ogg. File video harus tersimpan di direktori yang sama dengan file HTML atau di tempat yang dapat diakses oleh file HTML tersebut.

Langkah 2: tambahkan tag < video >

Buka file HTML tempat kamu ingin menyisipkan video, lalu tambahkan tag < video > ke bagian yang diinginkan. Contoh:

{{COMPONENT_IDENTIFIER}}

Langkah 3: tambahkan atribut src

Gunakan elemen < source > dengan atribut src untuk menunjukkan lokasi file video. Kamu dapat menambahkan lebih dari satu elemen < source > jika memiliki file video dalam beberapa format:

Langkah 4: tambahkan atribut Lain (opsional)

Tambahkan atribut lain seperti autoplay, loop, atau muted sesuai kebutuhan.

Contoh:

Langkah 5: uji di browser

Simpan perubahan pada file HTML dan buka dengan browser untuk memastikan video dapat diputar secara tepat.

Langkah 6: pertimbangkan browser lain

Jika mungkin, uji video di berbagai browser untuk memastikan kompatibilitas. Sediakan format video lain apabila diperlukan.

Cara Cepat Menambahkan Video dari YouTube

Menambahkan video dari YouTube ke halaman web kamu tidak hanya meningkatkan interaktivitas tapi juga memberikan konten berkualitas tanpa perlu menyimpan file video di server.

Berikut cara melakukannya.

Langkah 1: temukan video di YouTube

Pilih video YouTube yang ingin kamu tambahkan ke website. Buka video tersebut di browser.

Langkah 2: klik tombol "Share"

Di bawah video, kamu akan melihat tombol "Share". Klik tombol tersebut untuk membuka opsi berbagi.

Langkah 3: klik "Embed"

Dalam opsi “Share”, pilih "Embed" atau "Sematkan" (tergantung pada bahasa yang dipakai di YouTube). Langkah ini akan membuka kotak dialog dengan kode yang siap disematkan.

Langkah 4: copy kode embed

Di dalam kotak dialog, kamu akan melihat sebuah kode iFrame yang sudah siap digunakan. Copy kode tersebut.

Langkah 5: paste kode ke File HTML

Buka file HTML tempat kamu ingin menambahkan video YouTube lalu tempelkan kode yang telah kamu salin ke posisi yang diinginkan.

Langkah 6: sesuaikan ukuran (opsional)

Kamu dapat mengubah nilai width dan height di kode iframe untuk menyesuaikan ukuran video sesuai keinginan.

Langkah 7: uji di browser

Simpan file HTML dan buka dengan browser untuk memeriksa apakah video YouTube telah berhasil disematkan.

FAQ

Apakah video dalam HTML berfungsi di semua browser?

Meskipun tag < video > didukung oleh hampir semua browser modern, ada perbedaan dalam dukungan format file dan atribut. Oleh karena itu, penting untuk menguji video di berbagai browser sekaligus menyediakan format alternatif jika diperlukan.

Apakah ada batasan ukuran file video?

Tidak ada batasan ukuran file spesifik dalam HTML itu sendiri, tetapi perlu diingat file video yang besar berpotensi memengaruhi waktu pemuatan halaman. Pertimbangkan untuk mengoptimalkan ukuran file agar halaman dimuat lebih cepat.

Penutup

HTML video telah membuka pintu bagi web developer untuk menyajikan konten yang dinamis dan interaktif. Kita telah menjelajahi berbagai aspek, dari pengenalan dasar tentang tag < video > dalam HTML, format file yang didukung, berbagai atribut yang dapat dimanipulasi, hingga cara cepat menyematkan video dari platform eksternal seperti YouTube.

Menerapkan video ke dalam website bukan hanya tentang estetika; ini adalah tentang menciptakan pengalaman yang imersif dan menarik bagi pengunjung.