Dokumen ini dibuat untuk membantu pengguna Framer di Indonesia yang menghadapi kesulitan karena kurangnya sumber materi dalam Bahasa Indonesia. Kami menerjemahkan konten dari blog resmi dan menambahkan informasi yang berguna untuk praktik kerja. Kami berharap ini dapat sedikit membantu Anda yang menggunakan FramerFramer.

Cara Menambahkan Komponen Video

1. Klik tombol [+] Insert pada menu atas

2. Pindah ke bagian Media

3. Seret komponen video yang diinginkan ke kanvas

Komponen yang tersedia meliputi komponen Video standar, komponen YouTube, dan komponen Vimeo. Opsi yang dapat diatur akan berbeda tergantung pada komponen yang dipilih.

Pengaturan Detail Komponen Video

Setelah memasukkan video di FramerFramer, Anda dapat menyesuaikan berbagai properti melalui panel di sebelah kanan untuk membentuk konfigurasi yang diinginkan. Setiap elemen berpengaruh langsung pada pengalaman pengguna, jadi penting untuk memahami makna setiap pengaturan sebelum menggunakannya.

• Source (Sumber)

  Pilih tab Upload, kemudian klik tombol Choose File untuk mengunggah video langsung dari file lokal Anda, format yang umum digunakan adalah .mp4 dan .webm. Jika ingin menggunakan URL dari luar, pilih tab URL. Masukkan URL video YouTube atau Vimeo, dan video akan tertanam secara otomatis tanpa perlu menulis kode. Thumbnail pratinjau juga akan dihasilkan secara otomatis sehingga lebih mudah digunakan.

• Playing (Status Pemutaran)

  Setel ke Yes untuk memutar video secara otomatis begitu komponen dirender, atau setel ke No agar video hanya diputar setelah pengguna menekan tombol putar.
  Catatan : Pada autoplay, pengaturan mute wajib diterapkan.

• Radius (Radius Tepi)

  Opsi untuk membuat sudut video menjadi bulat.
  Masukkan angka atau tekan ikon paling kanan untuk membuat semua atau hanya sudut tertentu menjadi bulat.

• Poster (Thumbnail)

  Memilih Yes memungkinkan Anda menambahkan thumbnail yang muncul sebelum video diputar. Gunakan tombol Image > Upload untuk menyisipkan gambar yang diinginkan, dengan ukuran minimum poster 60 x 30 piksel.
  Catatan : Thumbnail dapat membantu dalam optimalisasi mesin pencari (SEO).

• Background (Warna Latar Belakang)

  Menentukan warna latar belakang yang akan ditampilkan di sekitar area kosong video.

• Start Time (Waktu Mulai)

  Menentukan titik mulai video dalam persen.
  (Misalnya: jika diatur ke 10%, pemutaran video dimulai dari titik 10%.)

  
  

• Loop (Pemutaran Ulang)

  Setel ke Yes agar video otomatis diputar ulang setelah selesai.
  Cocok digunakan untuk video demo pendek atau video yang berisi efek berulang.

  
  

• Fit (Penyesuaian Rasio Layar)

  Menentukan bagaimana video disesuaikan dengan area komponen.

• Controls (Kontrol Pemutaran)

  Pilih Show untuk menampilkan kontrol seperti tombol play/stop, lini waktu, dll.
  Pilih Hide untuk menyembunyikan antarmuka kontrol dan membatasi interaksi pengguna dengan video.

  
  

• Muted (Dibisukan)

  Karena autoplay memerlukan Muted dalam posisi ‘Yes’, untuk video yang memerlukan suara, aturlah kontrol video pada 'Show' agar pengguna dapat memilih sendiri.

Panduan Pengaturan Komponen YouTube

Di FramerFramer, Anda dapat dengan mudah menanamkan video hanya dengan memasukkan tautan YouTube. Selain pengaturan dasar, Anda juga dapat menyesuaikan autoplay, kualitas thumbnail, warna tombol, dan lain-lain untuk menyesuaikan dengan berbagai kebutuhan.

• Video

  Bagian untuk memasukkan URL video YouTube. Mendukung format seperti https://youtu.be/... atau https://www.youtube.com/watch?v=....

  
  

• Autoplay (Pemutaran Otomatis)

  Off: Pengaturan default. Pengguna harus mulai memutar video secara manual.
  On: Video dimainkan secara otomatis ketika halaman dimuat.
  Namun, pilihan Mute harus diaktifkan agar diterima di sebagian besar peramban.
  Catatan : Properti integrasi FramerFramer dengan YouTube terbatas pada URL saja, pengaturan seperti Add Fetch tidak didukung.

  
  

• Thumbnail (Kualitas Thumbnail)

  Thumbnail digunakan untuk optimalisasi performa, sebagai pratinjau sebelum video dimuat.
  Opsi: Low Quality, Medium Quality (default), High Quality, Off
Catatan : Untuk halaman yang memprioritaskan performa, menetapkan thumbnail disarankan untuk mengoptimalkan situs.

  
  

• Color (Warna Pemain)

  Pilih warna antarmuka pemain YouTube.
  Opsi: Red (tema YouTube standar), White (tema antarmuka terang)

Panduan Pengaturan Komponen Vimeo

Vimeo sering kali digunakan pada konten video berkualitas tinggi atau situs portofolio yang berfokus pada desain. Di FramerFramer, Anda dapat dengan mudah memasukkan Vimeo dengan URL dan menyesuaikan beberapa pengaturan untuk mode pemutaran secara rinci.

• URL

  Bagian untuk memasukkan tautan video Vimeo.
  Contoh: https://vimeo.com/123456789

  
  

• Controls (Kontrol Pemain)

  Show: Menampilkan kontrol seperti tombol play/pause, volume, layar penuh, dll.
  Hide: Menyajikan video tanpa antarmuka, baik untuk presentasi portofolio atau pengenalan karya seni yang fokus pada visual.

  
  

• Autoplay (Pemutaran Otomatis)

  Yes: Video otomatis diputar saat halaman dimuat. Namun, Mute harus diaktifkan agar banyak peramban mengizinkannya.
  No: Video hanya diputar ketika pengguna memulainya secara manual.

Perhatian Khusus Autoplay

Sebagian besar peramban terkini seperti Chrome dan Safari memblokir autoplay jika video berisi suara. Oleh karena itu, jika ingin menggunakan autoplay, pastikan opsi Muted juga diaktifkan. Untuk video yang memerlukan suara, lebih baik mengatur pemutaran setelah interaksi pengguna, seperti klik.

Catatan : Anda juga dapat mengatur video untuk diputar otomatis ketika berada dalam area pandang pengguna. Lihat panduan resmi FramerFramer

Pertimbangan Aksesibilitas Video

Jika video tidak mengandung audio, sebaiknya menyediakan deskripsi teks sederhana di bawah video untuk membantu pengguna tunarungu atau yang menonaktifkan suara saat mengakses situs.

Catatan : Contoh aksesibilitas yang baik dapat ditemukan di panduan ini.

Artikel ini diadaptasi dari konten ‘Adding videos’ yang diterjemahkan dari blog resmi FramerFramer.