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 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>"; ?> kode <br> berfungsi untuk memberi "enter" pada tek
Baca selengkapnya

apa itu scratch?

Gambar
Pada dekade saat ini, pembelajaran inovatif yang dapat membawa perubahan belajar pada peserta didik merupakan hal yang wajib dipelajari dan dimiliki oleh para pendidik. Pembelajaran konvensional telah usang dan dipandang sebagai sesuatu yang tidak menarik lagi dan tidak membuat peserta didik tidak nyaman. Peserta didik akan merasa senang dengan pembelajaran yang sesuai dengan tuntutan teknologi dan informasi yang terus berkembang. Sehingga, para pendidik perlu merancang suatu kegiatan belajar yang menarik bagi peserta didiknya. Scratch merupakan satu alternatif yang dapat digunakan para pendidik dalam mewujudkan kegiatan PAIKEM GEMBROT (Pembelajaran Aktif, Inovatif, Kreatif, Efektif, Menyenangkan, Gembira, dan Berbobot).  Pesatnya perkembangan teknologi, komunikasi, dan informasi memberikan manfaat tersendiri bagi dunia pendidikan, dengan munculnya berbagai software education tools. Salah satunya adalah Scatch.  Scratch merupakan salah satu program untuk membantu dalam mengenalka
Baca selengkapnya

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 jasa jaringa
Baca selengkapnya