Membuat video memakan masa. Video 5 minit yang dibuat dengan baik boleh mengambil masa berjam-jam untuk merancang, merakam, dan mengedit-dan itu sebelum kita mula bercakap tentang membuat video itu konsisten dengan semua video lain di laman web anda.
Apabila kami mengambil projek Explorers TheJamStack (sumber pendidikan yang didorong oleh video untuk pemaju web), kami ingin mencari keseimbangan yang tepat kualiti dan penghantaran: apa yang boleh kita automasi dalam proses pengeluaran video kami untuk mengurangkan masa dan bilangan langkah yang diperlukan untuk membuat kandungan video tanpa mengorbankan kualiti?
Dengan bantuan Cloudinary, kami dapat menyampaikan pendekatan penjenamaan yang konsisten dalam semua kandungan video kami tanpa menambah sekumpulan tugas pengeditan tambahan untuk orang yang membuat video. Dan, sebagai bonus, jika kami mengemas kini penjenamaan kami pada masa akan datang, kami boleh mengemas kini semua penjenamaan video di seluruh laman web sekaligus -no penyuntingan video diperlukan!
Apakah maksud "penjenamaan video"?
Untuk membuat setiap video di laman Explorers berasa seperti semuanya sesuai bersama, kami menyertakan beberapa bahagian biasa dalam setiap video:
- Adegan tajuk
- Bumper intro pendek (klip video) yang menunjukkan penjenamaan Jamstack Explorers
- Bumper outro pendek yang sama ada di dalam video seterusnya atau menunjukkan "misi yang dicapai" jika ini adalah video terakhir dalam misi
Langkau hingga akhir: Inilah cara video berjenama kelihatan
Untuk menunjukkan kesan menambah penjenamaan, inilah salah satu video dari Jamstack Explorers tanpa penjenamaan:
Video ini (dan misi ini dari Ben Hong) adalah sah yang luar biasa! Walau bagaimanapun, ia bermula dan berakhir sedikit tiba -tiba, dan kami tidak mempunyai rasa di mana video ini tinggal.
Kami bekerja dengan Adam Hald untuk membuat aset video berjenama yang membantu memberi setiap video rasa tempat. Lihat video yang sama dengan semua penjenamaan penjelajah yang digunakan:
Kami mendapat kandungan yang sama, tetapi sekarang kami telah menambah sedikit va-va-voom tambahan yang membuat ini berasa seperti ia adalah sebahagian daripada cerita yang lebih besar.
Dalam artikel ini, kami akan berjalan melalui bagaimana kami secara automatik menyesuaikan setiap video menggunakan Cloudinary.
Bagaimanakah Cloudinary membuat ini mungkin?
Cloudinary adalah rangkaian penghantaran aset berasaskan awan yang memberi kita API berasaskan URL yang kuat untuk memanipulasi dan mengubah media. Ia menyokong pelbagai jenis aset, tetapi di mana ia benar -benar bersinar adalah dengan imej dan video.
Untuk menggunakan Cloudinary, youCreate akaun percuma, kemudian muat naik aset anda. Aset ini kemudiannya boleh didapati di URL Cloudinary:
https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | | | Vvv Nama Fail Versi (Pilihan) Awan (Pilihan)
URL ini menunjukkan imej asal dan boleh digunakan dalam tag dan markup lain.
Menyesuaikan format dan kualiti fail secara dinamik untuk mengurangkan saiz fail
Jika kami menggunakan imej ini di laman web dan ingin meningkatkan prestasi laman web kami, kami mungkin memutuskan untuk mengurangkan saiz imej ini dengan menggunakan format generasi akan datang seperti Webp, AVIF, dan sebagainya. Format baru ini jauh lebih kecil, tetapi tidak disokong oleh semua pelayar, yang biasanya bermakna menggunakan alat untuk menghasilkan pelbagai versi imej ini dalam format yang berbeza, kemudian menggunakan elemen
Dengan Cloudinary, yang perlu kita lakukan ialah menambah transformasi ke URL:
https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto/v1605632851/explorers/avatar.jpg ^^^^^^^^^^^^^ | V Transformasi Kualiti & Format Automatik
Apa yang kita lihat dalam penyemak imbas adalah sama dengan visual:
Dengan menetapkan format fail dan tetapan kualiti kepada automatik (f_auto, q_auto), Cloudinary dapat mengesan format mana yang disokong oleh pelanggan dan berfungsi dengan format yang paling berkesan pada tahap kualiti yang munasabah. Di Chrome, sebagai contoh, imej ini berubah dari 97.6kb JPG ke Webp 15.4kb, dan semua yang kita perlu lakukan ialah menambah beberapa perkara ke URL!
Kita boleh mengubah imej kita dengan banyak cara yang berbeza!
Kita boleh pergi lebih jauh dengan transformasi lain, termasuk saiz semula (w_150for "saiz semula ke 150px lebar") dan kesan warna (e_grayscalefor "memohon kesan kelabu"):
https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto,w_150,e_grayscale/v1605632851/explorers/avatar.jpg
Ini hanya rasa kecil dari apa yang mungkin - pastikan tocheck dokumen cloudinary untuk lebih banyak contoh!
Ada nod sdk untuk menjadikan ini lebih mudah dibaca manusia
Untuk transformasi yang lebih maju seperti apa yang akan kita masuki, menulis URL dengan tangan boleh menjadi sedikit sukar untuk dibaca. Kami akhirnya menggunakan node sdkto memberi kita keupayaan untuk menambah komen dan menerangkan apa yang dilakukan setiap transformasi, dan itu sangat membantu ketika kami mengekalkan dan mengembangkan platform.
Untuk memasangnya, dapatkan kunci API Cloudinary dan rahsia dari YourConsole, kemudian pasang SDK menggunakan NPM:
# Buat direktori baru Mkdir Cloudinary-Video # Pindah ke direktori baru CD Cloudinary-Video/ # Inisialisasi projek nod baru npm init -y # Pasang sdk nod cloudinary NPM Pasang Cloudinary
Seterusnya, buat fail baru yang dipanggilIndex.jsand Inisialisasi SDK dengan kelayakan API YourCloud_nameand:
constinary = memerlukan ('cloudinary'). v2; // TODO Ganti nilai ini dengan kelayakan awan anda sendiri Cloudinary.config ({ awan_name: 'your_cloud_name', api_key: 'your_api_key', API_SECRET: 'YOUR_API_SECRET', });
Jangan lakukan kelayakan API anda ke GitHub atau berkongsi di mana -mana sahaja. Gunakan pembolehubah persekitaran untuk memastikan mereka selamat! Sekiranya anda tidak terbiasa dengan pembolehubah persekitaran, Colby Fayock telah menulis satu perkara yang hebat untuk menggunakan pembolehubah persekitaran.
Seterusnya, kita boleh membuat transformasi yang sama seperti sebelum menggunakan tetapan konfigurasi yang lebih banyak manusia yang boleh dibaca:
Cloudinary.uploader // hujah pertama harus menjadi ID awam (termasuk folder!) // gambar yang ingin kita ubah .Explicit ('Explorers/Avatar', { // Kedua -dua sifat ini sepadan dengan permulaan URL: // https: //res.cloudinary.com/netlify/image/upload/... // ^^^^^^^^^^^^ sumber_type: 'imej', taip: 'muat naik', // "bersemangat" bermaksud kita mahu menjalankan transformasi ini lebih awal untuk mengelakkan // Masa beban pertama yang perlahan Bersemangat: [ { fetch_format: 'auto', Kualiti: 'Auto', Lebar: 150, Kesan: 'Grayscale', }, ], // Benarkan imej yang diubah ini diubah untuk mengelakkan diri daripada berjalan semula sama // Transformasi berulang kali Tukar ganti: palsu, }) .THEN ((hasil) => { console.log (hasil); });
Mari kita jalankan kod ini dengan typingnode index.jsin terminal kita. Output akan kelihatan seperti ini:
{ aset_id: 'fca4abba96ffdf70ef89498aa340ae4e', public_id: 'penjelajah/avatar', Versi: 1605632851, versi_id: 'b8a923931af20404e89d03852ff1bff1', Tandatangan: 'E7201C9AB36CB5B6A0545CEE4F5F8EE27FB7F99F', Lebar: 300, Ketinggian: 300, Format: 'jpg', sumber_type: 'imej', created_at: '2020-11-17t17: 07: 31z', bait: 97633, taip: 'muat naik', URL: 'http://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg', Secure_url: 'https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg', Access_mode: 'awam', Bersemangat: [ { Transformasi: 'E_Grayscale, F_Auto, Q_Auto, W_150', Lebar: 150, Ketinggian: 150, bait: 6192, Format: 'jpg', URL: 'http://res.cloudinary.com/netlify/image/upload/e_grayscale,f_auto ,q_auto,w_150/v1605632851/explorers/avatar.jpg', Secure_url: 'https://res.cloudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto,w_150/v1605632851/explorers/avatar.jpg' } ] }
Di bawah TheagerProperty, transformasi kami ditunjukkan bersama dengan URL penuh untuk melihat imej yang diubah.
Walaupun nod SDK mungkin berlebihan untuk transformasi mudah seperti ini, ia menjadi sangat berguna apabila kita mula melihat transformasi kompleks yang diperlukan untuk menambah penjenamaan video.
Mengubah video dengan cloudinary
Untuk mengubah video kami di Jamstack Explorers, kami mengikuti pendekatan yang sama: setiap video dimuat naik ke Cloudinary, dan kemudian kami mengubah suai URL untuk mengubah saiz, menyesuaikan kualiti, dan memasukkan kad tajuk dan bumper.
Terdapat beberapa kategori transformasi utama yang akan kami menangani untuk menambah penjenamaan:
- Overlay
- Peralihan
- Overlay teks
- Splicing
Mari kita lihat setiap kategori ini dan lihat sama ada kita tidak dapat mengemukakan semula Jamstack Explorers penjenamaan pada video Ben! Mari kita sediakan dengan menubuhkan upindex.jsto mengubah video asas kami:
Cloudinary.uploader .Explicit ('Explorers/Bumper', { // Kedua -dua sifat ini sepadan dengan permulaan URL: // https: //res.cloudinary.com/netlify/image/upload/... // ^^^^^^^^^^^^ sumber_type: 'video', taip: 'muat naik', // "bersemangat" bermaksud kita mahu menjalankan transformasi ini lebih awal untuk mengelakkan // Masa beban pertama yang perlahan Bersemangat: [ { fetch_format: 'auto', Kualiti: 'Auto', Ketinggian: 360, Lebar: 640, Tanaman: 'Isi', // Elakkan kotak surat jika video adalah saiz yang berbeza }, ], // Benarkan imej yang diubah ini diubah untuk mengelakkan diri daripada berjalan semula sama // Transformasi berulang kali Tukar ganti: palsu, }) .THEN ((hasil) => { console.log (hasil); });
Anda mungkin menyedari bahawa kami menggunakan video yang dipanggil "bumper" dan bukannya video asal Ben. Ini disebabkan oleh cara video perintah cloudinary ketika kami menambahkannya bersama -sama. Kami akan menambah video Ben di bahagian seterusnya!
Menggabungkan dua video dengan peralihan tersuai menggunakan Cloudinary
Untuk menambah bumper kami, kami perlu menambah "lapisan" transformasi kedua kepada TheagerArray yang menambah video kedua sebagai lapisan.
Untuk melakukan ini, kami menggunakan TheOverlayTransformation dan menetapkannya Tovideo: PublicID, di mana ID awam Cloudinary dari aset dengan mana -mana slashes (/) diubah menjadi Colon (:).
Kami juga perlu memberitahu Cloudinary bagaimana untuk beralih antara kedua -dua video, yang kami gunakan menggunakan video khas yang dipanggil Luma Matte yang membolehkan kami menutup satu video dengan kawasan hitam video, dan video kedua dengan kawasan putih. Ini mengakibatkan silang silang yang bergaya.
Inilah yang kelihatan seperti Luma Matte sendiri:
Video dan peralihan kedua -duanya mempunyai transformasi sendiri, yang bermaksud bahawa kita perlu merawatnya sebagai "lapisan" yang berbeza dalam transformasi awan. Ini bermakna memisahkannya ke dalam objek yang berasingan, kemudian menambah objek tambahan untuk "memohon" setiap lapisan, yang membolehkan kita memanggil bahagian itu dan terus menambah lebih banyak transformasi ke video utama.
Untuk memberitahu Cloudinary ini ini adalah matte luma dan bukan video lain, kami menetapkan totransition TheeffectType.
Buat perubahan berikut inindex.jsto meletakkan semua ini di tempat:
const videobaseTransformations = { fetch_format: 'auto', Kualiti: 'Auto', Ketinggian: 360, Lebar: 600, Tanaman: 'Isi', } Cloudinary.uploader .Explicit ('Explorers/Bumper', { // Kedua -dua sifat ini sepadan dengan permulaan URL: // <https:></https:> ... // sumber_type: 'video', taip: 'muat naik', // "bersemangat" bermaksud kita mahu menjalankan transformasi ini lebih awal untuk mengelakkan // Masa beban pertama yang perlahan Bersemangat: [ VideobaseTransformations, { Overlay: 'Video: Explorers: LCA-07-Lifecycle-Hooks', ... videobasetransformasi, }, { Overlay: 'Video: Explorers: Transition', kesan: 'peralihan', }, {Flags: 'Layer_apply'}, // { console.log (hasil); });
Kami memerlukan transformasi format, kualiti, dan ukuran yang sama pada semua video, jadi kami menarik mereka ke dalam pembolehubah yang dipanggil VideobaseTransformations, kemudian menambah objek kedua untuk mengandungi overlay.
Sekiranya kita menjalankan ini dengan indeks.js, video yang kita dapat kembali kelihatan seperti ini:
Tidak teruk! Ini sudah kelihatan seperti ia adalah sebahagian daripada tapak Jamstack Explorers, dan peralihan itu menambah aliran yang bagus dari bumper biasa ke dalam video tersuai.
Menambah bumper outro berfungsi sama: kita perlu menambah satu lagi overlay untuk bumper berakhir dan peralihan. Kami tidak akan menunjukkan kod ini dalam tutorial, tetapi anda dapat melihatnya dalam kod sumber jika anda berminat.
Tambahkan kad tajuk ke video menggunakan lapisan teks
Untuk menambah kad tajuk, terdapat dua langkah yang berbeza:
- Ekstrak klip video pendek untuk berfungsi sebagai latar belakang kad tajuk
- Tambahkan Overlay Teks dengan Tajuk Video
Dua bahagian seterusnya berjalan melalui setiap langkah secara individu supaya kita dapat melihat perbezaan antara keduanya.
Ekstrak klip video pendek untuk digunakan sebagai latar belakang kad tajuk
Apabila Adam Hald mencipta Aset Video Explorers, dia termasuk video intro yang luar biasa dibuka pada langit berbintang yang sesuai untuk kad tajuk. Menggunakan Cloudinary, kita boleh merebut beberapa saat dari langit berbintang dan menyambungkannya ke dalam setiap video sebagai kad tajuk!
Inindex.js, tambahkan blok transformasi berikut:
Cloudinary.uploader .Explicit ('Explorers/Bumper', { // Kedua -dua sifat ini sepadan dengan permulaan URL: // https: //res.cloudinary.com/netlify/image/upload/... // sumber_type: 'video', taip: 'muat naik', // "bersemangat" bermaksud kita mahu menjalankan transformasi ini lebih awal untuk mengelakkan // Masa beban pertama yang perlahan Bersemangat: [ VideobaseTransformations, { Overlay: 'Video: Explorers: LCA-07-Lifecycle-Hooks', ... videobasetransformasi, }, { Overlay: 'Video: Explorers: Transition', kesan: 'peralihan', }, {Flags: 'Layer_apply'}, // { console.log (hasil); });
Menggunakan theSpliceFlag, kami memberitahu Cloudinary untuk menambah video ini secara langsung tanpa peralihan.
Dalam set transformasi seterusnya, kami menambah tiga transformasi yang belum pernah kita lihat sebelum ini:
- Kami setudio_codectononeto mengeluarkan bunyi dari segmen video ini.
- Kami setend_offsetto3, yang bermaksud kami akan mendapat hanya 3 saat pertama video.
- Kami menambah TheAccelerateeffect dengan nilai-25, yang melambatkan video turun sebanyak 25%.
RunningNode Index.jswill Sekarang beri kami video yang bermula dengan hanya di bawah 4 saat senyap, langit berbintang:
Tambahkan lapisan teks ke video menggunakan Cloudinary
Langkah terakhir kami ialah menambah lapisan teks untuk menunjukkan tajuk video!
Overlay teks menggunakan SameoverlayProperty sebagai lapisan lain, tetapi kami lulus objek dengan tetapan untuk font. Cloudinary menyokong pelbagai fon - saya tidak dapat mencari senarai muktamad, tetapi nampaknya sebilangan besar font Google - dan jika anda telah membeli lesen untuk menggunakan fon tersuai, anda boleh memuatkan fon tersuai untuk cloudinary untuk digunakan dalam overlayss teks dengan baik.
Cloudinary.uploader .Explicit ('Explorers/Bumper', { // Kedua -dua sifat ini sepadan dengan permulaan URL: // <https:></https:> ... // sumber_type: 'video', taip: 'muat naik', // "bersemangat" bermaksud kita mahu menjalankan transformasi ini lebih awal untuk mengelakkan // Masa beban pertama yang perlahan Bersemangat: [ VideobaseTransformations, { Overlay: 'Video: Explorers: LCA-07-Lifecycle-Hooks', ... videobasetransformasi, }, { Overlay: 'Video: Explorers: Transition', kesan: 'peralihan', }, {Flags: 'Layer_apply'}, // { console.log (hasil); });
Di samping menetapkan saiz fon dan penjajaran, kami juga menggunakan lebar 500px (yang akan berpusat secara lalai) untuk memastikan teks tajuk kami menghancurkan ke sisi kad tajuk, dan menetapkan tofit thecropvalue, yang akan membungkus tajuk yang lebih panjang. Menetapkan THECOLORTOWHITEMAKES Teks kami kelihatan terhadap latar belakang yang gelap dan berbintang.
Runnode Index.jsto menjana URL dan kami akan melihat video berjenama kami sepenuhnya, termasuk kad tajuk dan bumper!
Bina penjenamaan video anda sekali; Gunakannya di mana -mana sahaja
Mewujudkan bumper, peralihan, dan kad tajuk adalah banyak kerja. Mewujudkan kandungan video berkualiti tinggi juga banyak kerja. Sekiranya kita terpaksa mengedit secara manual setiap video Jamstack Explorers untuk memasukkan kad tajuk dan bumper ini, sangat tidak mungkin kita akan melakukannya.
Kami tahu bahawa satu -satunya cara yang realistik bagi kami untuk menyimpan video secara konsisten berjenama adalah toreduce geseran menambah penjenamaan, dan Cloudinary marilah kita mengautomasikannya sepenuhnya. Ini bermakna kita boleh tetap konsisten tanpa sebarang langkah manual!
Sebagai bonus tambahan, ia juga bermakna bahawa jika kami mengemas kini kad tajuk atau bumper kami pada masa akan datang, kami boleh mengemas kini semua penjenamaan untuk semua video dengan menukar kod di satu tempat. Ini adalah kelegaan yang besar bagi kita, kerana kita tahu bahawa penjelajah akan terus berkembang dan berkembang dari masa ke masa.
Apa yang Harus Dilakukan Seterusnya
Sekarang anda tahu cara menggunakan Cloudinary untuk menambah penjenamaan tersuai, berikut adalah beberapa sumber tambahan untuk membantu anda terus belajar.
- Lihat Kod THESOURCE untuk tutorial ini.
- Lihat kod Jamstack ExplorersSource untuk penjenamaan video.
- Ketahui lebih lanjut mengenai API Transformasi Video Mengenai Kloudinary.
- Ketahui mengenai pembangunan web OnJamstack Explorers.
- Ketahui bagaimana imej media sosial tersuai menggunakan Cloudinary.
- Tonton misi penuh Ben untuk melihat bagaimana semuanya bersatu!
Apa lagi yang boleh anda automasi menggunakan Cloudinary? Berapa banyak masa yang boleh anda simpan dengan mengautomasikan bahagian -bahagian aliran kerja pengeditan video anda? Saya betul -betul jenis nerd yang suka bercakap tentang perkara ini, jadi hantarkan idea anda di Twitter!
Atas ialah kandungan terperinci Trik Cloudinary untuk Video. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam

CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.

Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau

API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.

Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik

Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan

Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum

Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular

Dreamweaver Mac版
Alat pembangunan web visual

VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod