Sabtu, 31 Mei 2014

Memasukkan Video, Audio, dan Input Form Baru di HTML5

VIDEO

Digunakan untuk  memasukkan video, misalnya ingin memutar video kedalam halaman web. Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahanyang biasa disebut flash Player. Tag Video Pada HTML5, setidaknya ada  3 jenis format videoyang mendukung yaitu :
  •  Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
  •  MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
  •  WebM(File WebM dengan Video Codec  VP8 dan Audio Codec Vorbis)(.webm)
Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya, miro video converter. Tag <video>.
Sintaks Penulisanya :
<video src="judulvideo.ogg" controls="controls">
</video>
atau
<videocontrols="controls"> <source
src="judulvideo.webm" type="video/webm"></video>

ATRIBUT PADA TAG <VIDEO>
Atribute = controls.
Value = controls.
Description : Menentukan  kontrol video  yang akan ditampilkan(Contoh: tombol play/pause).

Atribute = autoplay.
Value =  autoplay.
Description : Menentukan bahwa video akan mulai berputar otomatis.

Atribute = src.
Value = URL.
Description : Menentukan alamat URL dari mana sumber video.

Atribute = width.
Value =  pixels.
Description: Mengatur lebar dari video player.

Atribute = height.
Value = pixels.
Description : Mengatur tinggi dari video player.

Atribute = loop.
Value = loop.
Description : Untuk mengulang  / memainkan kembali video yang telah selesai diputar.

Atribute = muted.
Value = muted.
Description : Menentukan bahwa output suara akan dimute/dihilangkan.

Atribute = poster.
Value = URL.
Description : Menentukan  gambar  yang akan  tampil  ketika  video masih belum berputar .

Atribute = preload.
Value =  auto, meta,data,none.
Description : Menentukan  jika  dan  bagaimana  kapan  video  ini  harus diputar menjalani proses loading ketika halaman terbuka.

CONTOH TAG <VIDEO>

AUDIO

Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web. Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.Tag Audio Pada HTML5, setidaknya ada  3 jenis format audio yang mendukung yaitu :
  •  Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
  •  MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
  •  WebM(File WebM dengan Video Codec  VP8 dan Audio Codec Vorbis)(.webm)
Jenis format audio sama seperti format pada video. Tag <audio>. Sintaks Penulisanya :
<audio controls="controls"><source src="judullagu.mp3" type="audio/mp3"></audio>

ATRIBUT PADA TAG <AUDIO>
Atribute = controls.
Value = controls.
Description : Menentukan  kontrol video  yang akan ditampilkan (Contoh: tombol play/pause).

Atribute = autoplay.
Value = autoplay.
Description : Menentukan  bahwa  video  akan  mulai  berputar otomatis.

Atribute = src.
Value = URL.
Description : Menentukan alamat URL dari mana sumber video.

Atribute = loop.
Value = loop.
Description : Untuk  mengulang  / memainkan  kembali video  yang telah selesai diputar .

Atribute = preload.
Value = auto,metadat,a none.
Description : Menentukan jika dan bagaimana kapan video ini harus diputar menjalani proses loading ketika halaman terbuka.

CONTOH TAG <AUDIO>

INPUT FORM BARU DI HTML5

Macam -macam jenis input form baru di HTML5 yaitu:
  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time,datetime, datetime-local)
  • search
  • color
  • tel (tipe ini belum support jadi tidak ada perubahan)
Sintaks Penulisanya : <input type="jenis"/>


VALIDATOR (http://validator.w3.org/ )
Digunakan untuk mengecek validasi atau kebenaran kode HTML web anda.

0 komentar:

Posting Komentar