Pelajari video dasar. Meningkatkan interaksi.
Apakah Anda ingin menambahkan video ke situs? Karena perangkat dan koneksi jaringan menjadi lebih cepat dan lebih canggih, Anda dapat beralih dari gambar dan menambahkan video ke kotak alat teknik untuk membuat web. Riset menunjukkan bahwa situs dengan video menghasilkan interaksi dan penjualan yang lebih tinggi. Jadi, meskipun Anda belum menambahkan video ke situs, mungkin hanya menunggu waktu saja hingga Anda melakukannya.
Kemungkinan besar, file video yang Anda tambahkan ke situs akan menjadi file terbesar
yang didownload. Oleh karena itu, sangat penting untuk memastikan
file dibuat untuk pemutaran yang cepat dan stabil bagi semua pelanggan Anda.
Meskipun video dapat meningkatkan engagement dan kepuasan pelanggan, video
yang tidak diputar atau terhenti selama pemutaran dapat membuat pelanggan frustrasi.
Postingan ini berfokus pada penggunaan tag <video>
HTML5 untuk mengirimkan video, sehingga tidak akan membahas video streaming.
Jadi, mari kita mulai.
Tag <video>
Kedengarannya jelas, bukan? Untuk menambahkan video, Anda harus menambahkan tag <video>
, mengarahkan ke
sumber, lalu Anda siap untuk memulai.
<video src="myVideo.mp4">
Dan, Anda benar. Pada tingkat tertinggi, ini adalah semua yang Anda perlukan untuk menambahkan video ke web. Namun, ada banyak atribut yang dapat Anda tambahkan ke tag video untuk meningkatkan tata letak dan penayangan video.
Tag <source>
Mungkin cara terbaik untuk meningkatkan pengiriman video di web adalah dengan mengoptimalkan
file yang dikirim ke browser. Cara melakukannya adalah menggunakan tag <source>
:
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
Ini mereferensikan tiga file sumber terpisah. Browser dimulai dari bagian atas, dan memilih format dan codec pertama yang dapat digunakan. Dalam dunia video, format file, yang biasanya disebut penampung, dapat disimpan dengan codec yang berbeda, masing-masing dengan atribut yang berbeda. (Lihat selengkapnya di sini.) Pada contoh di atas, pilihan pertama adalah format WebM (yang dapat dienkode dengan codec VP8 atau VP9), dan didukung (pada saat penulisan) oleh 78% pengguna global. Pilihan kedua adalah codec H.265 dari mp4, yang didukung di iOS dan Mac yang lebih baru. Codec ini lebih baru dan memiliki kompresi data yang lebih baik, sekaligus memberikan video berkualitas sama seperti format video lama.
Pilihan terakhir dalam daftar kami adalah H.264 mp4, yang mendukung 92% dari semua pengguna global, tetapi merupakan format yang lebih lama, sehingga umumnya jauh lebih besar daripada video WebM atau H.265. Dalam satu contoh, Anda dapat melihat perbedaan untuk film berdurasi dua menit:
Codec | Ukuran file |
---|---|
VP8 | 5,5 MB |
VP9 | 4,2 MB |
H.265 | 5,4 MB |
H.264 | 16,1 MB |
Mengirim file yang lebih kecil adalah pengoptimalan performa terbaik yang dapat Anda lakukan untuk mengirim video dengan lebih baik. Saat video yang lebih kecil didownload, pemutaran video akan lebih cepat, dan buffering video akan terisi lebih cepat. Hal ini menyebabkan lebih sedikit jeda selama pemutaran video. Selain itu, beban server akan berkurang, yang akan mengimbangi peningkatan persyaratan penyimpanan beberapa file video.
Atribut pramuat
Video tidak dapat mulai diputar hingga ada beberapa video yang didownload dan disimpan
secara lokal. Dengan menggunakan atribut pramuat, Anda dapat mengontrol jumlah video yang
didownload saat halaman dimuat. Ada tiga nilai untuk atribut pramuat:
auto
, metadata
, dan none
.
preload='auto'
Jika 'auto'
digunakan, seluruh video akan didownload, terlepas dari apakah
pengguna menekan putar atau tidak. Hal ini memungkinkan pemutaran video yang cepat karena video
didownload secara lokal sebelum pengguna menekan putar. Dari perspektif penggunaan data (dan beban
server), hal ini hanya boleh digunakan jika kemungkinan besar
video akan ditonton. Jika tidak, semua data download video lengkap akan
terbuang.
preload='metadata'
Ini adalah setelan default untuk pramuat di Chrome dan Safari. Saat 'metadata'
digunakan, 3% pertama video akan didownload. Meskipun memiliki peringatan yang sama
dengan 'auto'
, mendownload hanya 3% video akan memiliki biaya penggunaan server/data
yang jauh lebih kecil daripada seluruh video, sekaligus memastikan sebagian video
disimpan secara lokal untuk startup video yang cepat.
preload='none'
Tindakan ini akan menghemat sebagian besar data, tetapi akan menyebabkan startup video lebih lambat saat tombol putar ditekan, karena seperti yang dinyatakan setelan, video tidak dimuat secara lokal di perangkat. Untuk video yang ada, tetapi tidak mungkin diputar, ini adalah setelan yang sesuai. Hal ini juga dapat digunakan jika pengguna telah mengaktifkan Mode ringan di browser mereka.
poster
Anda mungkin ingin memiliki gambar poster yang ditampilkan di jendela video sebelum video mulai diputar:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Video tanpa poster akan menampilkan layar hitam sebelum dimulai.
Video dengan poster akan jauh lebih menarik.
Dengan menambahkan foto, bukan kotak hitam di halaman, Anda membuat situs lebih menarik dan interaktif. Namun, penggunaan atribut poster
akan menambahkan download
gambar sebelum download video dimulai. Oleh karena itu, sebaiknya Anda
tidak menambahkan poster untuk video yang diputar otomatis (karena download tambahan
akan menunda download video).
Kontrol pemutaran
Menambahkan atribut controls
akan menambahkan kontrol pemutaran. Tanpa ini, pelanggan tidak dapat memulai atau menghentikan video Anda. Anda harus menambahkannya untuk video agar
pengguna dapat menghentikan dan menjeda, mengubah volume, dan sebagainya. Untuk video latar belakang atau
loop, Anda dapat menghilangkan atribut ini.
dibisukan
Atribut muted
menyebabkan pemutaran dimulai dalam status bisu. Jika tidak ada kontrol
yang diberikan, video akan tetap dibisukan selama pemutaran. Jika hal tersebut
dimaksudkan, sebaiknya hapus trek audio dari video. Hal ini
lebih lanjut akan mengurangi ukuran file video yang dikirimkan kepada pelanggan.
Seperti halnya penampung dan codec, penghapusan file audio, yang juga disebut demuxing, juga berada di luar cakupan artikel ini. Anda dapat menemukan petunjuknya di Tips Manipulasi Media.
loop
Untuk menayangkan video yang memutar konten secara berulang (seperti GIF animasi), tambahkan atribut
loop
. Karena file video biasanya jauh lebih kecil daripada GIF animasi, mekanisme
ini memungkinkan Anda mengganti GIF dengan file
video.
Memutar video secara otomatis
Jika ingin video langsung diputar (misalnya sebagai video latar belakang, atau
video yang diputar berulang seperti GIF animasi), Anda dapat menambahkan atribut autoplay
:
<video src="myVideo.mp4" playsinline autoplay>
Namun, agar video diputar otomatis di browser seluler, atribut muted
juga harus ditambahkan:
<video src="myVideo.mp4" playsinline autoplay muted>
Kesimpulan
Menambahkan video ke situs akan menambah ruang interaksi baru bagi pelanggan, tetapi Anda harus mengirimkan konten dengan benar—memastikan pemutaran video berjalan lancar dan tanpa terhenti. Menggunakan atribut bawaan tag <video> dapat sangat membantu Anda menayangkan video yang sempurna kepada semua orang yang mengunjungi situs Anda.