Video overlay dengan ketelusan semasa menggabungkan sokongan silang penyemak imbas

Oleh kerana laman web menjadi semakin dinamik ketika datang ke reka bentuk, kadang -kadang ada keperluan untuk menggabungkan unsur -unsur animasi yang kompleks. Terdapat banyak cara untuk melakukannya dari peralihan CSS ke 3D yang dijadikan pada kanvas, dan SVG animasi. Tetapi ia sering lebih mudah menggunakan

Tetapi bagaimana jika anda memerlukan latar belakang telus pada video itu, supaya ia dapat dilapisi dan kelihatan berinteraksi dengan kandungan lain pada halaman? Ia mungkin, tetapi boleh menjadi rumit, terutama penyemak imbas. Mari kita meneroka itu.

Inilah contoh

Untuk melihat bagaimana overlay video telus berfungsi, saya telah menyediakan contoh yang saya harap terasa menyeronokkan dan relatable. Idea ini adalah untuk mengintegrasikan video dengan kandungan interaktif di bawahnya supaya kandungan di belakang video berubah ketika slider sedang berkembang. Ia adalah makanan anjing pengiklanan slider dengan video sebenar anjing di overlay dan saya yakin bahawa anjing yang realistik dan comel akan meningkatkan kadar penukaran!

Anda boleh mengikuti bersama dengan artikel ini untuk mencipta demo ini sendiri. Sebahagian daripada apa yang anda perlukan untuk membuat video seperti ini adalah "urutan imej" (sekumpulan imej alpha-telus kami akan menjahit bersama-sama ke dalam video). Saya menyediakan imej yang saya gunakan untuk contohnya.

Muat turun gambar

Meneroka kemungkinan

Untuk mencapai kesan ini, saya mula dengan mencari penyelesaian NY yang membolehkan saya memasukkan kandungan animasi dengan latar belakang telus pada halaman.

Gif

Perkara pertama yang muncul ialah GIF . Walaupun format GIF diperkenalkan lebih dari 30 tahun yang lalu, ia masih digunakan secara meluas. Malangnya, ia mempunyai batasannya. Walaupun ia berfungsi dengan sempurna untuk grafik animasi yang sederhana dan kecil, ia tidak begitu hebat untuk rakaman video yang berwarna -warni, ia mempunyai ruang warna yang terhad, dan akan tumbuh banyak saiz untuk video yang kompleks.

Apng

Pilihan seterusnya yang saya lihat ialah APNG , yang atas sebab tertentu, tidak begitu popular seperti GIF tetapi jauh lebih baik. (Saya tidak tahu ia wujud, adakah anda?) APNG berfungsi sama dengan fail GIF animasi sambil menyokong imej 24-bit dan ketelusan 8-bit. Ia juga bersesuaian dengan PNG biasa. Jika APNG tidak disokong, bingkai pertama dipaparkan. Ia disokong oleh pelayar popular, tetapi tidak ada sokongan di Internet Explorer 11 (Yup, sesetengah orang masih perlu menyokongnya). Walaupun ia kelihatan seperti cara untuk pergi seketika, saya tidak berpuas hati dengan saiz dan prestasi failnya.

Fakta yang menyeronokkan: Apple mengguna pakai format APNG sebagai format pilihan mereka untuk pelekat animasi dalam aplikasi iOS 10 iMessage.

Gelung melalui pngs

Seterusnya, mentah, tetapi bekerja, idea datang ke fikiran: Gunakan sekumpulan PNG dan gelung melalui mereka dengan JavaScript untuk meniru video. Tetapi ia memerlukan menggunakan banyak pemindahan data (setiap bingkai video akan menjadi imej yang berasingan) dan sumber untuk bernyawa (anda boleh mengalirkan bateri pengguna dengan cepat atau membuat kipas komputer mereka gila).

Saya dengan cepat meninggalkan idea itu, tetapi ternyata berguna kemudian. Saya akan kembali kepada itu pada akhir artikel.

Webm dengan ketelusan alfa

