Belajar HTML #13: Cara Menambahkan Video pada Web

 Cara Menambahkan Video di HTML

Kita membutuhkan sebuah media player untuk menampilkan video di HTML.


Dulu..


Sebelum ada HTML 5, media player di HTML dibuat dengan program eksternal seperti adobe flash.


Namum, kini sudah tidak dipakai lagi.

HTML sekarang punya tag baru untuk membuat media player, yakni tag <video>

Jika tag video di buka pada browser yang tidak mendukungnya, maka teks browser tidak mendukung tag video akan ditampilkan.

Format Video yang Didukung

Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format video yang didukung: 1


Format FILE Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

Jika kamu punya video dengan format yang berbeda dari ketiga format tersebut, maka kamu harus mengubahnya agar bisa ditambahkan ke HTML.


Atribut untuk Video

Tag <video> punya beberapa atribut yang bisa diberikan:


Nama Atribut Nilai Fungsi

autoplay true/false Agar video diputar otomatis

controls true/false Untuk mengaktifkan control video player

loop true/false Untuk memutar video terus menerus

muted true/false Untuk menonaktifkan audio

poster Image Path Untuk menentukan gambar cover dari video

width & height angka Untuk menentukan tinggi dan lebar video

playsinline true/false Untuk memutar video secara ‘inline’

Jika atribut bernilai true, maka ia boleh ditulis namanya saja.

Subtitle untuk Video

Subtitle adalah teks yang akan ditampilkan dalam video. Biasanya digunakan untuk terjemahan atau alih bahasa dari video dan juga untuk membantu tuna rungu (orang tuli) untuk menyerap informasi pada video.


Subtitle pada HTML dapat kita tambahkan dengan tag <track>. Tag ini memiliki atribut src yang akan digunakan untuk menambahkan file subtitle.

Format file subtitle untuk video di dalam HTML adalah WebVTT (.vtt) atau Web Video Text Track. File .vtt ini bisa dibuat dengan teks editor.


Jika kamu punya subtitle dengan format SubRip Text (.srt), kamu bisa mengubahnya menjadi .vtt


Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Python: Cara Membaca dan Menulis File di Python

Gambar
  Baca dan tulis file adalah teknik dasar yang harus dipahami dalam pemrograman Python, karena banyak digunakan untuk pengolahan dan pemerosesan file. Paham cara membaca dan menulis file dengan Python akan membuatmu mampu membuat aplikasi yang bisa mengambil dan menyimpan data ke file. Selain itu juga, kamu akan lebih mudah memahami beberapa materi Python Pada Python, file hanya dikelompokkan menjadi dua tipe: File Teks : File yang berisi teks. Setiap baris teks memiliki EOL  (End of Line) . Contoh: TXT, MD, CSV, JSON, dsb. File Binary : File yang bukan teks, hanya bisa diproses oleh program tertentu yang memahami strukturnya. Contoh: EXE, JPG, MKV, M4A, 3GP, dsb. Pada tutorial ini, kita akan hanya belajar cara membaca dan menulis file teks saja. Untuk file  binary , mungkin nanti di kesempatan yang lain. Cara Membaca File di Python Python sudah menyediakan fungsi  open()  untuk membaca dan menulis file.  1 Fungsi ini memiliki dua parameter, yaitu nama file...
Baca selengkapnya

Belajar Javascript: Memahami Struktur Data Array pada Javascript

  Apa itu Array? Sebelum kita membahas Array, kita bahas dulu apa itu struktur data? Struktur data  merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer. Salah satu struktur data yang sering digunakan dalam pemrograman adalah  Array . Array merupakan struktur data yang digunakan untuk  menyimpan sekumpulan data  dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya. Indeks array selalu dimulai dari angka nol ( 0 ). Pada teori struktur data… …Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya. Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Cara Menambahkan Data ke Dalam Array Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array: Mengisi menggunakan indeks; Mengisi menggunakan method  push() . Terdapat tiga data di dalam array  buah  dengan indeks: 0 :  "Apel" ...
Baca selengkapnya

Belajar Javascript #7: Memahami 6 Bentuk Percabangan pada Javascript

Gambar
  Apa itu percabangan dan kenapa dinamakan percabangan? Buat yang belum pernah kuliah atau belajar tentang algoritme dan flowchart, mungkin ini istilah yang baru pertama kamu dengar. Isitilah ini sebenarnya untuk menggambarkan alur program yang bercabang. Pada flow chart, logika  “jika…maka”  digambarkan dalam bentuk cabang. Karena itu, ini disebut percabangan. Selain percabangan, struktur ini juga disebut:  control flow ,  decision , struktur kondisi, Struktur if, dsb. Percabangan akan mampu membuat program berpikir dan menentukan tindakan sesuai dengan logika/kondisi yang kita berikan. 1. Percabangan  if Percabangan  if  merupakan percabangan yang hanya memiliki  satu blok pilihan  saat kondisi bernilai benar. Flowchart  tersebut dapat kita baca seperti ini: “Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan  Selamat, Anda dapat hadiah ” Kalau dibawah Rp 100.000 bagaimana? Ya pesannya tidak ditampilkan. 2. ...
Baca selengkapnya