Lakukan lebih dari sekadar gambar dengan video dasar untuk web

Video pelajari dasar. Meningkatkan interaksi.

Doug Sillars

Apakah Anda ingin menambahkan video ke situs? Seiring 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. Penelitian menunjukkan bahwa situs dengan video menghasilkan interaksi dan penjualan yang lebih tinggi. Jadi, meskipun Anda belum menambahkan video ke situs, mungkin hanya masalah waktu hingga Anda melakukannya.

Kemungkinan besar, file video yang Anda tambahkan ke situs Anda 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 menayangkan video, sehingga tidak akan membahas video streaming.

Jadi, mari kita mulai.

Tag <video>

Sepertinya sudah 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 level tertinggi, inilah 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 dengan 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 merujuk pada tiga file sumber terpisah. Browser dimulai dari bagian atas, dan memilih format dan codec pertama yang dapat digunakan. Dalam dunia video, format file, biasanya disebut penampung, dapat disimpan dengan codec yang berbeda, masing-masing dengan atribut yang berbeda. (Lihat selengkapnya di sini.) Dalam 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 H.265 codec 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 memiliki dukungan pada 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:

Mengirim file yang lebih kecil adalah pengoptimalan performa terbaik yang dapat Anda lakukan untuk mengirim video dengan lebih baik. Saat video berukuran lebih kecil didownload, pemutaran video akan terjadi lebih cepat, dan buffer video terisi lebih cepat. Hal ini menyebabkan lebih sedikit jeda selama pemutaran video. Selain itu, beban server berkurang, yang merupakan ganti dari peningkatan persyaratan penyimpanan beberapa file video.

Atribut pramuat

Video tidak dapat memulai pemutaran sampai ada 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 tombol putar. Dari penggunaan data (dan perspektif pemuatan server), ini hanya boleh digunakan jika ada kemungkinan besar video akan ditonton. Jika tidak, semua data download video lengkap akan terbuang percuma.

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">

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 hindari penambahan 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 berulang, Anda dapat menghapus atribut ini.

dibisukan

Atribut muted menyebabkan pemutaran dimulai dalam status dibisukan. Jika tidak ada kontrol yang diberikan, video akan tetap dibisukan selama pemutaran. Jika hal itu dimaksudkan, mungkin masuk akal untuk menghapus 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 petunjuk di Contekan Manipulasi Media.

loop

Untuk mengirimkan video yang melakukan loop konten (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 otomatis video

Jika ingin video segera 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 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.