Memandangkan semua format untuk gagal di sini, saya mula melihat video. Saya dapati artikel mengenai ketelusan Alpha dalam video Chrome yang diterbitkan pada tahun 2013, yang mengumumkan sokongan Google Chrome untuk Webm dengan saluran Alpha. Ia juga menunjukkan contoh dan petua saham mengenai cara menggunakannya. Saya pergi melalui artikel dan ia segera merasakan seperti cara untuk pergi. Saya lebih yakin selepas menukar urutan imej saya ke Webm kerana, sementara GIF berat pada 5.8 MB, Webm dengan ketelusan, menggunakan kadar bingkai yang sama dan warna penuh hanya 540 kb! Itu lebih daripada 10 kali lebih kecil sambil menawarkan prestasi dan kualiti yang lebih baik. Hebat!

Kegembiraan itu tidak bertahan lama. Sebaik sahaja saya membuka laman web di telefon iOS saya, saya menyedari bahawa saya sepatutnya bermula dengan memeriksa keserasian penyemak imbas. Malangnya, Safari (iOS dan MACOS) tidak menyokong ketelusan dalam WebM. Walaupun video saya berfungsi dengan sempurna di Chrome, Firefox dan Edge, Safari menyambut saya dengan latar belakang hitam yang hodoh.

Carian terus ...

Penyelesaian yang baik

Syukurlah, saya dapati video dari WWDC 2019 mengumumkan video HEVC dengan sokongan Alpha untuk Safari bermula pada iOS 13 dan MacOS Catalina. Ia seolah -olah menyediakan fungsi yang sama seperti Webm tetapi dengan sokongan pada peranti Apple. Jadi saya memutuskan untuk menggunakan penyelesaian hibrid: HEVC untuk Safari dan Webm untuk pelayar lain.

Nampaknya penyelesaian yang sempurna. Tetapi sekarang kita mempunyai dua tugas:

1. Buat HEVC dengan alpha-transparency
2. Mengesan safari (dan versi) untuk menyediakan format yang betul

Membuat video yang telus

Kami akan bermula dengan bahagian yang mudah: Membuat fail Webm. Jika anda ingin membuat, menukar, atau mengedit fail video, FFMPEG adalah rakan anda. Ia adalah kerangka multimedia sumber terbuka yang sangat kuat, dan jika anda mempunyai kaitan dengan fail multimedia, saya akan mengesyorkan bermula di sana kerana ia mampu banyak perkara. Saya boleh mengatakan bahawa FFMPEG telah membantu saya mengurangkan saiz fail video lebih dari 10 kali tanpa sebarang kemerosotan kualiti imej yang kelihatan. Tetapi mari kita kembali ke ketelusan.

Dalam pengalaman saya, jika anda perlu memasukkan elemen animasi ke dalam susun atur laman web, anda akan mendapatkannya sebagai satu set bingkai video di PNG. Walaupun semasa mengerjakan projek contoh saya, alat yang menghilangkan latar belakang dari video menghasilkan satu set imej untuk saya. Oleh itu, saya akan meneruskan di sini dengan mengandaikan kami membina video dari satu set imej (ingat, anda boleh memuat turun set kami), tetapi walaupun anda mempunyai fail video sebaliknya, prosesnya akan kelihatan sama (Laraskan pilihan FFMPEG untuk keperluan anda).

Kami kini bersedia untuk membuat video. Menggunakan baris arahan, kami akan menavigasi ke folder yang mengandungi fail PNG dan menjalankan arahan berikut:

 ffmpeg -framerate 25 -i unscreen -=. png -c: v libvpx -vp9 -pix_fmt yuva420p output.webm

Anda boleh menyesuaikan hujah -hujah yang sesuai dengan keperluan anda:

• Framerate: Berapa banyak imej yang akan digunakan untuk 1s video output
• -I UNSCREEN-=. PNG: Nama fail dan format input. Fail saya mempunyai nombor dari 001 hingga 150 jadi saya menggunakan = sebagai topeng untuk memilih semua fail dengan tiga digit dalam nama.
• -C: V: Menentukan codec untuk digunakan. Saya mahu video itu dikodkan dengan VP9, ​​yang disokong oleh kebanyakan pelayar web.
• -PIX_FMT: Menentukan format piksel yang akan digunakan. Di CAS kami, ia harus menyokong saluran Alpha. Anda boleh melihat semua format yang disokong jika anda menjalankan ffmpeg --pix_fmts.
• output.webm: Menyediakan nama fail output yang dikehendaki sebagai hujah terakhir

