Cara menggunakan html5 online editor

Question

Pada tutorial 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.

Table of Contents Show

Cara Menambahkan Video di HTML
Format Video yang Didukung
Atribut untuk Video
Video Sebagai Gambar Animasi Gif
Subtitle untuk Video
Menmabahkan Video dari Youtube
Apa Selanjutnya?
Buat HTML pake apa?
Sebutkan editor apa saja yang bisa digunakan untuk mengoperasikan HTML?
Apakah halaman HTML dapat dibuka disemua browser?
Apa yang dimaksud web HTML editor?

Konten lainnya yang bisa ditambahkan di HTML adalah audio dan juga video.

Nah, pada tutorial ini.. kita akan belajar cara menambahkan video di HTML.

Mari kita mulai…

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>
<source src="video/nama-video.mp4">
</video>

0.

Jika tag video di buka pada browser yang tidak mendukungnya, maka teks

<video>
<source src="video/nama-video.mp4">
</video>

1 akan ditampilkan.

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>

File videonya kamu bisa download di: 🎞 cat-herd.webm

Hasilnya:

Live DemoBrowsermu tidak mendukung tag ini, upgrade donk!

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>
<source src="video/nama-video.mp4">
</video>

2. Maka, alamat path yang digunakan adalah:

<video>
<source src="video/nama-video.mp4">
</video>

..dan jika videonya berada di website yang berbeda, maka kita harus mengisi atribut

<video>
<source src="video/nama-video.mp4">
</video>

3 dengan URL lengkap dari video.

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

Format Video yang Didukung

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

Format FILEMedia TypeMP4video/mp4WebMvideo/webmOggvideo/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>
<source src="video/nama-video.mp4">
</video>

0 punya beberapa atribut yang bisa diberikan:

Nama AtributNilaiFungsi

<video>
<source src="video/nama-video.mp4">
</video>

5

<video>
<source src="video/nama-video.mp4">
</video>

6/

<video>
<source src="video/nama-video.mp4">
</video>

7Agar video diputar otomatis

<video>
<source src="video/nama-video.mp4">
</video>

8

<video>
<source src="video/nama-video.mp4">
</video>

6/

<video>
<source src="video/nama-video.mp4">
</video>

7Untuk mengaktifkan control video player

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

1

<video>
<source src="video/nama-video.mp4">
</video>

6/

<video>
<source src="video/nama-video.mp4">
</video>

7Untuk memutar video terus menerus

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

4

<video>
<source src="video/nama-video.mp4">
</video>

6/

<video>
<source src="video/nama-video.mp4">
</video>

7Untuk menonaktifkan audio

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

7Image PathUntuk menentukan gambar cover dari video

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

8 &

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

9angkaUntuk menentukan tinggi dan lebar video

<video loop="true">
<source src="video.mp4" />
</video>

0

<video>
<source src="video/nama-video.mp4">
</video>

6/

<video>
<source src="video/nama-video.mp4">
</video>

7Untuk memutar video secara ‘inline’

Jika atribut bernilai

<video>
<source src="video/nama-video.mp4">
</video>

6, maka ia boleh ditulis namanya saja.

Contoh:

<video loop="true">
<source src="video.mp4" />
</video>

Bisa disingkat menjadi:

<video loop>
<source src="video.mp4" />
</video>

Jika nilai atribut bernilai

<video>
<source src="video/nama-video.mp4">
</video>

7, maka atribut tersebut boleh tidak ditulis atau juga boleh ditulis.

Contoh:

<video loop="false">
<source src="video.mp4" />
</video>

<!-- boleh juga seperti ini: -->
<video>
<source src="video.mp4" />
</video>

Nah, untuk atribut lainnya, kamu bisa cek di .

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.

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.gifpunya ukuran

<video loop="true">
<source src="video.mp4" />
</video>

5 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

<video>
<source src="video/nama-video.mp4">
</video>

5,

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

4,

