Cara menampilkan video di HTML











Cara menampilkan video di HTML

Tag video di HTML

Sesuai dengan nama tag-nya tag video berfungsi untuk menampilkan video.
Berikut tag video di  HTML

Atribut tag video

Berikut adalah atribut opsional yang ada di tag video.
AtributValueKeterangan
autoplayautoplay video akan di putar automatis ketika halaman di buka atau di refresh
controlscontrols digunakan untuk menampilkan tombol control seperti tombol pause dan volume
heightpixels digunakan untuk mengatur tinggi video
looploop digunakan untuk memutar kembali secara automatis ketika video selesai
mutedmuted digunakan untuk membisukan suara dari video
posterURL digunkan untuk menampilkan gambar sebelum video diputar manual
preloadauto
metadata
none		 menentukan metode video ketika halaman dimuat
srcURL digunakan untuk URL letak file video di simpan
widthpixels digunkan untuk mengatur lebar video

Value atribut preload

ValueKeterangan
auto video akan di buka automatis ketika halaman di muat/ refresh
metadata video akan di buka secara meta data
nonevideo tidak akan di putar secara auto maupun secara metadata

Contoh menampilkan video di file html

Dalam contoh ini admin membuat file HTML dengan nama video.html dan  nama file video tranformer-last-night.mp4. Kedua file tersebut di simpan dalam satu folder video.


Perlu kita ketahui beberapa browser open source seperti Firefox menolak file video berformat  seperti WMV dan hanya dapat menjalankan format OGG. Untuk menanggulangi hal itu, kita dapat menggunakan elemen source yang berguna untuk memberikan beberapa jenis format file sekaligus dan membiarkan browser memilih format yang dapat dijalankannya.

Format video yang didukung browser

BrowserMP4WebMOgg
Internet Explorer✔✘✘
Chrome✔✔✔
Firefox✔✔✔
Safari✔✘✘
Opera✔✔✔

Elemen source di HTML

Elemen source berfungsi untuk mendefinisikan lebih dari satu sumber media (video).
Berikut penulisan elemen source di HTML

Atribut tag source

AtributValueKeterangan
src URL digunakan untuk URL letak file video di simpan
type video/mp4
video/webm
video/ogg
  Berfungsi untuk menentukan format ekstensi file video

Value atribut type

TypeFormat
video/mp4MP4
video/webmWebM
video/oggOgg
Contoh penggunaan elemen source

Elemen track di HTML

Fungsi elemen track berfungsi untuk mendefinisikan trek teks untuk elemen media (video).
Berikut cara penulisan  elemen track di HTML

Atribut track di HTML

Berikut adalah atribut opsional yang ada di elemen tarck
AtributValueKeterangan
default default Mengatur track secara default
kindcaptions
chapters
descriptions
metadata
subtitles		Digunakan untuk menentukan jenis track teks
labeltextDigunakan untuk menentukan judul  teks
srcURLDigunakan untuk menentukan URL dari file media
srclanglanguage_codeDigunakan untuk menentukan bahasa data track teks
Contoh penggunaan elemen track di HTML

Dukungaan browser

Elemen / Tag

Elemen / TagChromeSafariFirefoxOperaIE (Internet Explorer)
<video>4.04.03.510.59.0
<source>4.04.03.510.59.0
<track>18.06.031.015.010.0

Atribut

AtributChromeInternet ExplorerFirefoxSafariOpera
Video
autoplay4.09.03.54.010.5
controls4.09.03.54.010.5
height✔✔✔✔✔
loop4.09.011.04.010.5
muted4.010.011.07.110.5
poster4.09.03.64.010.5
preload4.0✘4.04.010.5
src4.09.03.54.010.5
width✔✔✔✔✔
source
src4.09.03.54.010.5
type4.09.03.54.010.5
track
default18.010.031.06.015.0
kind18.010.031.06.015.0
label18.010.031.06.015.0
src18.010.031.06.015.0
srclang18.010.031.06.015.0

Referensi









Komentar

Posting Komentar

Postingan populer dari blog ini

Apa itu Programmer ?

Gambar
menurut para programmer, kata programmer kata dasar dari pemrogram komputer atau pemrogram saja atau pengembang perangkat lunak adalah profesi yang menulis program menggunakan bahasa pemrograman seperti Perl, C++, Python, VB, Visual_Basic_.NET, PHP, dan lain-lain. menurut saya programmer itu sendiri terbagi menjadi 3 bidang yaitu programmer web, programmer mobile, dan programmer dekstop. berikut penjelasan di setiap bidang :  1. programmer web web programmer adalah orang yang menulis kode/koder baik yang menguasai satu atau beberapa bidang program dan melakukan pekerjaannya dalam mengembangkan suatu website. mungkin dari bagian desain tampilannya, fungsi-fungsi di setiap bagian web tersebut, hingga sampai database / tempat penyimpanan data-data yang ada pada di web tersebut. contohnya : website jalan tikus.com, kaskus.com, dll.  2. programmer mobile Mobile adalah perangkat yang bergerak, misalnya telepon seluler atau komputer bergerak yang digunakan untuk mengakses jas...
Baca selengkapnya

KOKKURI SAN (PERMAINAN MEMANGGIL ARWAH)

KOKKURI SAN  Di Jepang ada sebuah permainan memanggil arwah yang di kenal dengan nama Kokkuri San. Dalam permainan ini di butuhkan sebuah kertas bertuliskan huruf-huruf hiragana dan sebuah koin. Telunjuk masing-masing peserta harus menempel pada koin di atas kertas. Setelah mantra pemanggil di bacakan, koin akan bergerak untuk menandakan bahwa ada arwah yang datang. Peserta permainan bebas bertanya apa saja selama  permainan . Beberapa cerita menyebutkan bahwa permainan ini dapat memberi tahu tanggal kematian para pesertanya. Yang harus di ingat selama bermain Kokkuri San, para peserta tidak boleh lupa mengucapkan selamat tinggal setelah permainan selesai atau mereka akan di hantui terus-menerus. Cara lain agar selamat dari gangguan arwah ini adalah peralatan permainan tersebut harus di buang dalam waktu tertentu, atau membelanjakan koin yang di pakai saat bermain. Jika tidak, para peserta akan di hantui terus menerus dan dapat berakibat pada kematian. loading......
Baca selengkapnya

Apa itu XAMPP ?

Gambar
           Halo sahabat pembaca Xreator, Kali ini saya akan memberi tahu tentang apa itu XAMPP dan kode - kodenya      Saya mau tanya apakah ada yang tau apa itu XAMPP ? Mungkin untuk kalangan yang sudah master dalam dunia komputer(jaringan) banyak yang sudah tau apa itu XAMPP!  nah sekarang saya akan kasih tau apa itu XAMPP.  Pengertian XAMPP yaitu sebuah aplikasi yang dapat merangkum beberapa aplikasi server sekaligus XAMPP Singakatan dari : X : multi platform, bisa Windows, Linux, Mac OS. A : Apache HTTP Server M : MySQL Database Server P : PHP Scripting Language P : Perl Scripting Language Contoh Kode : <?php        echo "Hello World!"; ?> fungsi echo adalah untuk menampilkan data ke browser. <?php        echo "Hello World!";        echo "<br>"...
Baca selengkapnya