Cara menggunakan tag html video

Question

Masih mencari cara menampilkan video di halaman web dengan html?

Table of Contents Show

Cara menampilkan video di html
Format Video yang Didukung
Atribut Pada Tag Video
Cara menyematkan video YouTube dalam HTML
Elemen HTML apa untuk memutar video?
Tag apa yang digunakan untuk menyematkan video?
Bagaimana cara menampilkan video di halaman web?
Format video apa yang dapat dimasukkan ke dalam HTML?
Apa fungsi tag putar otomatis?

Kita tahu bahwa video adalah salah satu elemen yang biasanya ada dalam sebuah website. Tidak hanya sebagai elemen yang meningkatkan tampilan web, video juga digunakan untuk menyampaikan informasi tambahan di halaman web

Inilah cara kami menampilkan video di web dengan html

Cara menampilkan video di html

Untuk menampilkan video dengan html, kita dapat menggunakan tag

Kita dapat menggunakan tag ini untuk menampilkan video di halaman web. Untuk cara menggunakannya, lihat struktur kode di bawah ini

Dalam penggunaan tag

Berikut adalah contoh kode aplikasi penggunaan tag video dari html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Menampilkan Video di HTML</title>
</head>
<body>
  <h1>Contoh Menampilkan Video di HTML</h1>
  <video controls>
    <source src="langit.mp4" type="video/mp4" />
  </video>
</body>
</html>

Hasilnya ditampilkan di browser

Kalau dilihat kenapa videonya muncul tapi terlalu besar ya?

Untuk mengatasinya, kita cukup menambahkan atribut width pada tag video. Seperti di bawah ini

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Menampilkan Video di HTML</title>
    </head>
    <body>
      <h1>Contoh Menampilkan Video di HTML</h1>
      
      <!-- contoh atribut width dengan nilai 400 (400 = 400px) -->
      <video controls width="400">
        <source src="langit.mp4" type="video/mp4" />
      </video>
    </body>
    </html>

_

Dengan menambahkan atribut width="400" ke tag video. Maka akan muncul video berukuran 400px pada halaman website yang kita buat, seperti berikut

Ini adalah hasil ketika video dapat diputar di halaman web

Dari contoh di atas, kita menampilkan video dengan file video di folder dengan file html yang kita buat, sebagai berikut

Namun bagaimana jika file video kita buat folder tersendiri kembali di folder video di html, maka penulisan kode pada tag video di atribut crc akan seperti berikut

    <video controls>
        <source src="video/langit.mp4" type="video/mp4" />
    </video>

Kode diatas menampilkan video dengan posisi video berada di folder yang sama dengan file html yang kita miliki, cara ini bisa dikatakan file video tersimpan secara internal di komputer kita

Jika kita sudah mengupload file video tersebut ke website dan akan kita gunakan untuk tampil di website kita sendiri, maka kita tinggal memasukkan url (alamat web video tersebut) ke dalam atribut src pada tag source, seperti berikut

    <video controls>
        <source src="https://res.cloudinary.com/dssknt9vd/video/upload/v1644199674/demo-video-tampil-di-web-dengan-html_dse5se.webm" type="video/mp4" />
    </video>

Format Video yang Didukung

Lalu format video apa saja yang didukung atau support untuk tampil di halaman web?

Format Jenis File Mediamp4video/mp4webmvideo/webmoggvideo/ogg

Jika sewaktu-waktu format file yang anda miliki berbeda dengan ketiga format file yang didukung diatas, maka anda harus merubah terlebih dahulu formatnya menjadi. mp4,. web atau. ogg

Atribut Pada Tag Video

Atribut di bawah ini adalah atribut yang biasanya digunakan pada tag video html

Nama Atribut Nilai/Nilai Pemakaian/Fungsi looptrue/falsevideo dapat diputar berulang kali controltrue/false menampilkan menu kontrol videomutedtrue/false mematikan audio pada video posterpath image menampilkan gambar sampul videoautoplaytrue/false otomatis memutar videoplaysinlinetrue/false memutar video inlinewidthNumber/Number menentukan lebar videoheightNumber/Number menentukan tinggi

Berikut cara menggunakan atribut pada tag video di atas

Jika atribut benar, maka atribut hanya dapat ditulis dengan namanya

    <video controls>
        <source src="video/langit.mp4" type="video/mp4" />
    </video>

atau

    <video controls="true">
        <source src="video/langit.mp4" type="video/mp4" />
    </video>

Namun jika nilainya salah, maka atribut dapat ditulis dengan nilai salah atau tidak perlu ditulis

    <video muted="false">
        <source src="video/langit.mp4" type="video/mp4" />
    </video>

_

atau

    <video>
        <source src="video/langit.mp4" type="video/mp4" />
    </video>

Cara menyematkan video YouTube dalam HTML

Cara menampilkan video dari youtube ke halaman web bisa dilakukan dengan cara yang sederhana, biasanya langkah yang kita lakukan adalah dengan meng-embed video youtube dengan html

apa itu embed?

Arti kata embed dalam Kamus Inggris-Indonesia jika diartikan kkt. (tertanam) 1. implan 2. tongkat. 3. toko

Artinya di dalam web kita bisa menyematkan atau menempelkan link untuk menampilkan video dengan memasukkan url sumber video yang akan kita tampilkan

Bagaimana cara menyematkan atau menampilkan video dari youtube di html?

Kita tinggal menggunakan tag saja dengan atribut src untuk memanggil file, width untuk mengatur lebar ukuran video dan height untuk tinggi videonya.</p><p>Contoh</p><pre><code> <span><span><!</span><span>DOCTYPE</span> <span>html</span><span>></span></span> <span><span><span><</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en<span>"</span></span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> <span><span><span><</span>meta</span> <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><span><</span>title</span><span>></span></span>Menampilkan Video di HTML<span><span><span></</span>title</span><span>></span></span> <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>h1</span><span>></span></span>Contoh Menampilkan Video dari youtube di HTML<span><span><span></</span>h1</span><span>></span></span> <span><span><span><</span>iframe</span> <span>width</span><span><span>=</span><span>"</span>560<span>"</span></span> <span>height</span><span><span>=</span><span>"</span>315<span>"</span></span> <span>src</span><span><span>=</span><span>"</span>https://www.youtube.com/embed/ljzg8vrVlc8<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>YouTube video player<span>"</span></span><span>></span></span><span><span><span></</span>iframe</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span></code></pre>_<p>Mari kita lihat atribut src, yang ada di bagian /embed/, ini adalah url video untuk menyematkan video, yang kemudian mengarahkan web ke id unik setelah URL /embed/, yaitu ljzg8vrVlc8</p><p>ID unik adalah ID video yang akan ditemukan oleh browser pada file video yang disimpan di server YouTube</p><p>Berikut adalah hasil yang ditampilkan dari contoh kode di atas</p><p><div class="imgBox"><img alt="Cara menggunakan tag html video" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-tag-html-video---aHR0cHM6Ly9pMC53cC5jb20vYmxvZ2dlci5nb29nbGV1c2VyY29udGVudC5jb20vaW1nL2EvQVZ2WHNFanJ5VG4weDVmWVIzMnNjNXpvaWpiMVp2emc3MXBlQW5rVkZZZDVmaS1RS3poemRhYW5LcmtYZ3ktLUdFWkVJN2hZbGplTHFyZ0kyWEN4UnVrMURxZnlyUHV0bVQxb3FCSG1BT0hTLVJsb2dYMVJCeG0wNjdWM3A5b294bms4U0pkSER1NjhmcUlRQjdzdXIxVjBuOXdjNEFmNi1BQ19ZMzF0M1o5UFJnajNRUnpSeUlYX1VrQm0xUWZ3PXc0MDAtaDMyNg==.webp" ></div></p><p>Lalu bagaimana cara mendapatkan link embed video youtube?</p><p>1. kita tinggal mengunjungi platform youtube baik di web maupun melalui aplikasi</p><p>2. kemudian cari video yang akan kita gunakan untuk ditampilkan di halaman web</p><p>3. klik tombol bagikan di bawah video dan pilih sematkan, maka YouTube akan secara otomatis membuatkan kami tautan dan kode html untuk menyematkan video</p><p>Demikian penjelasan saya kali ini, semoga bermanfaat bagi teman-teman yang sedang belajar html dasar. Terima kasih</p><div></div> <div></div> <h3 id="elemen-html-apa-untuk-memutar-video">Elemen HTML apa untuk memutar video?</h3> <div>adapun elemen html5 yang akan kita gunakan untuk membuat pemutar video adalah elemen <span><video>..</span> <span></video></span> . </div> <h3 id="tag-apa-yang-digunakan-untuk-menyematkan-video">Tag apa yang digunakan untuk menyematkan video?</h3> <div>Elemen HTML <span>tag</span> <span>video</span> > adalah <span>tag</span> pada HTML yang <span>digunakan untuk menyisipkan</span> data <span>dalam</span> bentuk <span>video</span> menjadi <span>dalam</span> halaman HTML. </div> <h3 id="bagaimana-cara-menampilkan-video-di-halaman-web">Bagaimana cara menampilkan video di halaman web?</h3> <div><div><span>Cara Menampilkan Video di Situs Web</span> . </div> <div>Buka youtube atau klik disini</div> <div>Temukan video yang sesuai yang Anda butuhkan dengan mengetikkan kata kunci atau membuka video yang ada</div> <div>Buka video yang salah dari hasil pencarian</div> <div>Klik Bagikan di bagian bawah video</div> <div>Klik Sematkan</div> <div>Salin teks di kotak teks</div> </div> <h3 id="format-video-apa-yang-dapat-dimasukkan-ke-dalam-html">Format video apa yang dapat dimasukkan ke dalam HTML?</h3> <div>Beberapa <span>format video</span> didukung oleh <span>HTML</span> << / elemen a> <span>video</span> >. <span>File</span> MPEG 4, dengan <span>video</span> codec H264, dan codec audio AAC. <span>File</span> Ogg, dengan <span>video</span> Theora codec dan Vorbis audio codec. <span>File</span> WebM dengan <span>video</span> codec VP8 dan codec audio Vorbis. </div> <h3 id="apa-fungsi-tag-putar-otomatis">Apa fungsi tag putar otomatis?</h3> <div>2. <span>putar otomatis</span> . </div></p></td></tr></table> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video yang berhubungan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/wQrg_EwH91I?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen>

kode html