<video loop="true">
<source src="video.mp4" />
</video>

0 dan

<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>

1.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Video di HTML</title>
</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:

Live DemoBrowsermu tidak mendukung tag ini, upgrade donk!

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

<video loop>
<source src="video.mp4" />
</video>

0. Tag ini memiliki atribut

<video>
<source src="video/nama-video.mp4">
</video>

3 yang akan digunakan untuk menambahkan file subtitle.

Format file subtitle untuk video di dalam HTML adalah WebVTT (

<video loop>
<source src="video.mp4" />
</video>

2) atau Web Video Text Track. File

<video loop>
<source src="video.mp4" />
</video>

2 ini bisa dibuat dengan teks editor.

Jika kamu punya subtitle dengan format SubRip Text (

<video loop>
<source src="video.mp4" />
</video>

4), kamu bisa mengubahnya menjadi

<video loop>
<source src="video.mp4" />
</video>

2 di srt2vtt.

Sekarang mari kita coba contohnya:

<video loop>
<source src="video.mp4" />
</video>

6

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Video di HTML</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<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:

<video loop>
<source src="video.mp4" />
</video>

7

WEBVTT

0
00:00:00.000 --> 00:00:03.000
Para penunggang kuda.

1
00:00:04.000 --> 00:00:08.000
Kucing berlari.

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.

Namun, jika di address bar ada HTTP atau HTTPS.. itu artinya kita membuka file HTML melalui web server.

..dan juga jika format file

<video loop>
<source src="video.mp4" />
</video>

2 tidak benar, subtile tidak akan ditampilkan.

Pastikan formatnya valid, silahkan gunakan Live WebVTT Validatoruntuk pengecekan.

Menmabahkan 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:

<video loop>
<source src="video.mp4" />
</video>

9

Youtube sendiri sudah punya media player, jadi kita tidak pelu membuatnya dengan tag

<video>
<source src="video/nama-video.mp4">
</video>

0.

Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah

<video loop="false">
<source src="video.mp4" />
</video>

<!-- boleh juga seperti ini: -->
<video>
<source src="video.mp4" />
</video>

1. Tag ini sebenarnya berfungsi untuk menambahkan halaman lain dalam sebuah frame.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Video dari Youtube</h1>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/N7iY-jNWeFc"></iframe>
</body>
</html>

Perhatikan URL yang digunakan pada atribut

<video>
<source src="video/nama-video.mp4">
</video>

3, di sana kita menggunakan

<video loop="false">
<source src="video.mp4" />
</video>

<!-- boleh juga seperti ini: -->
<video>
<source src="video.mp4" />
</video>

3. 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.

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.

Apa Selanjutnya?

Kita sudah belajar cara menampilkan video. Baik itu video dari file lokal dan juga video dari Youtube.

Buat HTML pake apa?

Adapun peralatan yang harus kamu persiapkan adalah:.

Teks Editor untuk Menulis HTML. Teks editor akan kita gunakan untuk menulis kode-kode HTML. Kamu bebas menggunakan teks editor apapun. ... .

Web Browser untuk Membuka HTML. Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebeas menggunakan web browser apapun..

Sebutkan editor apa saja yang bisa digunakan untuk mengoperasikan HTML?

Berikut ini beberapa aplikasi text editor lainnya yang bisa digunakan untuk belajar penulisan kode HTML..

Notepad++.

BracketsText..

Sublime Text Editor..

Visual Studio Editor..

Emacs..

Netbeans..

Aptana Studio..

Apakah halaman HTML dapat dibuka disemua browser?

Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

Apa yang dimaksud web HTML editor?

HTML editor adalah sebuah program komputer yang digunakan untuk membuat sekaligus mengedit kode HTML. HTML sendiri singkatan dari Hypertext Markup Language. Walaupun pondasi pembuatan website dapat menggunakan aplikasi text editor manapun, namun tidak jarang programmer yang menggunakan HTML editor.

kode html