Lakukan lebih dari sekadar gambar dengan video dasar untuk web

Pelajari video dasar. Meningkatkan interaksi.

Doug Sillars

Apakah Anda ingin menambahkan video ke situs Anda? Karena koneksi perangkat dan jaringan menjadi lebih cepat dan efektif, Anda dapat beralih dari sekadar gambar dan menambahkan video ke peralatan teknik untuk membangun web. Penelitian menunjukkan bahwa situs dengan video menghasilkan engagement dan penjualan yang lebih tinggi. Jadi, meskipun Anda belum menambahkan video ke situs, mungkin hanya perlu waktu 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 agar dapat diputar dengan cepat dan stabil untuk semua pelanggan Anda. Meskipun video dapat meningkatkan interaksi dan kepuasan pelanggan, video yang tidak dapat diputar atau berhenti selama pemutaran dapat menyebabkan pelanggan frustrasi. Postingan ini berfokus pada penggunaan tag <video> HTML5 untuk menayangkan video, sehingga tidak mencakup video streaming.

Mari kita mulai.

Tag <video>

Sepertinya sudah jelas, bukan? Untuk menambahkan video, Anda harus menambahkan tag <video>, mengarahkan ke sumber, lalu memulai perlombaan.

<video src="myVideo.mp4">

Dan, Anda benar. Pada tingkat 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 penayangan video di web adalah dengan mengoptimalkan file yang ditayangkan ke browser. Caranya 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>

Perintah ini mereferensikan tiga file sumber yang terpisah. Browser dimulai dari atas, dan memilih format serta codec pertama yang dapat digunakan. Dalam dunia video, format file, yang biasanya disebut penampung, dapat disimpan dengan codec berbeda, masing-masing dengan atribut yang berbeda. (Selengkapnya tentang hal ini 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 codec H.265 mp4, yang didukung di iOS dan Mac yang lebih baru. Codec ini lebih baru dan memiliki peningkatan kompresi data, sekaligus menayangkan video berkualitas yang sama dengan format video lama.

Pilihan terakhir dalam daftar kami adalah H.264 mp4, yang memiliki dukungan untuk 92% dari semua pengguna global, tetapi merupakan format yang lebih lama, dan dengan demikian, umumnya jauh lebih besar daripada video WebM atau H.265. Pada salah 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 menayangkan video dengan lebih baik. Saat video yang lebih kecil didownload, pemutaran video akan terjadi lebih cepat, dan buffering video akan terisi lebih cepat. Hal ini menyebabkan lebih sedikit jeda selama pemutaran video. Selain itu, beban server akan berkurang, sehingga menambah persyaratan penyimpanan beberapa file video.

Atribut pramuat

Video tidak dapat memulai pemutaran hingga ada video yang didownload dan disimpan secara lokal. Dengan menggunakan atribut pramuat, Anda dapat mengontrol jumlah video yang didownload saat pemuatan halaman. Ada tiga nilai untuk atribut pramuat: auto, metadata, dan none.

pramuat='auto'

Jika 'auto' digunakan, seluruh video akan didownload, terlepas apakah pengguna menekan putar atau tidak. Hal ini memungkinkan pemutaran video yang cepat karena video didownload secara lokal sebelum pengguna menekan tombol putar. Dari perspektif penggunaan data (dan perspektif pemuatan server), perilaku ini hanya boleh digunakan jika ada kemungkinan besar video tersebut akan ditonton. Jika tidak, semua data dari download video lengkap akan terbuang.

pramuat='metadata'

Ini adalah setelan default untuk pramuat di Chrome dan Safari. Jika 'metadata' digunakan, 3% pertama video akan didownload. Meskipun tindakan ini memiliki peringatan dengan 'auto', mendownload hanya 3% dari video akan memerlukan biaya penggunaan server/data yang jauh lebih kecil daripada seluruh video, sambil tetap memastikan sebagian video disimpan secara lokal untuk startup video yang cepat.

pramuat='none'

Tindakan ini akan menyimpan sebagian besar data, tetapi akan menyebabkan peluncuran video yang lebih lambat saat pemutaran ditekan, karena saat setelan ditetapkan, nol kilobyte video akan dimuat secara lokal di perangkat. Untuk video yang ada, tetapi kemungkinan tidak diputar, ini adalah setelan yang sesuai. Setelan ini juga dapat digunakan jika pengguna telah mengaktifkan Mode Ringan di browser.

poster

Anda mungkin ingin gambar poster yang ditampilkan di atas jendela video sebelum video mulai diputar:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

Dengan menambahkan foto, bukan kotak hitam di halaman, membuat situs Anda lebih menarik dan interaktif. Namun, penggunaan atribut poster akan menambahkan download gambar sebelum download video dimulai. Oleh karena itu, Anda dapat mempertimbangkan untuk menghindari 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 menambahkan opsi ini untuk video sehingga pengguna dapat berhenti dan menjeda, mengubah volume, dan sebagainya. Untuk video yang berjalan di latar belakang atau berulang, Anda mungkin ingin menghapus atribut ini.

dibisukan

Atribut muted menyebabkan pemutaran dimulai dalam keadaan tanpa suara. Jika tidak ada kontrol yang disediakan, kontrol akan tetap dibisukan selama keseluruhan pemutaran. Jika memang dimaksudkan untuk menghapus trek audio dari video. Tindakan ini akan lebih mengurangi ukuran file video yang dikirimkan kepada pelanggan.

Seperti halnya container dan codec, menghapus file audio, yang juga disebut demuxing, juga berada di luar cakupan artikel ini. Anda dapat menemukan petunjuknya di Tips Praktis Manipulasi Media.

loop

Untuk mengirimkan video yang mengulang 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.

Video yang diputar otomatis

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

Meskipun demikian, agar video diputar otomatis di browser seluler, atribut muted juga harus ditambahkan:

<video src="myVideo.mp4" autoplay muted>

Kesimpulan

Hanya dengan menambahkan video ke situs Anda akan menambahkan ruang interaksi baru bagi pelanggan, tetapi Anda harus menayangkan konten dengan benar—memastikan pemutaran video berjalan lancar dan tanpa hambatan. Penggunaan atribut bawaan tag <video> dapat sangat membantu Anda memberikan video yang sempurna kepada semua orang yang mengunjungi situs Anda.