Masih mencari cara menampilkan video di halaman web dengan html?
Kita tahu bahwa video adalah salah satu elemen yang biasanya ada dalam sebuah website. Tidak hanya sebagai elemen yang meningkatkan tampilan web, video juga digunakan untuk menyampaikan informasi tambahan di halaman web
Inilah cara kami menampilkan video di web dengan html
Cara menampilkan video di html
Untuk menampilkan video dengan html, kita dapat menggunakan tag yang ada di html5(versi terbaru html).
Kita dapat menggunakan tag ini untuk menampilkan video di halaman web. Untuk cara menggunakannya, lihat struktur kode di bawah ini
Dalam penggunaan tag ini ada beberapa browser yang masih belum mendukung tag dari html 5 ini, apabila browser tersebut tidak support maka video yang akan ditampilkan di halaman web tersebut akibatnya tidak dapat tertampil.
Berikut adalah contoh kode aplikasi penggunaan tag video dari html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menampilkan Video di HTML</title> </head> <body> <h1>Contoh Menampilkan Video di HTML</h1> <video controls> <source src="langit.mp4" type="video/mp4" /> </video> </body> </html>Hasilnya ditampilkan di browser
Kalau dilihat kenapa videonya muncul tapi terlalu besar ya?
Untuk mengatasinya, kita cukup menambahkan atribut width pada tag video. Seperti di bawah ini
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menampilkan Video di HTML</title> </head> <body> <h1>Contoh Menampilkan Video di HTML</h1> <!-- contoh atribut width dengan nilai 400 (400 = 400px) --> <video controls width="400"> <source src="langit.mp4" type="video/mp4" /> </video> </body> </html>_Dengan menambahkan atribut width="400" ke tag video. Maka akan muncul video berukuran 400px pada halaman website yang kita buat, seperti berikut
Ini adalah hasil ketika video dapat diputar di halaman web
Dari contoh di atas, kita menampilkan video dengan file video di folder dengan file html yang kita buat, sebagai berikut
Namun bagaimana jika file video kita buat folder tersendiri kembali di folder video di html, maka penulisan kode pada tag video di atribut crc akan seperti berikut
<video controls> <source src="video/langit.mp4" type="video/mp4" /> </video>Kode diatas menampilkan video dengan posisi video berada di folder yang sama dengan file html yang kita miliki, cara ini bisa dikatakan file video tersimpan secara internal di komputer kita
Jika kita sudah mengupload file video tersebut ke website dan akan kita gunakan untuk tampil di website kita sendiri, maka kita tinggal memasukkan url (alamat web video tersebut) ke dalam atribut src pada tag source, seperti berikut
<video controls> <source src="//res.cloudinary.com/dssknt9vd/video/upload/v1644199674/demo-video-tampil-di-web-dengan-html_dse5se.webm" type="video/mp4" /> </video>Format Video yang Didukung
Lalu format video apa saja yang didukung atau support untuk tampil di halaman web?
Format Jenis File Mediamp4video/mp4webmvideo/webmoggvideo/ogg
Jika sewaktu-waktu format file yang anda miliki berbeda dengan ketiga format file yang didukung diatas, maka anda harus merubah terlebih dahulu formatnya menjadi. mp4,. web atau. ogg
Atribut Pada Tag Video
Atribut di bawah ini adalah atribut yang biasanya digunakan pada tag video html
Nama Atribut Nilai/Nilai Pemakaian/Fungsi looptrue/falsevideo dapat diputar berulang kali controltrue/false menampilkan menu kontrol videomutedtrue/false mematikan audio pada video posterpath image menampilkan gambar sampul videoautoplaytrue/false otomatis memutar videoplaysinlinetrue/false memutar video inlinewidthNumber/Number menentukan lebar videoheightNumber/Number menentukan tinggi
Berikut cara menggunakan atribut pada tag video di atas
Jika atribut benar, maka atribut hanya dapat ditulis dengan namanya
<video controls> <source src="video/langit.mp4" type="video/mp4" /> </video>atau
<video controls="true"> <source src="video/langit.mp4" type="video/mp4" /> </video>Namun jika nilainya salah, maka atribut dapat ditulis dengan nilai salah atau tidak perlu ditulis
<video muted="false"> <source src="video/langit.mp4" type="video/mp4" /> </video>_atau
<video> <source src="video/langit.mp4" type="video/mp4" /> </video>Cara menyematkan video YouTube dalam HTML
Cara menampilkan video dari youtube ke halaman web bisa dilakukan dengan cara yang sederhana, biasanya langkah yang kita lakukan adalah dengan meng-embed video youtube dengan html
apa itu embed?
Arti kata embed dalam Kamus Inggris-Indonesia jika diartikan kkt. (tertanam) 1. implan 2. tongkat. 3. toko
Artinya di dalam web kita bisa menyematkan atau menempelkan link untuk menampilkan video dengan memasukkan url sumber video yang akan kita tampilkan
Bagaimana cara menyematkan atau menampilkan video dari youtube di html?
Kita tinggal menggunakan tag saja dengan atribut src untuk memanggil file, width untuk mengatur lebar ukuran video dan height untuk tinggi videonya.
Contoh
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menampilkan Video di HTML</title> </head> <body> <h1>Contoh Menampilkan Video dari youtube di HTML</h1> <iframe width="560" height="315" src="//www.youtube.com/embed/ljzg8vrVlc8" title="YouTube video player"></iframe> </body> </html>_Mari kita lihat atribut src, yang ada di bagian /embed/, ini adalah url video untuk menyematkan video, yang kemudian mengarahkan web ke id unik setelah URL /embed/, yaitu ljzg8vrVlc8
ID unik adalah ID video yang akan ditemukan oleh browser pada file video yang disimpan di server YouTube
Berikut adalah hasil yang ditampilkan dari contoh kode di atas
Lalu bagaimana cara mendapatkan link embed video youtube?
1. kita tinggal mengunjungi platform youtube baik di web maupun melalui aplikasi
2. kemudian cari video yang akan kita gunakan untuk ditampilkan di halaman web
3. klik tombol bagikan di bawah video dan pilih sematkan, maka YouTube akan secara otomatis membuatkan kami tautan dan kode html untuk menyematkan video
Demikian penjelasan saya kali ini, semoga bermanfaat bagi teman-teman yang sedang belajar html dasar. Terima kasih