Bagaimana cara mempertahankan ketajaman saat menurunkan video Mp4 H264 di browser?

Saya berhasil membuat video yang tajam setelah melakukan banyak penelitian. Namun, sekarang masalah saya adalah saat mengecilkan di browser. Saya mencoba melakukan sesuatu yang mirip dengan ini: https://framer.com/features/design/

Saya menghubungi beberapa orang dari Framer dan mereka menyebutkan bahwa mereka menggunakan layar retina besar (kepadatan piksel lebih tinggi) dan ScreenFlow untuk pengambilan dan ekspor tanpa perangkat lunak kompresi tambahan. Saya perhatikan bahwa ScreenFlow memiliki opsi untuk menggunakan algoritma yang mempertahankan ketajaman ketika video diperkecil.

Alur kerja saya semuanya ada di windows, mengingat aplikasi yang saya gunakan juga windows.

Ini adalah alur kerja saya: Camtasia menangkap dengan ukuran tetap 960x720 (Saya membaca bahwa rekaman H264 harus memiliki ukuran kelipatan 8 dan 16 untuk menghindari pixelasi). Kemudian impor dan edit dalam Adobe Premiere, ekspor dengan codec H264 dengan output dan kualitas maksimum. Impor ke Handbrake, pilih preset HQ1080p30, modifikasi video untuk framerate konstan, dan kualitas konstan 15, outputnya adalah Mp4 yang dioptimalkan untuk web dan TIDAK ada perubahan ukuran.

Saat video saya diputar pada ukuran spesifik 960x720, itu sempurna. Namun, ketika hal-hal mulai menurun, saya perhatikan font menjadi kabur, yang buruk untuk situs web responsif.

Catatan: Premiere, Camtasia, dan Handbrake tidak memiliki opsi untuk menggunakan algoritma yang mempertahankan ketajaman ketika ukuran diperkecil, atau setidaknya saya tidak bisa menemukannya.

Saya memasukkan kode HTML kecil ke dalam kode pena sehingga Anda dapat memvisualisasikan masalah ini :: https://codepen.io/danielvianna/pen/xrvzzJ

Catatan: cukup ubah ukuran menjadi (kelipatan 8 dan 16)

832x624
768x576
704x528

— Daniel Vianna
sumber

"Premiere, Camtasia, dan Handbrake tidak memiliki opsi untuk menggunakan algoritme yang menjaga ketajaman" semua ini tidak relevan kecuali Anda benar-benar mentranskode untuk ukuran spesifik untuk setiap klien pada waktu tampilan. Sejauh yang saya tahu, Anda tidak tahu. Anda memanggang resolusi ke dalam video pada waktu desain. Masalah Anda datang dengan sisi klien skala video. Biasanya aset ditukar berdasarkan permintaan media. Video, saya curiga akan membutuhkan sesuatu yang berbeda.

— Yorik

Saya bukan ahli video dan sepertinya Anda tahu lebih banyak dari saya, jadi apa yang akan saya lakukan dalam kasus saya?

— Daniel Vianna

Itulah masalahnya: Saya tidak tahu untuk menjawab. "Permintaan media css" mungkin berfungsi, tetapi tidak jelas bagi saya apakah ini berarti video akan dimulai ulang saat Anda mengubah ukuran browser. Kueri media adalah cara memuat berbagai aset berdasarkan keadaan. Ini berarti beberapa versi berukuran tepat untuk ukuran itu. Youtube melakukan BTW ini dengan pilihan "kualitas" mereka: Anda mungkin melihat resolusi rendah dalam keadaan tertentu, tetapi jika Anda menggunakan layar penuh pada monitor 1080p, Anda mungkin melihat versi yang lebih besar. Pemain mereka menangani ini untuk Anda.

— Yorik

Masalah yang Anda tanggapi adalah dari algoritma pengubahan ukuran "cepat" (cepat biasanya berarti kualitas kurang tepat) yang digunakan pemutar video dan / atau browser. Beberapa pemain akan memiliki metode penskalaan yang lebih baik, tetapi itu akan tergantung pada flash player atau fungsi peramban bawaan apa pun.

— Yorik