Cara Membuat Video dengan Background Gambar HTML 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 zlearn akan berbagi tutorial html bagaimana caranya Membuat Video dengan Background Gambar HTML Poster sebelum video diputar nah jadinya jika video kita belum di putar maka  yang akan tampil adalah gambarnya.
zlearn


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

nah untuk lebih lanjut  langsung lihat tutroal aja

sebelum menambahkan tag poster pada video html di web

<!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 tampilannya akan kayak gini:
Nah kalau yang udah di tambahi tag poste maka akan kayak gini:
Zlearn
Jadi kan ada gambarnya sebelum video itu kita putar. oh ya ini scriptnya:

<!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>

nah sekian tutorial dari zlearn mengenai Cara Membuat Video dengan Background Gambar HTML Poster. semoga dapat bermanfaat dan silahkan terus kunjungi zlearn untuk tutorial dan informasi menarik liannya



Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...