Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Cara Menambahkan Stellar Video Player ke Situs Wordpress-mu

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Tidak bisa diragukan lagu, jika diberikan plihan, kebanyakan pengguna internet akan memilih untuk menonton sebuah video pendek dibandingkan membaca paragraph teks. Oleh karenanya, salah satu cara terbaik untuk meninkgatkan pengunjung dan tingkat klik dari situs Wordpress-mu adalah dengan menambahkan konten video ke dalamnya. Untuk menampilkan konten semacam itu, tentu saja, kamu memerlukan pemutar video yang fleksibel.

Stellar Video Player adalah sebuah plugin premium wordpress yang tersedia di CodeCanyon yang merupakan salah satu pemutar video yang paling kuat dan mudah untuk dikostumisasi yang bisa kamu dapatkan pada tahun 2019 ini. Dibuat oleh pemenang Envato award, Creative Media, plugin ini mendukung aneka macam format video, beberapa layanan hosting video yang populer, dan siaran langsung juga.

Dalam panduan ini, saya akan menunjukkan padamu cara untuk menambahkannya ke situs Wordpress-mu dan menampilkan aneka macam konten video dengannya.

Prasyarat

Untuk melanjutkan, kamu membutuhkan:

  • WordPress 4.4.1 atau lebih tinggi
  • dan sebuah akun CodeCanyon

1. Memasang Stellar Video Player

Plugin Wordpress Stellar Video Player tersedia sebagai item premium di CodeCanyon.

Stellar Video Player on CodeCanyon

Ketika kamu telah membeli lisensinya, kamu bisa mengunuduhnya sebagai berkas ZIP yang berisi source code dan dokumentasi dari plugin tersebut.

Setelah kamu mengekstrak berkas ZIP-nya, kamu akan memiliki akses ke berkas plugin bernama Stellar-video-player.zip, yang dengannya kamu bisa memasang plugin tersebut hanya dengan beberapa klik.

Mulai dengan membuka panel admin dari situs Wordpress-mu dan pergi ke bagian Plugins > Add new. Lalu tekan tombol Upload plugin dan pilih berkas plugin-nya.

Plugin installation screen

Terakhir, tekan tombol Install now untuk memula pemasangan.

Setelah pemasangan berhasil, pastikan memu mengklik tautan Activate yang muncul di bawah plugin untuk mengaktifkannya.

Pada titik ini, kamu bisa mulai menggunakan pluginnya.

2. Membuat Sebuah Pemutar Baru

Plugin Stella Video Player mengiznkanmu untuk membuat beberapa pemutar video untuk situs Wordpress-mu. Tiap pemutar akan memiki kode pendek unikya tersendiri yang bisa kamu gunakan untuk melampirkannya pada kiriman atau halaman-mu.

Untuk membuat pemutar pertamamu, pergi ke Settings > Stellar Video Player pada admin panel.

Pada halaman yang terbuka, tekan tombol Create New Player.

Player management screen

Kamu akan diminta untuk menspesifikasikan jenis dari video yang ingin kamu mainkan di pemutar video barumu. Stellar Video Player saat ini bisa memainkan video self-hosted, video dari YouTube, dan video dari Vimeo.

Untuk saat ini, mari buat sebuah pemutar yang bisa memainkan berkas MP4 yang kamu miliki akses langsung kepadanya. Pilih pilihan HTML5 (self-hosted) dan tekan tombol Add Video.

Video settings screen

Pada pael konfigurasi yang muncul, kamu harus menunjuk pemutar videomu ke self-hosted video-mu. Jangan ragu untuk menggunakan URL dari berkas MP4 apapun yang ada dalam server WordPress-mu. Atau, kamu bisa menggunakan berkas MP4 yang kamu punya di platform berbasis awan seperti Google Drive, Amazon S3, dan DropBox.

Perlu dicatat juga bahwa plugin Stellar Video Player mengizinkanmu untuk menspesifikasikan dua URL untuk video yang sama: satu untuk versi HD, dan yang satu lagi untuk versi SD. Dengan menyediakan kedua versi, kamu bisa memastikan bahwa pengguna memiliki pengalaman yang optimal bahkan ketika koneksi internet mereka lambat.

