Modul Pemograman Web I - Pertemuan 11 - Menampilkan Video Pada HTML

MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Mata Kuliah : Pemograman Web

Bobot Sks : 3
Dosen Pengembang : Riad Sahara, S.Si, M.T
Tutor : Muhammad Ikhwani Saputra, S.Kom, M.Kom
Capaian Pembelajaran : 1. …..
Mata Kuliah 2.
Kompetentsi Akhir Di 1. Mahasiswa mampu memahami dan dapat
Setiap Tahap (Sub- menambahkan konten video di HTML.
Cpmk)
Minggu Perkuliahan 11
Online Ke-
JUDUL TOPIK – Menampilkan Video pada HTML
1. Pendahuluan
2. Isi
I. Menampilkan Video pada HTML

Pada pertemuan sebelumnya, kita sudah belajar cara menambahkan gambar di HTML. Namun,
ini belumlah cukup, karena sekarang konten di web tidak hanya dalam bentuk teks dan gambar
saja. Konten lainnya yang bisa ditambahkan di HTML adalah audio dan juga video. Nah, pada
pertemuan kali ini, kita akan belajar cara menambahkan video di HTML.
1.1. 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. Namun, kini sudah tidak dipakai lagi.
1
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
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.
2
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Tapi, kalau mendukung.. videonya yang akan ditampilkan.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Video di HTML</title>
</head>
<body>
<h1>Contoh Video di HTML</h1>
<video controls>
<source src="cat-herd.webm" type="video/webm" />
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
</body>
</html>
3
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Hasilnya:
Pada contoh di atas, kita menuliskan secara langsung nama video yang akan ditampilkan. Ini
karena videonya berada dalam satu folder dengan file HTML.
Jika video tersebut tersimpan di folder yang berbeda, maka perlu ditulis alamat folder atau path-
nya. Misalkan, saya meneruh videonya di dalam folder video. Maka, alamat path yang
digunakan adalah:
4
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
<video>
<source src="video/nama-video.mp4">
</video>
..dan jika videonya berada di website yang berbeda, maka kita harus mengisi atribut src dengan
URL lengkap dari video.
<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>
1.2. Format Video yang Didukung
Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format video yang
didukung:
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.
1.3. Atribut untuk Video
Tag <video> punya beberapa atribut yang bisa diberikan:

Nama Atribut Nilai Fungsi
autoplay true/false Agar video diputar otomatis
5
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Nama Atribut Nilai Fungsi
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.

Contoh:
<video loop="true">
<source src="video.mp4" />
</video>
Bisa disingkat menjadi:
<video loop>
</video>
Jika nilai atribut bernilai false, maka atribut tersebut boleh tidak ditulis atau juga boleh
ditulis.
6
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Contoh:
<video loop="false">
</video>

<video>
</video>
Nah, untuk atribut lainnya, kamu bisa cek di MDN: The Video Embed element.
1.4. Video Sebagai Gambar Animasi Gif
Banyak website modern saat ini menggunakan video sebagai ganti dari animasi gif. Bahkan
juga Google menyarankan untuk menggunakan video daripada gif.2
Mengapa?
Karena ukuran file dari video jauh lebih kecil dibandingkan dengan gif dan juga tentunya akan
mempengaruhi kecepatan download.
Nggak percaya? Mari kita bandingkan:
File cat-herd.gif punya ukuran 3,6 MB setelah saya covert formatnya menjadi MP4 dan
Webm, ukurannya menjadi sangat kecil.
Terbukti kan, file video lebih kecil daripada gif.
Lalu, bagaimana cara membuat video menjadi gambar gif di HTML.
Caranya sama seperti menambahkan video biasa, tapi kita harus mengaktifkan beberapa atribut
seperti autoplay, muted, playsinline dan loop.
7
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Contoh Video sebagai gif</h1>
<video autoplay loop muted playsinline>
<source src="cat-herd.webm" type="video/webm" />
<source src="cat-herd.mp4" type="video/mp4" />
</video>
</body>
</html>
Hasilnya:
8
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
1.5. 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 di srt2vtt.
Sekarang mari kita coba contohnya: video-subtitle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"

/>
</head>
9
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
<body>
<h1>Video Subtitle</h1>
<video controls>
<source src="cat-herd.webm" type="video/webm"/>
<source src="cat-herd.mp4" type="video/mp4"/>
<track src="cat-herd-id.vtt" kind="subtitles" srclang="id"

label="Indonesia"/>
</video>
</body>
</html>
Dan berikut ini isi file: cat-herd-id.vtt

WEBVTT
00:00:00.000 --> 00:00:03.000
Para penunggang kuda.
00:00:04.000 --> 00:00:08.000
Kucing berlari.
10
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Hasilnya:
Catatan penting:
Subtitle tidak akan ditampilkan jika kita membuka file HTML secara langsung dari browser.
Coba perhatikan di bagian address bar, jika di sana ada tulisan File.. berarti kita membuka
file HTML secara langsung.
11
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Namun, jika di address bar ada HTTP atau HTTPS.. itu artinya kita membuka file HTML
melalui web server.
..dan juga jika format file .vtt tidak benar, subtile tidak akan ditampilkan.
Pastikan formatnya valid, silahkan gunakan Live WebVTT Validator untuk pengecekan.
1.6. Menambahkan Video dari Youtube
Saat tidak ingin repot-repot mengubah format video, kita bisa manfaatkan Youtube. Tinggal
upload saja videonya ke Youtube. Nanti kita akan dapat id unik dari video. Id unik ini bisa kita
dapatkan dari URL video.
Contoh: N7iY-jNWeFc
Youtube sendiri sudah punya media player, jadi kita tidak pelu membuatnya dengan
tag <video>. Tag yang kita butuhkan untuk menambahkan video dari Youtube
adalah <iframe>. Tag ini sebenarnya berfungsi untuk menambahkan halaman lain dalam
sebuah frame.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Video dari Youtube</h1>
12
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
<iframe width="560" height="315"

