√ Cara Membuat Video dengan Background Gambar HTML5 Poster

Video merupakan sebuah rekayasa dari perekaman dengan kamera atau menggunakan sebuah tool pembuat video seperti animasi dan teks. Nah berbicara tentang video bagi anda yang ingin mengembed atau memasukan video di Web dengan HTML  responsive dan ingin membuat background gambar sebelum video di putar html nah  pada kesempatan ini kami akan berbagi tutorial html bagaimana caranya Membuat Video dengan Background Gambar HTML5 Poster sebelum video diputar nah jadinya jika video kita belum di putar maka  yang akan tampil adalah gambarnya.


Cara Membuat Video dengan Background Gambar HTML5 Poster

Kita akan memanfaatkan tag html poster=""  dengan kita menambahkan poster maka video  di web kita akan menampilkan gambar sebelum  video kita putar: 

Baca Juga :

Nah untuk lebih lanjut  langsung lihat praktik saja

Sebelum menambahkan tag poster pada video html di web, ketikan kode di bawah ini :

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

    width: 100%;

    height: auto;

}

</style>

</head>

<body>


<video width="400" controls >

  <source src="mov_bbb.mp4" type="video/mp4">

  <source src="mov_bbb.ogg" type="video/ogg">

  Your browser does not support HTML5 video.

</video>



<p>Resize the browser window to see how the size of the video player will scale.</p>


</body>


</html>

Maka hasil kode kita akan seperti gambar di bawah ini :

Cara Membuat Video dengan Background Gambar HTML5 Poster



Selanjutnya untuk menambahkan background gambar ubah kode di atas menjadi seperti ini :


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

    width: 100%;

    height: auto;

}

</style>

</head>

<body>



<video width="400" controls poster="https://1.bp.blogspot.com/-npC7nyfW93s/VurNtGpm8WI/AAAAAAAABQg/wbUK1j5XajEkYIB22wHerJrzOuSV11Ubw/s1600/mewarnai%2Bgambar%2Bbinatang%2Buntuk%2Banak%2Bberuang%2Byang%2Blucu%2B5.png">

  <source src="mov_bbb.mp4" type="video/mp4">

  <source src="mov_bbb.ogg" type="video/ogg">

  Your browser does not support HTML5 video.

</video>



<p>Resize the browser window to see how the size of the video player will scale.</p>

</body>

</html>

Dan setelah itu hasil kodingan kita akan menjadi seperti ini :

Cara Membuat Video dengan Background Gambar HTML5 Poster

Sekian tutorial mengenai Cara Membuat Video dengan Background Gambar HTML5 Poster. semoga dapat bermanfaat dan silahkan terus kunjungi zlearn untuk tutorial dan informasi menarik liannya


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel