Belajar Pemrograman Bersama Portal Coding

Belajar berbagai pemrograman secara gratis dan praktis agar cepat mahir.

Mulai Belajar

Menampilkan Video didalam HTML.

Tanggal Upload : 2020-04-28 03:14:20

Diupload Oleh : Ageng Prayoga


# html # html dan css

menampilkan video didalam html

Menampilkan Video didalam dokumen HTML

 

Kembali lagi bersama Portal Coding.

Kemarin kita telah mempelajari bagaimana cara menampilkan gambar didalam dokumen html. Juga beberapa hal dalam pembangunan sebuah halaman html. Seperti struktur dasar, heading, link, paragraf, serta kutipan. Yang dimana semua itu adalah untuk memodifikasi teks dalam dokumen html. Nah pada pembahasan kali ini, yang kita bahas adalah menampilkan video didalam dokumen html. 

Bagaimana caranya? Simak pembahasannya berikut ini.

Didalam dokumen html, selain menampilkan gambar, kita juga dapat menampilkan file video pada dokumen tersebut, dan video pun akan tampil sesuai bentuk dan ukurannya, sama seperti gambar.

Adapun tag yang digunakan untuk menampilkan gambar didalam dokumen html ini adalah tag <video /> . Dengan menggunakan tag <video /> ini, kita bisa menampilkan gambar sesuai dengan source atau sumber yang telah kita definisikan didalam atribut pada tag tersebut seperti halnya tag gambar.

Namun, untuk atribut src=" " pada tag <video />  tidak berfungsi lagi pada browser-browser versi terbaru, hal ini dikarenakan seluruh browser sudah mendukung html5 sepenuhnya, sehingga beberapa tag dan atribut dari html versi lama ada yang tidak berfungsi, contohnya seperti atribut tersebut.

Lalu bagaimana caranya agar video dapat tampil di dokumen html? Caranya gampang, kita tinggal menambahkan tag <source />  . Didalam tag ini kita menambahkan atribut src=" " agar video dapat ditampilkan didalam dokumen html.

Sintaks dasar tag :

 

<video controls>
      <source src="sumber video" type="video/format video">
    </video>

 

Atribut pada tag <video />  dan <source />   

Pada tag <video />

 

autoplay


Berfungsi untuk mulai memutar video secara otomatis sesegera mungkin tanpa berhenti.

 

controls


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

 

height


Berfungsi untuk menentukan (ukuran) tinggi pemutar video (video player).

 

muted


Berfungsi untuk menginstruksikan browser untuk membisukan (tanpa suara) video.

 

loop


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

 

 

Pada tag <source />

 

src


Berfungsi untuk menentukkan URL yang mengarah pada sumber video file berada (disimpan).

 

type


Berfungsi untuk menentukkan type dari file apakah video atau audio dan juga menentukan format file, apakah mp4,mp3, ogg, kmv, dan lain sebagainya.

 

 

Saat kita akan mendefinisikan sumber dari video (link video tersebut), sebagiknya kita mengelompokkan file html ini dengan gambar didalam 1 folder. Strukturnya foldernya seperti berikut.

 

=> belajar-html
   |
    -> index.html
   |
    => img
       |
        -> nama-img.jpg
   |
    => video
       |
        -> nama-video.mp4

 

Note : => (folder)

          -> (file)

 

Contoh penggunaan tag <video />

 


  <html>
    <head>
      <meta charset="utf-8">
      <title>Menampilkan video didalam HTML</title>
    </head>
    <body>
      <h1>Menampilkan Video</h1>
      <br>
      <video controls>
        <source src="video/13QtZJtgEfF2loh3DX5d8xs-ctMtdiKZW.mp4" type="video/mp4">
      </video>
    </body>
  </html>

 

Saat dokumen dibuka, maka video akan tampil pada halaman html tersebut, seperti berikut ini.

 

menampilkan video pada dokumen html

 

Demikianlah tutorial kali ini, silahkan tunggu artikel selanjutnya mengenai pembahasan HTML.

 

Selanjutnya :

=> Menjalankan Audio dialam HTML

Advertisement



Tentang Portal Coding

Tentang Portal Coding

Portal Coding adalah situs web yang membahas mengenai berbagai macam bahasa pemrograman baik versi web, desktop maupun mobile secara lengkap.

Portal Coding On Youtube

Ayo subscribe channel Portal Coding di Youtube. Dichannel ini kami menyediakan berbagai tutorial dalam bentuk video. Agar kita lebih mudah belajar pemrograman. Klik disini untuk subscribe.

Subscribe