Minggu, 03 Mei 2015

Menampilkan video dan audio menggunakan HTML5

Menampilkan video pada HTML5

  • 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>
Browser yang support untuk menampilkan video di HTML5 :
 

 Atribut pada tag <VIDEO>
Untuk melengkapi penggunaan element, dapat menambahkan beberapa tag atribut :

  • width=”dalam pixel” (Untuk Menentukan lebar video)
  • height=”dalam pixel” (Untuk Menentukan tinggi video)
  • controls=”controls” (Untuk Menampilkan tombol kontrol video)
  • autoplay=”autoplay” (Untuk Memutar video secara otomatis)
  • loop=”loop” (Untuk Mengulangi pemutaran video terus menerus)
  • muted=”muted” (Untuk Menghilangkan Output SUara pada Video)
  • poster=”URL” (Untuk menampilkan gambar awal sebelum video diputar)


 Syntax penulisan Video

 <video src="judulvideo.ogg" controls="controls"></video>

 ATAU

<video controls="controls"><source src="judulvideo.webm" type="video/webm"></video>

 

Atribut pada tag <Audio>

Di tag audio, ada beberapa properti atau tag yang bisa dimasukkan:
  • autoplay berfungsi agar audio otomatis di-play setelah siap untuk dimainkan
  • controls berfungsi menampilkan tombol play,pause,volume, dll.
  • loop berfungsi agar audio dimainkan berulang-ulang
  • muted apakah audionya mau di-mute atau tidak
  • preload (auto, metadata, none) apakah audionya load pada saat pagenya sedang diload?
  • src menunjukkan URL dari audio yang akan dimainkan (yang ini tidak diperlukan kalau sudah ada <source>)

Syntax penulisan 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 audioyang mendukung yaitu:Ogg, MP3, Wav.
  • Tag <audio>
  • Sintaks Penulisanya :<audio controls="controls"><source src="judullagu.mp3" type="audio/mp3"></audio>
 
<source> berfungsi untuk memainkan audio yang dipilih, file audio harus bertipe ogg (audio/ogg) atau wav (audio/wav) atau mp3 (audio/mpeg), beberapa source bisa dimasukkan (contohnya mp3 dan ogg, jadi kalau browser tidak support mp3 tapi ogg audio masih bisa dimainkan, atau sebaliknya)
Di tag audio, ada beberapa properti yang bisa dimasukkan:
  • autoplay berfungsi agar audio otomatis di-play setelah siap untuk dimainkan
  • controls berfungsi menampilkan tombol play,pause,volume, dll.
  • loop berfungsi agar audio dimainkan berulang-ulang
  • muted apakah audionya mau di-mute atau tidak
  • preload (auto, metadata, none) apakah audionya load pada saat pagenya sedang diload?
  • src menunjukkan URL dari audio yang akan dimainkan (yang ini tidak diperlukan kalau sudah ada <source>) 
Baca juga : Artikel Tentang Peluang Usaha Dan Bisnis 
Mengenal dan contoh Elemen baru pada HTML5


DOCTYPE UNTUK HTML5
  • DOCTYPEadalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.
  • Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).
  • DTDmenetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.
  • Penggunaan DOCTYPE pada html5 lebih di sederhanakan.
  • Sintak penulisannya :
<!DOCTYPE html>

 
Elemen baru pada HTML5
  • <article> Mendefinisikan sebuah artikel dalam dokumen 
  • <side> Mendefinisikan konten selain dari konten halaman
  • <bdi> Mendefinisikan sebuah bagian dari teks yang mungkin diformat dalam arah yang berbeda dari teks lain
  • <details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
  • <dialog> Mendefinisikan sebuah kotak dialog atau jendela
  • <figcaption> Mendefinisikan sebuah caption untuk <figure> elemen
  • <figure> Mendefinisikan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll
  • <footer> Mendefinisikan footer atau kaki dokumen
  • <header> Mendefinisikan sebuah header atau kepala dokumen
  • <main> Mendefinisikan isi utama dokumen
  • <mark> Mendefinisikan ditandai atau teks yang disorot
  • <menuitem> Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil dari menu popup
  • <meter> Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)
  • <nav> Mendefinisikan link navigasi dalam dokumen
  • <progress> Mendefinisikan proses dokumen
  • <rp> Mendefinisikan tampilan di browser yang tidak mendukung penjelasan ruby
  • <rt> Mendefinisikan penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
  • <ruby> Mendefinisikan penjelasan ruby ​​(untuk tipografi Asia Timur)
  • <section> Mendefinisikan bagian dalam dokumen 
  • <summary> Mendefinisikan judul yang terlihat untuk elemen <details>
  • <time> Mendefinisikan tanggal / waktu
  • <wbr> Mendefinisikan kemungkinan line-break
Elemen-elemen baru di Form :
  • <datalist> Mendefinisikan pilihan untuk kontrol input
  • <keygen> Mendefinisikan sebuah pasangan kunci ( untuk forms )
  • <output> Mendefinisikan hasil perhitungan
Elemen-Elemen Media baru di HTML5 :

  • <audio> Mendefinisikan konten suara atau musik
  • <embed> Mendefinisikan wadah untuk aplikasi eksternal ( seperti plug-in )
  • <source> Mendefinisikan sumber untuk <video> dan <audio>
  • <track> Mendefinisikan lagu untuk <video> dan <audio>
  • <video> Mendefinisikan konten video atau film
 Elemen-elemen Graphics baru di HTML5 :

  • <canvas> Mendefinisikan gambar grafis menggunakan JavaScript
  • <svg> Mendefinisikan gambar grafis menggunakan SVG