Begini Cara Menambahkan Video Autoplay Dengan Menggunakan Tag HTML
Video adalah salah satu komponen yang dapat Anda masukan ke dalam website yang sedang Anda bangun. Video tersebut pun dapat difungsikan sedemikian rupa bahkan menyematkan fitur autoplay sehingga ketika orang lain mengunjungi website Anda, video tersebut akan otomatis play dengan sendirinya.
Setelah sebelumnya kita mempelajari tentang memasukan gambar dengan tag HTML, maka tutorial kali ini kita lanjutkan untuk tag HTML untuk menambah vidio.
Sebenarnya untuk dapat menyematkan video dengan fitur autoplay itu mudah saja. Anda tinggal menambahkan code “autoplay” di line HTML Anda. Hanya saja ternyata, code itu saja tidak cukup untuk membuat website Anda menjalankan fitur autoplay di semua perangkat. Apalagi nih, perangkat iOS.
Perangkat iOS yang didukung dengan browser bawaan mereka Safari, memerlukan ekstra kerja cerdas untuk dapat tetap menyematkan video autoplay tersebut.
Lantas, bagaimana cara menambahkan video autoplay dengan mudah dan menggunakan code dasar HTML?
Mudah, yang harus Anda lakukan adalah menambahkan code ini:
video playsinline autoplay muted loop
Bila diperhatikan, di sana terdapat perintah untuk melakukan “mute” atau mensunyikan video sehingga tidak ada suara yang terdengar dari video tersebut. Yup benar. Hal tersebut dilakukan agar video tersebut dapat dimainkan disegala perangkat dengan fitur autoplay tersebut.
Pasalnya, sejak adanya update HTML terakhir, video tidak dapat melakukan autoplay (terutama dalam perangkat mobile) apabila mereka tidak disematkan “muted”.
Contoh code yang lengkapnya adalah sebagai berikut:
Anda dapat mengabaikan code yang lain karena hal itu tidak terlalu penting. Fokuslah pada kode ini:
<video playsinline autoplay muted loop style="margin: 0px; width: 100%; height: 100%; display: block; background-color: #fff;">
<source src="https://storage.googleapis.com/gloya-common/Video%20Clutch.mp4" type="video/mp4"></video>
Maka bila code tersebut dijalankan maka hasilnya akan menjadi seperti ini:
Sekarang Anda coba dari perangkat mobile Anda. Apabila video nya sudah secara otomatis played, maka Anda sudah benar menyematkan code tersebut.
Bagaimana? Sederhana bukan?
Berikut adalah bagaimana cara menyematkan fungsi video autoplay dengan sederhana menggunakan HTML dasar. Simak tutorial kami lainnya ya! Silahkan komentar di bawah apabila Anda memiliki pertanyaan seputar coding. Terimakasih!
