Lakukan lebih dari sekadar gambar dengan video dasar untuk web

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.
Tidak ada gambar poster

Video tanpa poster akan menampilkan layar hitam sebelum dimulai.

Video dengan poster akan jauh lebih menarik.
Dengan gambar poster

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.