Cara membuat video autoplay di html

Question

audio merupakan sebuah konten suara yang di tanamkan dalam halaman website. audio bisa berisi satu atau lebih audio.

Table of Contents Show

Contoh kode audio
Membuat html audio autoplay
Memutar audio berulang-ulang
Menghilangkan suara audio
Hidden audio html
Apa elemen HTML yang benar untuk memutar file video?
Apa kepanjangan dari HTML dan apa fungsinya?
Manakah di bawah ini yang merupakan tag untuk menampilkan atau memanggil link embed dari Youtube?

file audio dimasukan ke dalam tag <source> yang dibungkus oleh tag <audio>.

atribut controls wajib di berikan ke dalam tag audio untuk menampilkan tombol kontrol audio seperti play, pause, volume, stop dan mengatur menit audio.

Baca juga : Cara memisahkan elemen konten pada html

browser secara default menampilkan file audio dengan format yang pertama atau audio yang terlebih dahulu dipanggil, jika file pertama tidak didukung otomatis akan memainkan file audio yang kedua dan seterusnya.

tambahkan tag <p> berisi pemberitahuan jika format audio tidak di dukung oleh browser.

apabila hanya memiliki satu file bisa menggunakan satu format saja, disarankan menggunakan format .mp3

hanya ada tiga format audio yang didukung, mp3, wav, dan ogg.

BrowserMp3WavOggChromeYAYAYASafariYAYATIDAKEdge/IEYAYAYAFirefoxYAYAYAOperaYAYAYAYa artinya di dukung oleh browser sedangkan tidak , tidak di dukung oleh browser

Contoh kode audio

Coba Script

<!DOCTYPE html>
<html>
<head>
    <title> audio pada html </title>
</head>
<body>
    <audio controls>
        <source src="/folder/audio.wav" type="audio/wav">
        <source src="/folder/audio.ogg" type="audio/ogg">
        <source src="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
        <!--Tulisan akan muncul jika tak ada file yang didukung oleh browser -->
        <p>
            Audio tidak disupport browser
        </p>
    </audio>
</body>
</html>



Code language: HTML, XML (xml)

klik tombol coba script untuk mencobanya nanti akan muncul tampilan seperti diatas

tag <source> merupakan sumber file audio yang akan dimuat, ditambah atribut src=”folder/audio.wav” , src untuk menentukan lokasi file audio.

atribut type untuk mendefinisikan kode format medianya.

Membuat html audio autoplay

script audio html untuk membuat file audio berputar secara otomatis bisa menggunakan atribut autoplay.

ketika menambahkan atribut autoplay maka atribut itu bernilai true atau autoplay=”true”

sedangkan jika tidak ditambahkan akan bernilai false alias tidak ada atributnya.

coba tambahkan didalam tag <audio autoplay> maka ketika membuka pertama kali atau jalankan scriptnya audio akan secara otomatis memutar audionya.

<meta charset="utf-8">    <audio controls autoplay>
        <source src="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
        <!--Tulisan akan muncul jika tak ada file yang didukung oleh browser -->
        <p>
            Audio tidak disupport browser
        </p>
    </audio>
Code language: HTML, XML (xml)

Memutar audio berulang-ulang

kadang kita pernah mendengarkan alarm yang terus berulang sampai kita terbangun dalam tidur.

Dengan menambahkan atribut loop maka audio akan terus memutar berulangkali tanpa berhenti.

    <audio controls loop>
        <source src="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
    </audio>
Code language: HTML, XML (xml)

ketika audio telah sampai ke detik 11, maka akan kembali lagi dimulai dari nol.

Menghilangkan suara audio

apabila kita ingin sebuah audio pertama kali di tampilkan dalam keadaan tidak ada suara, cara insert audio tersebut dengan menggunakan atribut muted.

cukup tambahkan atribut muted di tag audio, seperti dibawah ini.

    <audio controls autoplay muted>
        <source src="https://thohirdev.com/upload/bird.mp3" type="audio/mpeg">
    </audio>
Code language: HTML, XML (xml)

audio akan senyap walaupun audio dijalankan. secara default volume suara akan terlihat ikon centang untuk menandakan sebuah suara tidak berbunyi.

Hidden audio html

kadang kita ingin menambahkan audio ketika pertama kali pengguna membuka website, tetapi tidak ada kontrol audio untuk menghentikannya.

jika kita pernah membuka sebuah website yang di deface biasanya akan disisipi suara yang bermaksud untuk menyampaikan informasi atau maksud anonymous tersebut.

Apa elemen HTML yang benar untuk memutar file video?

adapun element html5 yang akan kita gunakakan untuk membuat pemutar video adalah element <video>.. </video>.

Apa kepanjangan dari HTML dan apa fungsinya?

HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web.

Manakah di bawah ini yang merupakan tag untuk menampilkan atau memanggil link embed dari Youtube?

Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah <iframe> . Tag ini sebenarnya berfungsi untuk menambahkan halaman lain dalam sebuah frame. Perhatikan URL yang digunakan pada atribut src , di sana kita menggunakan /embed/ .

kode html