Cara membuat pemutar video di html

Question

Table of Contents Show

Deskripsi Penjelasan HTML video
Video Formats Beberapa format video yang didukung oleh HTML <video> element.
Attributes Atribut HTML Tag <video>
Global Attributes Atribut Secara Global (Keseluruhan)
Event Attributes Atribut event (Peristiwa)
Example Contoh HTML <video> element
Contoh Lengkap
Apa elemen HTML untuk memutar video?
Format video apa saja yang dapat dimasukan ke dalam HTML?
Tag apa yang digunakan untuk menyisipkan video?
Apakah fungsi atribut control dalam tag video?

Cari disini...
Browse
- Katalog Kelas
  Ikuti materi yang kamu butuhkan
- Roadmap
  Belajar online dengan terarah
- Bootcamp
  Codepolitan x Catamyst
Explore
- Tutorial & Artikel
  Temukan Artikel menarik
- Podcast
  Podcast seputar pemrograman
- Webinar
  Ikuti Berbagai Webinar
- Event
  Temukan Event menarik
- Beasiswa
  Program Beasiswa
- Discord
  Komunitas Discord
- Forum
  Diskusi antar Programmer
- Leaderboard
  Ranking siswa Codepolitan
Partnership
- For Company
  Solusi tepat untuk perusahaan
- For School
  Kerjasama untuk sekolah
- For Campus
  Kerjasama untuk kampus
- For Mentor
  Peluang penghasilan untuk mentor
Career

LoginRegister

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML video tag. Tutorial dan panduan mengenai element <video>...</video> yang digunakan untuk memutar video. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <video>.

Deskripsi Penjelasan HTML video

HTML <video> element digunakan untuk merujuk sumber file video, sehingga dapat diputar (dimainkan) pada halaman web.

Dalam merujuk sumber file video, digunakan attribute src yang menunjukkan source (sumber) yang mengarah pada link file video tersebut berada (disimpan), ditulis baik didalam element <video> itu sendiri atau didalam element <source> yang merepresentasikan sumber video lebih dari satu format, sehingga browser dapat memilih format video yang tepat (didukung).

Didalam element <video> dapat ditulis konten (teks), untuk browser lawas yang tidak mendukung HTML5 video. Teks ini, akan tampil sebagai ganti dari video yang tidak dapat diputar.

HTML <video> merupakan tag yang baru diperkenalkan pada HTML5.

Video Formats Beberapa format video yang didukung oleh HTML <video> element.

Format	Penjelasan	Extensi File	MIME Types
MP4	File MPEG 4, dengan video codec H264, dan audio codec AAC.	.mp4	video/mp4
Ogg Theora	File Ogg, dengan video codec Theora dan audio codec Vorbis.	.ogm / .ogv / .ogg	video/ogg
WebM	File WebM dengan video codec VP8 dan audio codec Vorbis.	.webm	video/webm

Adapun untuk dukungan format video setiap browser berbeda-beda.

Browser	MP4	Ogg	WebM
Chrome
Firefox
Internet Explorer	.
Safari
Opera

Attributes Atribut HTML Tag <video>

Menginstruksikan browser untuk mulai memutar video secara otomatis sesegera mungkin tanpa berhenti.

Menginstruksikan browser untuk menampilkan antarmuka (user interface) untuk video control (seperti menampilkan tombol putar (play), kontrol volume dan lain sebagainya).

Menentukan (ukuran) tinggi pemutar video (video player).

Menginstruksikan browser untuk memutar ulang video ketika selesai (mencapai waktu akhir putar).

Menginstruksikan browser untuk membisukan (tanpa suara) video.

Menentukkan URL yang merujuk sebuah gambar yang akan dijadikan poster frame yang akan tampil sebelum video diputar (mengklik tombol "play").

Menginstruksikan browser untuk menentukkan jika dan bagaimana penulis memuat video ketika halaman web dimuat (termasuk mengunduh (download) video dan metadata-nya) demi pengalaman menjelajah yang baik untuk user.

Menentukkan URL yang mengarah pada sumber video file berada (disimpan).

Menentukkan (ukuran) lebar pemutar video (video player).

Global Attributes Atribut Secara Global (Keseluruhan)

<video> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes Atribut event (Peristiwa)

<video> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example Contoh HTML <video> element

Contoh 1:

HTML video element sederhana.

<video src="/media/video/myVideo.mp4" controls>
</video>

Contoh 2:

HTML video element yang merujuk format video lebih dari satu didalam element <source> untuk dukungan browser yang berbeda-beda.

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

Dibawah ini, contoh berikut editor untuk belajar HTML video dengan track dan .vtt file yang dapat digunakan untuk menulis caption atau judul video, dapat pula digunakan untuk menulis subtitle yang sering kita lihat pada video karaoke.

Untuk lebih jelasnya, silahkan pelajari juga mengenai HTML <track> element.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

Harap diperhatikan: Untuk contoh diatas, apabila subtitle tidak terlihat di dalam video, kemungkinan browser Anda tidak mendukung HTML <track> element. Gunakan browser (Google Chrome) terbaru untuk mencobanya.

Apa elemen HTML untuk memutar video?

kita akan menggunakan element dari html5 untuk dapat memutar file video langsung pada halaman html. adapun element html5 yang akan kita gunakakan untuk membuat pemutar video adalah element <video>.. </video>.

Format video apa saja yang dapat dimasukan ke dalam HTML?

Beberapa format video yang didukung oleh HTML <video> element. File MPEG 4, dengan video codec H264, dan audio codec AAC. File Ogg, dengan video codec Theora dan audio codec Vorbis. File WebM dengan video codec VP8 dan audio codec Vorbis.

Tag apa yang digunakan untuk menyisipkan video?

Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah <iframe> .

Apakah fungsi atribut control dalam tag video?

Atribut control berfungsi untuk menambahkan kontrol pada video seperti putar, jeda, dan volume. Sebaiknya selalu menyertakan atribut lebar (width) dan tinggi (height).

kode html HTML video Tag HTML video HTML video YouTube