Selanjutnya kamu harus menyambahkan judul dan deskripsi dari video kamu. Jika kamu mau, kamu juga bisa mengasosiasikan sebuah thumbnail bersamanya.

Configuration details of self-hosted video

Biarkan kolom lainnya apa adanya dan tekan tombol Save Changes.

Jika kamu ingin menambah lebih banyak video ke dalam pemutar yang sama. Cukup menekan tombol Add Video kembali.

3. Menggunakan Pemutarnya

Sekarang pemutar video pertamamu telah siap, kamu bisa kembali ke dasbor dari plugin Stellar Video Player untuk melihat kode ringkasnya.

List of players

Perlu dicatat bahwa plugin Wordpress ini akan selalu membuat kode ringkas yang mudah untuk diingat berdasarkan ID dari pemutarnya. Contohnya, jika ID pemutarmu adalah 1, kode ringkasnya akan menjadi [Stellar_video_player id="1"]

Untuk menambahkan pemutarnya ke kiriman manapun di situsmu, yang kamu perlu lakukan adalah memasukkan kode ringkas tersebut ke tempat yang kamu inginkan. Berikut cuplikan layar yang menunjukan caranya:

Adding shortcode to a post

Setelah kamu mempublikasikan kirimannya dan mengunjunginya, kamu bisa melihat pemutar barumu.

Video player playing a video

4.. Mengostumisasi Pemutar Video

Jika kamu tidak puas dengan tampilan pemutar video-mu saat ini, kamu bisa mengostumisasinya dengan pergi ke halaman Player settings, di mana kamu bisa mengakses banyak pilihan konfigurasi. Contohnya, pada bagian General options, kamu bisa mengganti detil seperti rasio dari pemutarnya, ukuran dari progress bar, tombol kontrol yang dimunculkan dan ukurannya.

General options section

Jika kamu ingin mengganti keseluruhan tema dari pemutarmu, kamu harus pergi ke bagian Layout & Design. Saat ini, plug in ini menyediakan dua tema: tema gelap, dan tema terang. Pemutar yang kamu buat di tahap sebelumnya, pada dasarnya, menggunakan tema gelap. Berikut tampilannya jika kamu berganti ke tema terang.

Video player with a light theme

Sebagai tambahan, pada bagian yang sama, kamu bisa mengganti akses warna yang digunakan pemutarnya.

Pada bagian Functionality, kamu bisa mengatur cara pemutarmu berperilaku setelah video telah usai. Pada dasarnya, dia akan memutar video berikutnya yang ada di dalam playlist.

Terakhir, jika kamu tidak ingin mengizinkan pengguna untuk mengunduh videomu, kamu bisa pergi ke bagian HTML5 player dan mengaktifkan pilihan Hide video source.

5. Menambahkan iklan

Dengan plugin Stella Video Player, memonetisasi video-mu menjadi sangat mudah karena dia mengizinkanmu untuk menambahkan aneka jenis iklan ke dalamnya.

Saat ini plugin ini mengizinkanmu untuk menambahkan jenis-jenis iklan berikut ke self-hosted video manapun.

  • Iklan yang tampil sebelum video-mu diputar
  • Iklan yang muncul di tengah-tengah dari video-mu
  • Iklan yang muncul setelah video-mu telah usai
  • dan sebuah gambar pop-up yang bisa muncul kapanpun selama video berlangsung

Untuk menampilkan iklan tersebut, pergi ke bagian Video settings dari pemutar video-mu. Di sini, tiap jenis dari iklan memiliki tiga kolom penting: Sebuah tombol untuk mengaktifkan dan mematikan iklan, sebuah kolom input di mana kamu bisa memasukkan URL yang akan menjadi alamat di mana pengguna akan dialihkan ketika mengklik iklan tersebut, dan sebuah kolom inout di mana kamu bisa menspesifikasikan lokasi berkas MP4 dari iklanmu.

