Penerapan HTML (Part 17)

I.Latar Belakang.
Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime text

III.Tujuan.
 untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.
 
HTML Multimedia

Apa Multimedia?
Multimedia datang dalam berbagai format yang berbeda. Hal ini dapat hampir apapun yang Anda bisa mendengar atau melihat.
Contoh: Gambar, musik, suara, video, catatan, film, animasi, dan banyak lagi.
halaman web sering mengandung unsur multimedia jenis dan format yang berbeda.
Dalam bab ini Anda akan belajar tentang format multimedia yang berbeda.

Dukungan Browser
Web browser pertama memiliki dukungan untuk teks saja, terbatas pada font tunggal dalam satu warna.
Kemudian datang browser dengan dukungan untuk warna dan font, dan gambar!
Audio, video, dan animasi telah ditangani secara berbeda oleh browser utama. format yang berbeda telah didukung, dan beberapa format memerlukan program pembantu tambahan (plug-in) untuk bekerja.
Mudah-mudahan ini akan menjadi sejarah. HTML5 multimedia menjanjikan masa depan yang lebih mudah untuk multimedia.

Multimedia Format
elemen multimedia (seperti audio atau video) disimpan dalam file media.
Cara yang paling umum untuk menemukan jenis file, adalah dengan melihat ekstensi file.
file multimedia memiliki format dan ekstensi yang berbeda seperti: swf, wav, .mp3, .mp4, .mpg, .wmv, dan avi.

Video Format umum

MP4 adalah format baru dan yang akan datang untuk video internet.
  • MP4 direkomendasikan oleh YouTube.
  • MP4 didukung oleh Flash Players.
  • MP4 didukung oleh HTML5. 

Format Audio 
MP3 adalah format terbaru untuk rekaman musik terkompresi. Istilah MP3 telah menjadi identik dengan musik digital.
Jika situs Web Anda tentang musik rekaman, MP3 adalah pilihan.  

HTML5 Video

 Contoh :

Maka outputnya :


Bermain dalam HTML

Sebelum HTML5, video hanya bisa dimainkan di browser dengan plug-in (seperti flash).
HTML5 <video> elemen menentukan cara standar untuk menanamkan video di halaman web.

HTML <video> Elemen

Untuk menampilkan video di HTML, gunakan <video> elemen

<!DOCTYPE html>
<html>
<body>
<video width="600" controls>
  <source src="MTuby.MOBI _Jabbawockeez-at-Body-Rock-2015.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</body>
</html>




Bagaimana itu bekerja

kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume.
Ini adalah ide yang baik untuk selalu menyertakan lebar dan tinggi atribut. Jika tinggi dan lebar tidak diatur, halaman mungkin berkedip sementara beban video.
<source> elemen memungkinkan Anda untuk menentukan file video alternatif yang browser dapat memilih dari. Browser akan menggunakan format diakui pertama.
Teks antara <video> dan </ video> tag hanya akan ditampilkan dalam browser yang tidak mendukung <video> elemen.

HTML <video> Autoplay

Untuk memulai video secara otomatis menggunakan autoplay atribut

Contoh :

 Maka outputnya :


HTML Video - Metode, Properties, dan Acara

HTML5 mendefinisikan metode DOM, sifat, dan peristiwa untuk <video> elemen.
Hal ini memungkinkan Anda untuk memuat, bermain, dan jeda video, serta pengaturan durasi dan volume.
Ada juga DOM peristiwa yang dapat memberitahu Anda ketika video mulai bermain, dijeda, dll

Contoh :

Maka outputnya :


HTML5 Audio


Audio di Web

Sebelum HTML5, file audio hanya bisa dimainkan di browser dengan plug-in (seperti flash).
HTML5 <audio yang> elemen menentukan cara standar untuk menanamkan audio dalam halaman web.

HTML <audio yang> Elemen

Untuk memutar file audio dalam HTML, gunakan <audio yang> elemen

Contoh :


Maka outputnya :


HTML Audio - Cara Bekerja

kontrol atribut menambahkan kontrol audio, seperti play, pause, dan volume.
<source> elemen memungkinkan Anda untuk menentukan file audio alternatif yang browser dapat memilih dari. Browser akan menggunakan format diakui pertama.
Teks antara <audio yang> dan </ audio> tag hanya akan ditampilkan dalam browser yang tidak mendukung <audio yang> elemen.