Terdapat lebih banyak pilihan yang tersedia, tetapi saya tidak akan menyelam ke dalam butiran kerana ia mungkin mengambil lebih daripada satu artikel untuk meneruskannya. Yang disediakan dalam contoh perintah berfungsi dengan baik untuk kes penggunaan kami.

Selepas proses selesai, kita harus melihat fail output.webm baru, dan jika anda membukanya dalam penyemak imbas yang disokong, anda akan melihat video. Mudah, bukan?

Mewujudkan HEVC Alpha

Oleh kerana kami mempunyai fail WEBP siap, sudah tiba masanya untuk bergerak ke format kedua yang akan kami gunakan: HEVC dengan ketelusan alfa. Malangnya, pada masa penulisan, FFMPEG tidak menyokong HEVC, jadi kami perlu menggunakan alat lain. Setakat yang saya tahu, satu -satunya cara untuk membuat HEVC dengan Alpha adalah menggunakan pencari atau pemampat pada Mac. Jika anda mempunyai PC, anda mungkin perlu meminta seseorang dengan Mac untuk melakukannya untuk anda. Aplikasi pemampat hanya disediakan dengan Final Cut Pro, jadi saya tidak akan menggunakannya, walaupun mungkin patut dipertimbangkan jika anda memerlukan tetapan tersuai.

Sejak MacOS Catalina, pencari mempunyai alat media yang dibina dalam encode untuk menukar video. Ia mudah (dan percuma), jadi ia memberi makan keperluan kita.

Pencari menjangkakan fail video sebagai input, jadi pertama, kita perlu menukar urutan imej ke Prores 4444. Ini adalah langkah penting, kerana alat Media Encode tidak akan menerima apa -apa video - ia akan gagal melainkan jika anda memberikan format yang diterima. Ia memberi saya sakit kepala atau dua sehingga saya mengetahui pengekodan yang betul untuk fail input.

Kami boleh membuat video input menggunakan FFMPEG. Seperti yang kita lakukan semasa membuat WebM, kita hanya perlu menjalankan FFMPEG dengan hujah yang betul:

 ffmpeg -framerate 25 -i unscreen -=. png -c: v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile: v 4444 -f Mov -vframes 150 output.mov

Dari sudut ini, Mac diperlukan. Tetapi prosesnya mudah dan tidak melibatkan menaip apa-apa di terminal, jadi walaupun anda meminta rakan yang tidak bertenaga dengan Mac untuk melakukannya untuk anda, saya pasti mereka boleh mengurus.

Mempunyai video Prores4444 siap, anda boleh menavigasi ke folder yang mengandungi dalam pencari, klik kanan di atasnya, dan dalam menu konteks, pilih encode fail video yang dipilih .

Tetingkap akan muncul. Pilih kualiti HEVC yang dikehendaki (terdapat dua untuk dipilih), dan periksa pilihan untuk mengekalkan ketelusan. Kemudian klik butang "Teruskan".

Selepas seketika anda akan melihat fail baru, yang dikodkan di HEVC dengan Alpha. Sudah selesai! Membuka fail ini di Safari mengesahkan bahawa ketelusan berfungsi.

Akhir sekali, sudah tiba masanya untuk menggunakan video di laman web!

Melayani video telus untuk semua penyemak imbas

Kami boleh menggunakan

Terdapat satu perkara lagi untuk dijaga: sesetengah pelayar menyokong WebM atau HEVC sendiri tetapi tanpa ketelusan . Pelayar tersebut akan memainkan video tetapi dengan latar belakang hitam dan bukan saluran alfa. Sebagai contoh, Safari 12 akan memainkan HEVC tanpa ketelusan. Itu tidak boleh diterima untuk kita.

Biasanya, saya akan menggunakan elemen untuk menyediakan video bersama -sama dengan pelbagai format sebagai sandaran, dan penyemak imbas akan memilih yang menyokongnya. Walau bagaimanapun, kerana kami ingin menunjukkan HEVC hanya pada versi safari tertentu, kami perlu menetapkan atribut SRC video sebaliknya menggunakan JavaScript.