src="https://www.youtube.com/embed/N7iY-jNWeFc"></iframe>
</body>
</html>
Perhatikan URL yang digunakan pada atribut src, di sana kita menggunakan /embed/. Ini
adalah halaman yang digunakan khusus untuk embed video dari Youtube.
Hasilnya:
Sebenarnya ada cara gampangnya..

Pada video Youtube yang ingin kita embed, klik saja tombol share.
13
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
Maka akan muncul opsi untuk share video, pilih saja embed..
..dan kita akan mendapatkan kode HTML untuk embed videonya.

Kode ini bisa kita copy ke file HTML.
3. Contoh Soal dan Pengerjaan/Studi Kasus

4. Soal Mandiri
5. REFERENSI/DAFTAR PUSTAKA
1. Muhardian, Ahmad. 2016. Tutorial HTML untuk Pemula “Belajar HTML dari dasar
hingga bisa hosting web sendiri”. PETANIKODE.COM
https://www.petanikode.com/tutorial/html/
2. Sarwati Rahayu. 2011. Pemrograman Web. Universitas Mercu Buana, Jakarta.
3. Gregorius, Agung. Buku Pintar HTML5 + CSS3 + DreamWeaver CS6. Penerbit:
Jubilee Enterprise. Yogyakarta, 13 September 2012.
4. Lubbers, P., Albers, B., & Salim, F. (2011). Overview of HTML5. In Pro HTML5
Programming (pp. 1-22). Apress.
14
MODUL PEMBELAJARAN
PROGRAM STUDI
TEKNIK INFORMATIKA
5. West, W., & Pulimood, S. M. (2012). Analysis of privacy and security in HTML5
web storage. Journal of Computing Sciences in Colleges, 27(3), 80-87.
6. Zibula, A., & Majchrzak, T. A. (2012, April). Cross-platform development using
HTML5, jQuery mobile, and phonegap: realizing a smart meter application.
In International Conference on Web Information Systems and Technologies (pp.
16-33). Springer, Berlin, Heidelberg.
7. Garaizar, P., Vadillo, M. A., & Lopez-de-Ipina, D. (2012, July). Benefits and pitfalls
of using HTML5 APIs for online experiments and simulations. In 2012 9th
International Conference on Remote Engineering and Virtual Instrumentation
(REV) (pp. 1-7). IEEE.
8. Zibula, A., Majchrzak, T. A., Krempels, K. H., & Cordeiro, J. (2012). Developing a
Cross-platform Mobile Smart Meter Application using HTML5, jQuery Mobile and
PhoneGap. In WEBIST (pp. 13-23).
9. Kim, T., Kim, B., & Kim, J. (2013). Development of a lever learning webapp for an
HTML5-based cross-platform. In Multimedia and Ubiquitous Engineering (pp. 313-
320). Springer, Dordrecht.
10. Brandon, D. (2011). HTML 5 programming: conference tutorial. Journal of
Computing Sciences in Colleges, 26(5), 61-61.
15

Modul Pemograman Web I - Pertemuan 11 - Menampilkan Video Pada HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pemograman Web I - Pertemuan 11 - Menampilkan Video Pada HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PEMBELAJARAN

Mata Kuliah : Pemograman Web

JUDUL TOPIK – Menampilkan Video pada HTML

I. Menampilkan Video pada HTML

1.1. Cara Menambahkan Video di HTML

Kita membutuhkan sebuah media player untuk menampilkan video di HTML.

Tapi, kalau mendukung.. videonya yang akan ditampilkan.

<title>Contoh Video di HTML</title>

<h1>Contoh Video di HTML</h1>

<source src="cat-herd.webm" type="video/webm" />

Browsermu tidak mendukung tag ini, upgrade donk!

1.2. Format Video yang Didukung

Tag <video> punya beberapa atribut yang bisa diberikan:

autoplay true/false Agar video diputar otomatis

Nama Atribut Nilai Fungsi

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

playsinline true/false Untuk memutar video secara ‘inline’

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

<source src="video.mp4" />

Bisa disingkat menjadi:

<source src="video.mp4" />

<source src="video.mp4" />

<source src="video.mp4" />

<title>Contoh Video di HTML</title>

<h1>Contoh Video sebagai gif</h1>

<video autoplay loop muted playsinline>

<source src="cat-herd.webm" type="video/webm" />

<source src="cat-herd.mp4" type="video/mp4" />

1.5. Subtitle untuk Video

<title>Contoh Video di HTML</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0"

<source src="cat-herd.webm" type="video/webm"/>

<source src="cat-herd.mp4" type="video/mp4"/>

<track src="cat-herd-id.vtt" kind="subtitles" srclang="id"

Dan berikut ini isi file: cat-herd-id.vtt

00:00:00.000 --> 00:00:03.000

Para penunggang kuda.

00:00:04.000 --> 00:00:08.000

1.6. Menambahkan Video dari Youtube

<title>Contoh Video di HTML</title>

<h1>Video dari Youtube</h1>

<iframe width="560" height="315"

Sebenarnya ada cara gampangnya..

..dan kita akan mendapatkan kode HTML untuk embed videonya.

3. Contoh Soal dan Pengerjaan/Studi Kasus

Anda mungkin juga menyukai