Pre-roll ad settings

Jika kamu ingin mengizinkan pengguna bisa melewati iklanmu setelah beberapa detik kamu bisa menggunakan kolom Skip tiemr (sec).

Setelah mengisi kolom-kolom berikut, kamu bisa mengfinalisasinya dengan menekan tombol Save changes. Ketika kamu kembali ke blog-mu sekarang, kamu akan melihat pemutarmu akan memainkan berkas MP4 pada waktu yang telah ditentukan.

Player showing an ad

6. Menyematkan Video Youtube

Pemutar video yang kamu buat sebelumnya anya bisa menangani video yang kamu miliki akses langsung kepadanya. Jika kamu ingin menampilkan video Youtube atau Vimeo di blog-mu, kamu harus membuat tipe pemutar yang berbeda.

Untuk membuat sebuah pemutar yang terpisah dari video YouTube-mu, tekan tombol Create New Player lagi pada halaman pengaturan pemutarnya. Kali ini pada bagian Video settings, pilih YouTube dan tekan tombol Add Video.

Kamu akan ditampilkan dengan formulir konfigurasi yang sedikit berbeda sekarang. Pada formulir ini, kamu harus menspesifikasikan video yang ingin kamu mainkan dengan memasukkan ID YouTube-nya. Selain itu, kamu bisa menspesifikasikan bagian video mana yang ingin kamu mainkan dengan menggunakan kolom starts on second dan end on second.

Configuring YouTube video player

Sisa dari konfigurasi yang lainnya identik dengan pemutar untuk self-hosted video. Ini berarti, kamu bisa menambahkan aneka iklan, thumbnail khusus, dan judul khusus ke video.

Seperti biasa, kirim formulir dengan menkan tombol Save changes.

Jika kamu menyematkan pemutar ini ke dalam kiriman, dia akan nampak seperti berikut:

Video player showing a YouTube video

Jika kamu ingin pemutar ini untuk memainkan lebih dari satu video, kamu bisa kembali ke halaman Video settings dan tekan tombol Add Video kembali. Namun, jika kamu ingin memainkan banyak video YouTube, kamu bisa menghemat waktumu dengan menggunakan tipe pemutar yang lainnya.

Plugin Stellar Video Player mengizinkanmu untuk menyematkan kesuluruhan playlist dari video YouTube, dan bahkan semua video dari sebuah channel YouTube. Untuk membuat sebuah pemutar yang mendukung fitur ini, kamu harus memilih pilihan YouTube playlist atau YouTube channel saat membuat pemutar-mu. Lalu yang kamu perlu lakukan dari memasukkan ID playlist atau ID channel.

Creating a playlist player

7. Menggunakan sebuah Lightbox

Plugin Stellar Viode Player juga mengizinkanmu untuk memainkan video-mu dalam sebuah jendela khusus. Menggunakan fitur ini akan meningkatkan pengalaman pengguna karena dia akan menggelapkan sebagian dari halaman dan membuat pengguna dapat fokus ke video.

Untuk mengaktifkan fitur ini, pergi ke bagian Player settings > Lightbox options dari pemutar manapun yang telah kamu buat dan aktifkan Lightbox mode. Setelah kamu melakukannya, video-mu akan nampak seperti ini:

Video player with a lightbox

Kesimpulan

Dalam panduan ini, kamu telah belajar cara mengintegrasikan plugin Stellar Video player dengan situs Worpress-mu. Kamu juga belaar cara menampilkan video, playlist, dan iklan tanpa menulis sebaris kode-pun.

Pemutar video yang kamu buat dengan plugin Wordpress ini akan tampil bagus dalam browser modern manapun, baik desktop maupun ponsel. Dia juga sangat ringan.

Untuk mempelajari lebih lanjut mengenai plugin ini, Lihat dokumentasi yang ada pada berkas ZIP yang telah kamu unduh.

Jika kamu ingin belajar lebih banyak mengenai plugin pemutar video untuk Wordpress, cek kiriman-kiriman keren lainnya di sini, Envato Tuts+.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.