Lagi cari cara bagaimana untuk menampilkan video di halaman web dengan html? kali ini saya akan bahas mengenai hal ini yaitu cara menampilkan video di web dengan html. Show
Kita tahu video merupakan salah satu elemen yang biasanya ada didalam sebuah website. Tak hanya sebagai elemen yang memperbagus tampilan web akan tetapi video digunakan untuk penyampaian informasi tambahan di halaman web. Berikut ini cara bagaimana kita menampilkan video di web dengan html. Cara menampilkan video di htmlUntuk menampilkan video dengan html, kita dapat menggunakan tag <video> yang ada di html5(versi terbaru html). Tag ini dapat kita gunakan untuk menampilkan video di halaman web. Untuk cara penggunaannya lihat struktur kodenya dibawah ini. Dalam penggunaan tag <video> 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 contoh kode untuk penerapan dari penggunaan tag video dari html.
Hasil tampilan dibrowsernya: Jika dilihat kok videonya tampil tapi terlalu besar ya? nah ini penyebabnya karena ukuran video yang ingin kita tampilkan di website tertalu besar ukuran tinggi dan lebarnya. Untuk cara mengatasinya kita cukup menambahkan atribut width didalam tag video. Seperti dibawah ini.
Dengan menambahkan atribut width=“400” pada tag video. Maka akan tampil ukuran video 400px di halaman website yang kita buat, seperti berikut. Beginilah hasilnya saat video dapat diputar dihalaman web. Dari contoh diatas kita menampilkan video dengan file videonya berada satu folder dengan file html yang kita buat, seperti berikut. Tapi bagaimana jika file videonya kita buat folder tersendiri kembali didalam folder video di html, maka penulisan kode pada tag video di atribut crcnya akan menjadi seperti berikut ini.
Kode diatas kita menampilkan video dengan posisi videonya berada di satu folder dengan file html yang kita miliki, cara ini dapat dikatakan merupakan file video yang disimpan di internal komputer kita. Apabila fil video tersebut telah kita upload ke situs web dan kita akan menggunakannya untuk tampil di web kita sendiri, maka kita tinggal masukan urlnya(alamat web video) ke atribut src di tag source, seperti berikut.
Format Video Yang di DukungKemudian format video apa saja yang disupport atau didukung agar dapat tampil dihalaman web?
Jika suatu saat format file yang kamu miliki berbeda dari ketiga format file yang di support diatas maka kamu harus merubah terlebih dahulu formatnya baik itu ke .mp4, .webm atau .ogg. Atribut Pada Tag VideoAtribut-atribut dibawah ini, merupakan atribut yang biasanya digunakan pada tag video html.
Berikut cara penggunaan atribut-atibut pada tag video diatas. Apabila suatu atribut bernilai true, maka atribut tersebut dapat di tulis hanya dengan namanya saja.
atau
Tapi kalau bernilai false, atributnya boleh ditulis dengan nilai false atau tidak perlu ditulis.
atau
Cara embed video Youtube di HTMLCara menampilkan video dari Youtube ke halaman web dapat kita lakukan dengan cara yang mudah, biasanya langkah yang kita lakukan adalah dengan cara embed video youtube dengan html. apa itu embed?
Berarti dalam didalam web kita dapat menanamkan atau melekatkan sebuah link untuk menampilkan video dengan memasukan url sumber dari video yang akan kita tampilkan. Bagaimana cara untuk embed atau menampilkan video dari youtube di html? Kita tinggal menggunakan tag <iframe> saja dengan atribut src untuk memanggil file, width untuk mengatur lebar ukuran video dan height untuk tinggi videonya. Contoh:
Coba kita lihat pada atribut src-nya yaitu di bagian /embed/, ini merupakan url video untuk embed videonya yang kemudian mengarahkan webnya ke id unik yang ada di setelah ur /embed/ yaitu ljzg8vrVlc8. Id unik merupakan id video yang akan di temukan oleh browser mengenai file video yang tersimpan di server youtube. Berikut hasil yang ditampilkan dari contoh kode diatas: Lalu bagaimana cara mendapatkan link embed video youtube? 1. kita tinggal kunjungi platform youtube baik itu di web atau via aplikasi. 2. kemudian cari video yang akan kita gunakan untuk ditampilkan di halaman web 3. klik tombol share(bagikan) dibawah video dan pilih embed/sematkan, maka secara otomatis youtube akan membuatkan kita link maupun kode html untuk embed videonya. Demikian penjelasan saya kali ini semoga bermanfaat bagi teman-teman yang sedang belajar html dasar. Terima kasih.
Bagaimana cara memasukkan video pada halaman web?Menambahkan Video pada Post dan Page. Ketikkan URL (alamat internet) dari video pada Video URL textbox. Biasanya situs yang membagikan videonya sevara gratis sudah menyediakan URL yang bisa di copy-paste.. (Optional) Ketikkan judul dari video pada Title text box.. Klik tombol Insert into Post.. Tag apa yang digunakan untuk menyisipkan video?Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah <iframe> .
Apa elemen HTML yang benar untuk memutar file video?HTML <video> element digunakan untuk merujuk sumber file video, sehingga dapat diputar (dimainkan) pada halaman web.
Tag untuk membuat link adalah a href dimana atribut href adalah berisi?Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).
|