HTML Audio - Metode, Properties, dan Acara

HTML5 mendefinisikan metode DOM, sifat, dan peristiwa untuk <audio yang> elemen.
Hal ini memungkinkan Anda untuk memuat, bermain, dan jeda audio, serta durasi set dan volume.
Ada juga DOM peristiwa yang dapat memberitahu Anda ketika audio mulai bermain, dijeda, dll

HTML Plug-ins

HTML Helpers (Plug-ins)
aplikasi pembantu (plug-in) adalah program komputer yang memperluas fungsionalitas standar web browser.
Contoh terkenal plug-in yang applet Java.
Plug-in dapat ditambahkan ke halaman web dengan <object> tag atau <embed> tag. 
Plug-in dapat digunakan untuk berbagai tujuan: peta display, memindai virus, memverifikasi id bank Anda, dll

<Object> Elemen

<Object> elemen didukung oleh semua browser.
<Object> mendefinisikan sebuah objek tertanam dalam dokumen HTML.
Hal ini digunakan untuk menanamkan plug-in (seperti applet Java, pembaca PDF, Flash Pemain) di halaman web.

Contoh :

Maka outputnya :




 <Object> elemen juga dapat digunakan untuk memasukkan HTML di HTML

Contoh :

Maka outputnya :


Atau gambar jika kamu suka

Contoh :
Maka outputnya :

<embed> Elemen

<embed> elemen didukung di semua browser utama. <embed> elemen juga mendefinisikan sebuah objek tertanam dalam dokumen HTML.
Web browser telah mendukung <embed> elemen untuk waktu yang lama. Namun, hal itu belum menjadi bagian dari spesifikasi HTML sebelum HTML5.

 Contoh :

Maka outputnya :


HTML Video YouTube

Youtube dengan Video Format?

Sebelumnya dalam tutorial ini, Anda telah melihat bahwa Anda mungkin harus mengkonversi video Anda ke format yang berbeda untuk membuat mereka bermain di semua browser.
Mengkonversi video ke format yang berbeda bisa sulit dan memakan waktu.
Solusi yang lebih mudah adalah dengan membiarkan YouTube memutar video di halaman web Anda.

Id Video YouTube

YouTube akan menampilkan id (seperti XGSy3_Czz8k), ketika Anda menyimpan (atau bermain) video.
Anda dapat menggunakan id ini, dan lihat video Anda dalam kode HTML.

Bermain Video YouTube di HTML

Untuk memutar video Anda pada halaman web, lakukan hal berikut:
  • Mengunggah video ke YouTube
  • Mengambil catatan dari id video yang
  • Mendefinisikan <iframe> elemen dalam halaman web Anda
  • Biarkan titik atribut src untuk URL video
  • Gunakan lebar dan tinggi atribut untuk menentukan dimensi dari pemain
  • Menambahkan parameter lain untuk URL (lihat di bawah)
Contoh :
 Maka outputnya :



YouTube Autoplay

Anda dapat memiliki video Anda mulai bermain secara otomatis ketika pengguna mengunjungi halaman dengan menambahkan parameter sederhana untuk URL YouTube Anda.
Catatan: Mengambil pertimbangan hati-hati ketika memutuskan untuk autoplay video Anda. Mulai otomatis video dapat mengganggu pengunjung Anda dan akhirnya menyebabkan lebih berbahaya daripada baik.
Nilai 0 (default): Video tidak akan bermain secara otomatis ketika beban pemain.
Nilai 1: Video akan diputar secara otomatis ketika beban pemain.

Contoh :

Maka outputnya :


YouTube Playlist

Sebuah daftar dipisahkan koma video untuk bermain (di samping URL asli).

YouTube loop

Nilai 0 (default): Video akan diputar hanya sekali.
Nilai 1: Video akan loop (selamanya).

Contoh :
Maka outputnya :

Kontrol YouTube

Nilai 0: kontrol Player tidak ditampilkan.
Nilai 1 (default): Pemain mengontrol display.

Contoh :


Maka outputnya :

YouTube - Menggunakan <object> atau <embed>

Catatan: YouTube <object> dan <embed> yang ditinggalkan dari Januari 2015. Anda harus bermigrasi video Anda menggunakan <iframe> gantinya.

Contoh :

Maka outputnya :

V.Kesimpulan. 
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.

VI.Refrensi.
    http://www.w3schools.com/html

Komentar

Posting Komentar

Postingan Populer