HEVC dengan ketelusan disokong dalam iOS 13 dan Mac Safari 13, jadi mari kita mulakan dengan mengesan mereka. Cara yang disyorkan untuk menyesuaikan ciri laman web berdasarkan sokongan adalah dengan mengesan kewujudan API daripada melihat ejen pengguna, tetapi saya tidak mencari cara mudah untuk mengesan jika penyemak imbas menyokong ketelusan dalam format video. Sebaliknya, saya datang dengan penyelesaian saya sendiri. Ia tidak cantik, tetapi ia berfungsi.

 fungsi sokonganSheVCalpha () {
  const navigator = window.Navigator;
  const ua = navigator.useragent.tolowerCase ()
  const hasmediacapabilities = !! (navigator.mediacapabilities && navigator.mediacapabilities.decodingInfo)
  const issafari = ((ua.indexof ('safari')! = -1) && (! (ua.indexof ('chrome')! = -1) && (ua.indexof ('versi/')! = -1)))
  Kembalikan Issafari && HasMediaCapabilities
}

Ini mensasarkan Safari 13 dan ke atas dengan melihat Navigator.MediaCapabilities, yang tidak disokong dalam versi yang lebih lama, serta melihat bahawa penyemak imbas adalah safari sama sekali. Jika fungsi itu kembali benar, maka saya baik untuk pergi dengan HEVC Alpha. Untuk mana -mana kes lain, saya akan memuatkan video Webm.

Inilah contoh bagaimana ini disatukan dalam HTML:

 <video gelung disenyapkan autoplay playinline> </video>

<script>
const player = document.getElementById (&#39;Player&#39;);
player.src = SupportSheVCalpha ()? &#39;output.mov&#39;: &#39;output.webm&#39;;
</script>

Sekiranya anda ingin tahu mengenai argumen PlaysInline Autoplay Loop pada elemen video, mereka akan mereplikasi pengalaman seperti GIF:

• Tanpa disenyapkan, video tidak akan dimainkan tanpa interaksi pengguna.
• Dengan PlaysInline, pada iOS, video memainkan betul -betul di mana ia berada dalam susun atur dan bukannya membuka skrin penuh.
• Dengan gelung, video berulang -ulang berulang -ulang.
• Dengan Autoplay, ia akan mula memainkan video secara automatik pada beban halaman (selagi kami juga telah diredam).

Itu sahaja! Kami mempunyai penyelesaian yang ringan, pelaku dan berkualiti tinggi untuk video telus, yang berfungsi pada pelayar yang paling moden (sekurang-kurangnya dua versi terakhir Chrome, Firefox, Safari dan Edge). Kami boleh menambah beberapa asas HTML dan CSS untuk mengintegrasikan kandungan statik dengannya dan menjadikannya sedikit lebih kehidupan sebenar, atau hanya menggunakan idea yang sama dalam demo saya. Itu tidak terlalu buruk, bukan?

Hei, tapi bagaimana dengan IE 11? Seluruh syarikat saya menggunakannya!

Secara umum, saya akan mengesyorkan mengehadkan ciri seperti ini kepada pelayar moden dan menyembunyikan video dalam IE. Video ini mungkin bukan elemen kritikal laman web. Walaupun, saya pernah bekerja pada projek komersil di mana sokongan IE 11 adalah suatu keharusan dan saya terpaksa mencari sesuatu untuk menunjukkan video telus di sana. Pada akhirnya, saya akhirnya berbasikal melalui imej PNG dengan JavaScript. Saya mengurangkan jumlah bingkai dan bertukar di antara mereka menggunakan pemasa. Pasti, persembahan itu mengerikan, tetapi ia berfungsi. Video itu sangat penting untuk keseluruhan reka bentuk sehingga kami sengaja memutuskan untuk mengorbankan prestasi pada IE 11 untuk memberikan pengalaman penuh.

Ringkasan

Saya berharap bahawa saya telah menyelamatkan anda sedikit masa meneliti idea video alpha-telus dan sekarang anda dapat menggabungkan elemen animasi seperti ini di laman web anda. Saya yakin anda memerlukannya suatu hari nanti!

Adakah anda mempunyai idea yang berbeza bagaimana menggunakan video telus? Atau mungkin ada pengalaman dengan itu? Beritahu saya dalam komen.

Atas ialah kandungan terperinci Video overlay dengan ketelusan semasa menggabungkan sokongan silang penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!