Tag Video HTML5 dan Fungsinya
Sebelum adanya HTML5, video hanya bisa dimainkan pada browser menggunakan plug in tambahan seperti flash. Tetapi setelah HTML5 telah release, maka penambahan sebuah video pada website dapat dilakukan dengan mudah seperti halnya menambahkan gambar pada halaman website. Elemen video pada html5 digunakan untuk menentukan standar untuk menambahkan video pada laman web.
Sebelum mempelajari materi tentang Tag Video HTML5 dan Fungsinya, terlebih dahulu pelajari materi tentang: Menampilkan Menu Navigasi Menggunakan Tag Nav HTML, Membuat Kotak Pembatas Form Menggunakan Tag Fieldset HTML5, dan Operator Matematika HTML5 dan Fungsinya.
Tag <video> dalam HTML5 adalah elemen yang memungkinkan pengguna untuk menyematkan video ke dalam halaman web tanpa perlu menggunakan plugin pihak ketiga seperti Adobe Flash. Ini memudahkan pengembang web untuk menampilkan konten video secara langsung dengan menggunakan tag bawaan HTML.
Terdapat tiga perbedaan format video yang secara umum digunakan untuk mendukung pemutaran video pada web browser yaitu mp4, Ogg, dan WebM. Tabel 1 berikut ini akan memperlihatkan daftar format yang didukung pada browser yang berbeda:
Tabel 1 Browser Support Video
Sintak:
<video > <source src=" " type=" "> </video>
Atribut yang dapat digunakan dengan tag video adalah sebagai berikut:
- autoplay: Memberitahukan browser untuk secepatnya memulai download video dan memainkannya sesegera mungkin.
- preload: Bermaksud memberikan petunjuk kepada browser tentang apa yang menurut penulis akan mengarah pada pengalaman pengguna terbaik.
- loop: Memberitahukan browser untuk mengulang otomatis video yang telah dimainkan.
- height & width: Untuk mengatur panjang dan lebar dari video pada satuan pixel CSS.
- controls: Untuk memperlihatkan kontrol video default seperti play, pause, volume, dan lain sebagainya.
- muted: Untuk mematikan audio dari video yang diputar.
- poster: Untuk melakukan loading preview sebelum video diputar.
Contoh: Penambahan Video Menggunakan HTML5.
<!DOCTYPE html>
<html>
<body>
<p>
Menambahkan Video pada Web
<p>
<video
width="400"
height="350"
controls>
<source
src="myvid.mp4" type="video/mp4">
<source
src="myvid.ogg" type="video/ogg">
</video>
</body>
</html>
Output:
Penjelasan Kode Program:
- Atribut controls digunakan untuk menambahkan tombol kontrol seperti play, pause, volume, dan lain sebagainya.
- Elemen "source" digunakan untuk menentukan video mana pada browser yang akan dimainkan.
Autoplay Video Menggunakan HTML5: Untuk memulai video otomatis gunakan atribut autoplay.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>
Menambahkan Video pada Web
</p>
<video
width="400"
height="350"
autoplay>
<source
src="myvid.mp4"
type="video/mp4">
<source
src="myvid.ogg"
type="video/ogg">
</video>
</body>
</html>
Output:
Contoh:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="Pauseplay()">
Pause/Play
</button>
<button onclick="Big()">
Big
</button>
<button onclick="Small()">
Small
</button>
<button onclick="Normal()">
Normal
</button>
<br>
<br>
<video
id="myvideo"
width="450">
<source
src="myvid.MP4"
type="video/mp4">
<source
src="myvid.ogg"
type="video/ogg">
</video>
</div>
<script>
var testvideo = document.getElementById("myvideo");
function Pauseplay()
{
if (testvideo.paused)testvideo.play();
else testvideo.pause();}
function Big()
{
testvideo.width = 600;}
function Small()
{
testvideo.width = 300;}
function Normal()
{
testvideo.width = 450;}
</script>
</body>
</html>
Output:
Contoh:
<!DOCTYPE html>
<html>
<body>
<video controls width="500">
<source
src="video.mp4" type="video/mp4">
<source
src="video.webm"
type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Penjelasan:
- <video>: Tag utama yang menandakan dimulainya area pemutaran video di halaman web.
- controls: Menampilkan kontrol pemutaran standar seperti tombol play, pause, volume, dan lainnya.
- width: Menentukan lebar dari area pemutaran video dalam piksel.
- <source>: Menyediakan beberapa sumber video dengan format yang berbeda. Dalam contoh di atas, terdapat dua sumber video, yaitu MP4 dan WebM. Browser akan memilih sumber yang didukung oleh perangkat yang digunakan.
Atribut yang Umum Digunakan pada Tag <video>:
- src: Menentukan lokasi atau URL dari file video.
- autoplay: Secara otomatis memulai pemutaran video saat halaman dimuat.
- loop: Mengulang video secara terus-menerus setelah selesai diputar.
- poster: Menentukan gambar yang ditampilkan sebelum video dimulai atau ketika video tidak dapat diputar.
Format Video yang Didukung
HTML5 <video> mendukung beberapa format video, termasuk MP4, WebM, dan Ogg. Penggunaan beberapa sumber dengan format yang berbeda memungkinkan kompatibilitas lintas-platform yang lebih baik. Namun, beberapa browser mungkin memiliki dukungan yang berbeda untuk format video tertentu.
Responsif dan Pengoptimalan
Mengatur lebar video dengan menggunakan nilai relatif seperti persentase atau max-width: 100% dalam CSS akan membantu video menyesuaikan ukuran layar perangkat yang berbeda. Selain itu, memilih format video yang sesuai dengan kebutuhan dan ukuran file yang optimal juga penting untuk meminimalkan waktu pemuatan halaman.
Kendala dan Solusi
Beberapa kendala yang mungkin dihadapi saat menggunakan tag <video> adalah kompatibilitas format video di berbagai browser dan perangkat. Untuk mengatasi ini, menyediakan beberapa sumber video dalam format yang berbeda dapat menjadi solusi.
Kelebihan Tag Video HTML
HTML5 telah merevolusi cara memperlakukan konten multimedia di web, terutama dalam hal penambahan video. Tag <video> merupakan elemen penting yang memungkinkan penyematan video langsung ke dalam halaman web tanpa memerlukan plugin tambahan, seperti Adobe Flash. Berikut adalah beberapa kelebihan yang membuat tag video HTML5 begitu penting dan bermanfaat:
- Ketersediaan Tanpa Ketergantungan pada Plugin: Sebelum HTML5, penayangan video di web sering kali bergantung pada plugin pihak ketiga seperti Flash. Dengan tag video HTML5, tidak lagi diperlukan plugin tambahan, sehingga mengurangi ketergantungan pada teknologi eksternal dan meningkatkan ketersediaan konten video di berbagai platform dan perangkat.
- Kompatibilitas Lintas Perangkat dan Browser: Tag video HTML5 mendukung beberapa format video seperti MP4, WebM, dan Ogg. Ini memberikan fleksibilitas dalam menyediakan sumber video yang kompatibel dengan berbagai browser dan perangkat. Meskipun beberapa perbedaan dukungan format dapat terjadi, penyediaan beberapa sumber video dengan format yang berbeda dapat menanggulangi masalah ini.
- Kontrol Lebih Banyak: Tag <video> menyediakan kontrol bawaan seperti play, pause, volume, dan kontrol waktu yang memungkinkan pengguna untuk berinteraksi dengan video. Dengan atribut seperti controls, pengembang dapat memberikan akses yang mudah bagi pengguna untuk mengontrol pemutaran video.
- Responsif dan Fleksibel: Ketika menggunakan tag video HTML5, pengembang memiliki fleksibilitas untuk mengatur ukuran video dengan mudah menggunakan atribut seperti width, height, atau menggunakan nilai relatif seperti persentase. Ini memungkinkan video menyesuaikan diri dengan berbagai ukuran layar perangkat, memberikan pengalaman yang responsif.
- Dukungan untuk Fitur Tambahan: Selain tag <video> dasar, HTML5 juga mendukung fitur-fitur tambahan seperti <track> untuk menambahkan teks subjudul, <audio> untuk menyertakan audio, dan JavaScript API yang memungkinkan kontrol lebih lanjut atas perilaku pemutaran video.
Kesimpulan
Tag <video> dalam HTML5 memungkinkan pengembang web untuk menyematkan dan mengontrol pemutaran video secara langsung di halaman web tanpa perlu menggunakan plugin eksternal. Dengan memahami penggunaan tag ini serta cara mengoptimalkannya, pengalaman pengguna dalam menonton konten video di web dapat ditingkatkan dengan baik.
Referensi Tambahan:
- Membuat Kesimpulan Menggunakan Tag Summary HTML5
- Cara Memecah Kalimat dengan Tag WBR HTML5
- Tag Doctype HTML dan Penjelasannya
- Membuat Link HTML Menggunakan Tag Anchor
- Cara Membuat Singkatan HTML Menggunakan Tag Abbr
- Cara Membuat Singkatan HTML Menggunakan Tag Acronym
- Cara Membuat Teks dengan Format Alamat Menggunakan Tag Address HTML
Artikel ini akan dibaca oleh: Shinta Nur Sabila, Sofian Panuntun, Taris Nur Adzhani, Thali'Ah Sa'Diyah Salsabil, dan Vicga Wandansari.
6 komentar untuk "Tag Video HTML5 dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan elemen video pada html?
BalasHapusElemen HTML video digunakan untuk menyematkan pemutar video yang mendukung pemutaran video ke dalam dokumen html. User juga dapat menggunakan tag < video > untuk membuat konten audio.
HapusApakah yang dimaksud dengan embed kode atau embed video pada html?
BalasHapusEmbed kode merupakan potongan kecil dari kode komputer yang digunakan untuk mengaktifkan pemutar video dan menampilkannya dalam konteks pada website tertentu yang disematkan.
HapusApakah ketika saya menautkan video XXX ke dalam website saya, maka video yang ditautkan tersebut akan terhapus oleh internet positif?
BalasHapusWah...wahh...wah,, kemungkinan tidak, paling URL webnya saja yang diblokir, data server biasanya masih aman.
Hapus