Trik Cloudinary untuk Video

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:

1. Adegan tajuk
2. Bumper intro pendek (klip video) yang menunjukkan penjenamaan Jamstack Explorers
3. 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 atau markup khusus lain untuk menyediakan pilihan moden dengan JPG Fallback untuk pelayar yang lebih tua.

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:

1. Overlay
2. Peralihan
3. Overlay teks
4. 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:

1. Ekstrak klip video pendek untuk berfungsi sebagai latar belakang kad tajuk
2. 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:

1. Kami setudio_codectononeto mengeluarkan bunyi dari segmen video ini.
2. Kami setend_offsetto3, yang bermaksud kami akan mendapat hanya 3 saat pertama video.
3. 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!