{"id":824,"date":"2022-01-07T10:24:14","date_gmt":"2022-01-07T03:24:14","guid":{"rendered":"https:\/\/duniacoding.info\/?p=824"},"modified":"2022-01-07T10:24:16","modified_gmt":"2022-01-07T03:24:16","slug":"menambahkan-video-html","status":"publish","type":"post","link":"https:\/\/duniacoding.id\/blog\/menambahkan-video-html\/","title":{"rendered":"Belajar HTML #8 : Menambahkan Video Html"},"content":{"rendered":"\n

Hallo temen temen, kali ini kita akan belajar menambahkan video html. Video merupakan elemen penting dari sebuah website. Dengan adanya video kita dapat memberikan pesan bukan dalam bentuk tulisan sehingga dapat di lihat oleh pengunjung website kita. Dulu awalnya sangat sulit untuk menambahkan sebuah video di dokumen html. Karena besarnya ukuran yang bisa digunakan. Pada masa iru, untuk menambahkan video di html perlu menggunakan plugin seperti flash. Teknologi ini dapat berjalan dengan baik hanya saja terdapat issue keamanan aksesibilitas, dll. <\/p>\n\n\n\n

Sebelumnya buat kalian yang ingin belajar form html bisa ketulisan saya sebelumnya Belajar HTML #7 : Membuat Form Html<\/a><\/p>\n\n\n\n

Sekarang sudah beda karena ada html versi 5. Kita bisa memakai element untuk menangani penambahan vide tersebut yaitu tag <video>. <\/p>\n\n\n\n

Cara Menambahkan Video Html<\/h2>\n\n\n\n

Untuk cara penulisannya seperti ini.<\/p>\n\n\n

\n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <title>Video Html<\/title>\n<\/head>\n<body>\n  <h1>Contoh Video di HTML<\/h1>\n  <video controls>\n    <source src="assets\/tutorial.mp4" type="video\/webm"\/>\n    Browsermu tidak mendukung tag ini, silahkan upgrade\n  <\/video>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Pembahasan : <\/p>\n\n\n\n
  • Atribut controls untuk untuk menampilkan pengaturan video. Seperti kontrol mulai, stop, menaikan volume dll.<\/li>
  • Atribut src berguna untuk menambahkan alamat atau path dari video yang diinginkan. Hampir sama cara kerjanya dengan tag img.<\/li>
  • Atribut type untuk mengatur format video<\/li>
  • Elemen paragrah yang berada pada elemen <video> disebut sebagai fallback content, yang berarti paragraf ini akan ditampilkan jika browser pengguna tidak mendukung penguna elemen <video><\/li>
  • <\/li><\/ul>\n\n\n\n
    Disini saya membuat folder asset, oleh karena itu pemanggilanya seperti diatas jika folder yang temen temen buat berbeda maka menyesuaikan.<\/p>\n\n\n\n
    Selain menggunakan alamat folder kita bisa menggunakan alamt url juga gaes. Link url nya kita letakan di atribut srcnya.<\/p>\n\n\n
    \n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <title>Video Html<\/title>\n<\/head>\n<body>\n  <h1>Contoh Video di HTML<\/h1>\n  <video controls>\n    <source src="https:\/\/www.w3schools.com\/html\/mov_bbb.mp4" type="video\/webm"\/>\n    Browsermu tidak mendukung tag ini, silahkan upgrade\n  <\/video>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
    Format Video Yang Didukung<\/h2>\n\n\n\n
    Perlu kita ketahui gaes tidak semua format video dapat ditampilkan di html. Nah apa aja sih format yang didukung?, berikut ini adalah format vide yang di dukung.<\/p>\n\n\n\n
    <\/td><\/td><\/tr>
    Format FILE                                                                                   Media Type

    MP4                                                                                               video\/mp4

    WebM                                                                                            video\/webm
     
    Ogg                                                                                                video\/ogg  <\/td>    		<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Jika kamu punya video degan format yang berbeda dari ketiga format tersebut, maka kamu harus mengubahnya agar bisa ditambahkan ke HTML.<\/p>\n\n\n\n
    Atribut Pendukung<\/h2>\n\n\n\n
    Selain atribut yang sudah kita gunakan tadi. Tag video memiliki beberapa atribut pendukung. List atribut video :<\/p>\n\n\n\n
    <\/td><\/td><\/tr>
    Nama Atribut                                                   Nilai                                       Fungsi

    autoplay                                                           true\/false                               Agar video di putar otomatis

    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<\/td>    		<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Atribut yang bernilai bolean memiliki nilai default true sehingga jika memang yang kita inginkan adalah bernilai true kita cukup menuliskan saja namanya.<\/p>\n\n\n\n
    contoh : <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Video Html<\/title>\n<\/head>\n<body>\n  <h1>Contoh Video di HTML<\/h1>\n<video controls loop=\"true\">\n    <source src=\"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" type=\"video\/webm\"\/>\n    Browsermu tidak mendukung tag ini, silahkan upgrade\n  <\/video>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Bisa disingkat menjadi : <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Video Html<\/title>\n<\/head>\n<body>\n  <h1>Contoh Video di HTML<\/h1>\n<video controls>\n    <source src=\"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" type=\"video\/webm\"\/>\n    Browsermu tidak mendukung tag ini, silahkan upgrade\n  <\/video>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Jika atribut yang diiinginkan bernilai false, maka atribut tersebut boleh tidak ditulis atau juga boleh ditulis.<\/p>\n\n\n\n
    contoh : <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Video Html<\/title>\n<\/head>\n<body>\n  <h1>Contoh Video di HTML<\/h1>\n<video controls loop=\"false\">\n    <source src=\"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" type=\"video\/webm\"\/>\n    Browsermu tidak mendukung tag ini, silahkan upgrade\n  <\/video>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Menjadi : <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Video Html<\/title>\n<\/head>\n<body>\n  <h1>Contoh Video di HTML<\/h1>\n<video controls>\n    <source src=\"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" type=\"video\/webm\"\/>\n    Browsermu tidak mendukung tag ini, silahkan upgrade\n  <\/video>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Jangan Menggunakan Gif lagi<\/h2>\n\n\n\n
    Banyak website modern saat ini menggunakan video sebagai ganti dari animasi gif. Bahkan google pun juga menyarankan untuk menggunakan video dari pada gif. Loh kenapa ?.  Karena ukuran video jauh leih kecil dibandingkan gif dan juga tentunya akan mempengaruhi kecepatan download. Bagaimana menjadikan video menjadi seperti gif ?<\/p>\n\n\n\n
    Cara sama seperti kita menambhak video biasa hanya saja kita perlu mengaktifkan beberapa atribut yang tadi sudah kita pelajari yaitu autoplay, muted, playinline dan loop. Dan juga kita hilangkan atribut controls nya<\/p>\n\n\n\n
    contoh : <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Video Html<\/title>\n<\/head>\n\n<body>\n  <h1>Contoh Video di HTML<\/h1>\n  <video autoplay loop muted playsinline>\n    <source src=\"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" type=\"video\/webm\" \/>\n    Browsermu tidak mendukung tag ini, silahkan upgrade\n  <\/video>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
    Maka jika berhasil video akan menjadi nampak seperti gif. Tetapi saya menggunakan video berdurasi 10 detik ya gaes.<\/p>\n\n\n\n
    Menambahkan Video Youtube<\/h2>\n\n\n\n
    Mungkin teman teman bertanya bagaimana jika video tersebut dari youtube apakah bisa menggunakan link nya ? atau bagaimana.<\/p>\n\n\n\n
    Caranya cukup mudah gaes. Kita tinggal mengcopy id unik dari video. Id unik ini bisa kita dapatkan dari URL video. Youtube sudah memiliki media player sendiri, yang artinya kita tidak perlu membuatnya dengan tag <video>.<\/p>\n\n\n\n
    Ada tag lagi untuk video youtube yaitu iframe. Sebenarnya tag ini berfungsi untuk menambahkan halaman lain dalam sebuah frame.<\/p>\n\n\n\n
    Langkah – langkah :<\/h4>\n\n\n\n
    \"\"
    Klik bagikan<\/figcaption><\/figure>\n\n\n\n
    \"video
    klik sematkan<\/figcaption><\/figure>\n\n\n\n
    \"video
    Salin bagian sematkan video dan paste <\/figcaption><\/figure>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Video Html<\/title>\n<\/head>\n\n<body>\n  <h1>Video dari youtube<\/h1>\n  <iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/lmRisuGYGPM\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/body>\n\n<\/html>\n<\/code><\/pre>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Hasilnya akan menjadi seperti diatas.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Keren ya gaess, mungkin sampai sini dulu saja tutorialnya. Semangat Ngoding<\/p>\n","protected":false},"excerpt":{"rendered":"
    Hallo temen temen, kali ini kita akan belajar menambahkan video html. Video merupakan elemen penting dari sebuah website. Dengan adanya video kita dapat memberikan pesan bukan dalam bentuk tulisan sehingga dapat...<\/p>\n","protected":false},"author":3,"featured_media":849,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-824","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/comments?post=824"}],"version-history":[{"count":3,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/824\/revisions"}],"predecessor-version":[{"id":848,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/824\/revisions\/848"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media\/849"}],"wp:attachment":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media?parent=824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/categories?post=824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/tags?post=824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}