[ HTML ] [ Java ] [ Bahasa C ]


Kamis, September 12, 2019

Video html 5

Sebelum adanya HTML 5, video hanya bisa dimainkan pada browser menggunakan plug in tambahan seperti flash. Tetapi setelah HTML 5 telah release maka penambahan sebuah video pada laman web dapat dilakukan dengan mudah seperti menambahkan gambar pada laman web. Elemen video pada html 5 digunakan untuk menentukan standar untuk menambahkan video pada laman web.

Terdapat tiga perbedaan format video yang secara umum digunakan untuk mendukung pemutaran video pada web browser yaitu mp4, Ogg, dan WebM. Tabel berikut ini akan memperlihatkan daftar format yang didukung pada browser yang berbeda:

gambar tabel 1

Sintak:
<video >   <source src=" " type=" "> </video> 

Atribut yang dapat digunakan dengan tag video adalah sebagai berikut:
satu, autoplay: Memberitahukan browser untuk secepatnya memulai download video dan memainkannya sesegera mungkin.
dua, preload: Bermaksud memberikan petunjuk kepada browser tentang apa yang menurut penulis akan mengarah pada pengalaman pengguna terbaik.
tiga, loop: Memberitahukan browser untuk mengulang otomatis video yang telah dimainkan.
empat, height & width: Untuk mengatur panjang dan lebar dari video pada satuan pixel CSS.
lima, controls: Untuk memperlihatkan kontrol video default seperti play, pause, volume, dan lain sebagainya.
enam, muted: Untuk mematikan audio dari video yang diputar.
tujuh, poster: Untuk melakukan loading preview sebelum video diputar.

Penambahan video menggunakan HTML 5:
Output:

Penjelasan kode:
satu, Atribut controls digunakan untuk menambahkan tombol kontrol seperti play, pause, volume, dan lain sebagainya.
dua, Elemen "source" digunakan untuk menentukan video mana pada browser yang akan dimainkan.

Autoplay video menggunakan HTML 5:
Untuk memulai video otomatis gunakan atribut autoplay.

Output:

Video HTML menggunakan JavaScript:
Banyak properti dan event yang dapat diatur untuk sebuah video seperti load, play, dan pause video, sama seperti halnya untuk mengatur durasi, dan volume.

Output:





Tidak ada komentar:

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D