Cara Membuat Kontrol Video HTML5 Kustom untuk Video di Divi

Video HTML5 adalah cara yang nyaman dan efektif untuk menampilkan video di situs web apa pun. Bahkan, Divi menggunakan format video HTML5 untuk menampilkan video di Divi menggunakan Video Module. Namun, secara default, video ini berisi kontrol bawaan (seperti putar, bisu, volume, dll.) yang memiliki desain standar yang bergantung pada browser Anda. Namun, jika Anda ingin menyempurnakan desain kontrol ini, Anda sebenarnya dapat membuat dan menata kontrol eksternal Anda sendiri untuk video HTLM5 Anda.

Dalam tutorial ini, kami akan menunjukkan cara membuat kontrol video HTML5 kustom untuk video di Divi. Untuk melakukan ini, kami akan membuat dan menata tombol kontrol video dan kustom menggunakan Divi Builder. Kemudian kami akan menambahkan beberapa Javascript khusus untuk membuat semuanya berfungsi.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Anda juga dapat melihat codepen ini yang menunjukkan beberapa fungsi yang sama yang ditampilkan dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Ikhtisar Singkat Tujuan kami untuk Tutorial ini

Sintaks dasar untuk video HTML5 akan terlihat seperti ini…

<video controls="">
  <source type="video/mp4" src="video.mp4">
  <source type="video/webm" src="video.webm">
</video>

Perhatikan atribut kontrol di elemen video . Itulah yang digunakan untuk menampilkan kontrol standar yang biasa kita lihat di video HTML5.

Modul video Divi menggunakan struktur elemen video HTML5 yang sama untuk menampilkan video yang dihosting sendiri yang Anda unggah di dalam modul. Jadi ketika kita menggunakan Video Module, kita menggunakan Video HTML5.

Tujuan kami untuk tutorial ini adalah untuk awalnya menyembunyikan kontrol default tersebut untuk video Divi dan membangun beberapa kontrol kustom eksternal kami sendiri menggunakan Divi Builder dan beberapa kode kustom.

Bagian 1: Membuat Video HTML5 di Divi

Di bagian pertama tutorial ini, kita akan membuat Video HTML5 menggunakan Modul Video Divi. Tapi pertama-tama, kita perlu memperbarui latar belakang bagian kita.

Latar Belakang Bagian

Mulailah dengan memperbarui pengaturan bagian untuk bagian default yang tersedia secara default sebagai berikut:

• Warna Kiri Gradien Latar Belakang: rgba(0,0,0,0.8)
• Warna Kanan Gradien Latar Belakang: #000000
• Tempatkan Gradien Di Atas Gambar Latar Belakang: YA
• Gambar Latar Belakang: [unggah gambar pilihan]

Baris Video

Selanjutnya, kita perlu menambahkan baris yang akan berisi video kita. Tambahkan baris satu kolom baru ke bagian tersebut.

Kemudian perbarui pengaturan baris sebagai berikut:

• Lebar: 100%
• Lebar Maks: tidak ada
• Padding: 0px bawah

Membuat Video

Seperti disebutkan sebelumnya, Divi sudah menggunakan elemen video HTML5 dalam Modul Video Divi. Jadi, untuk membuat video, cukup tambahkan modul video baru ke baris/kolom.

Unggah File Video ke Modul Video

Untuk performa maksimal, unggah file video MP4 dan WEBM dari video Anda ke galeri media.

Selanjutnya, tambahkan file video MP4 dan WEBM ke modul video di bawah tab konten:

Perbarui Pengaturan Video

Di bawah tab desain, perbarui yang berikut ini:

• Lebar Maks: 1080px
• Penyelarasan Modul: tengah

Di bawah tab lanjutan, tambahkan ID CSS berikut:

• ID CSS: divi-video-container

Bagian 2: Membuat Bilah Kemajuan

Video HTML menyertakan fungsionalitas bawaan untuk menampilkan bilah kemajuan. Kami dapat menggunakan sedikit kode khusus untuk menambahkan bilah kemajuan kami sendiri untuk video kami.

Baris Bar Kemajuan

Untuk menampilkan bilah kemajuan khusus untuk video, pertama, buat baris satu kolom baru di bawah baris yang berisi video.

Buka pengaturan baris dan perbarui padding sebagai berikut:

• Padding: 10px atas, 0px bawah

Menambahkan HTML Bilah Kemajuan

Untuk menambahkan cuplikan HTML khusus kami untuk menampilkan bilah kemajuan, kami perlu menambahkan modul kode baru ke baris.

Di dalam kotak kode, rekatkan HTML berikut:

<progress id="progress" value="0" min="0">
  <span id="progress-bar"></span>
</progress>

Kami akan menambahkan fungsionalitas yang kami butuhkan ke bilah kemajuan dengan Javascript khusus kami nanti.

Bagian 3: Membuat Tombol Kontrol Video di Divi

Sekarang kita siap untuk mulai menambahkan beberapa tombol kontrol video kustom menggunakan serangkaian modul tombol Divi.

Membuat Baris dan Kolom

Pertama, kita perlu mengatur baris dan kolom kita yang akan berfungsi sebagai bilah/wadah tombol kita.

Baris

Tambahkan baris satu kolom baru di bawah baris yang berisi kode batang kemajuan.

Buka pengaturan baris, dan perbarui yang berikut:

• Lebar Talang: 1
• Padding: 10px atas, 20px bawah

Menambahkan Flex ke Kolom

Cara sederhana untuk mendapatkan perataan horizontal untuk tombol kita adalah dengan menggunakan display:flex pada kolom yang berisi tombol kita. Untuk melakukan ini, buka pengaturan untuk kolom dan tambahkan CSS khusus berikut ke elemen utama:

display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;

Sekarang kolom kita sudah siap, kita siap untuk menambahkan tombol kita.

Tombol Putar / Jeda

Kami akan menjadikan tombol pertama ini sebagai tombol "Putar/Jeda" yang akan mengaktifkan fungsi putar dan jeda untuk video kami. Untuk membuat tombol, tambahkan modul tombol ke kolom.

Buka pengaturan tombol dan perbarui teks tombol:

• Teks Tombol: Putar / Jeda

Di bawah tab desain, gaya tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: YA
• Ukuran Teks Tombol: 18px (desktop), 14px (tablet dan ponsel)
• Warna Teks Tombol: #ffffff
• Warna Latar Belakang Tombol: rgba(255,255,255,0.15)
• Lebar Batas Tombol: 0px
• Tampilkan Ikon Tombol: TIDAK

Perbarui margin untuk tombol sebagai berikut:

• Margin: 10px atas, 10px kiri, 10px kanan

Di bawah tab lanjutan, tambahkan ID CSS berikut:

• ID CSS: divi-play-pause

Tombol Berhenti

Selanjutnya adalah tombol Stop. Tombol ini akan menghentikan video dan mengembalikannya ke titik awal.

Untuk membuat tombol, duplikat modul tombol “play/pause”.

Kemudian perbarui teks tombol:

• Teks Tombol: Berhenti

Dan berikan tombol ID CSS khusus:

• ID CSS: divi-stop

Tombol Bisu

Untuk membuat tombol Mute yang akan menonaktifkan volume video, duplikat tombol "Stop" yang baru saja kita buat.

Perbarui teks tombol:

• Teks Tombol: Bisukan

Kemudian berikan ID CSS khusus:

• ID CSS: divi-mute

Tombol Volume Naik

Tombol kami berikutnya akan meningkatkan volume video secara bertahap setiap kali Anda mengkliknya. Kami akan menyebutnya tombol Volume Naik.

Untuk membuat tombol, duplikat modul tombol "Bungkam".

Kemudian perbarui teks tombol:

• Teks Tombol: Vol

Di bawah tab desain, tambahkan panah atas di samping teks tombol dengan memperbarui yang berikut ini:

• Tampilkan Ikon Tombol: YA
• Ikon Tombol: panah atas (lihat tangkapan layar)
• Warna Ikon Tombol: #00a9d8
• Hanya Tampilkan Ikon Saat Arahkan ke Tombol: TIDAK

Kemudian perbarui padding tombol sebagai berikut:

• Padding: 0.5em kiri, 1.5em kanan

Kemudian perbarui ID CSS:

• ID CSS: divi-volinc

Tombol Volume Turun

Kami tidak dapat memiliki tombol "Naikkan Volume" dengan juga memiliki tombol "Turunkan Volume" untuk secara bertahap mengurangi volume video dengan setiap klik.

Untuk membuat tombol “Volume Turun”, gandakan tombol “Volume Naik” yang baru saja kita buat.

Kemudian perbarui ikon tombol menjadi ikon "panah bawah".

Kemudian perbarui ID CSS:

• ID CSS: divi-voldec

Tombol Tampilan Besar

Untuk tombol terakhir kami, kami akan membuat tombol "Tampilan Besar" yang akan menambah lebar wadah video saat diklik.

Untuk membuat tombol, duplikat tombol "Bungkam". Kemudian seret tombol duplikat di bawah tombol "Volume Turun" sehingga berada di ujung kanan bilah tombol.

Buka pengaturan untuk tombol duplikat dan perbarui teks tombol:

• Teks Tombol: Tampilan Besar

Kemudian berikan tombol ID CSS khusus:

• ID CSS: divi-besar-tampilan

Bagian 4: Menambahkan Kode CSS dan JS Kustom

Sekarang setelah semua elemen Divi kami dibuat, kami siap untuk memasukkan kode khusus yang diperlukan untuk membuat semuanya berfungsi.

Lanjutkan dan tambahkan modul kode lain di bawah modul kode yang berisi HTML bilah kemajuan di baris kedua bagian kita.

CSS

Di kotak kode, tempel CSS berikut memastikan untuk membungkus CSS di dalam tag gaya yang diperlukan.

.control-button-active,
#divi-volinc:active,
#divi-voldec:active,
#divi-play-pause:active,
#divi-stop:active {
  background: #666666 !important;
}

#progress {
  display: block;
  width: 100%;
}

#divi-video-container.expand-video {
  max-width: 1400px;
}

JavaScript/JQuery

Di bawah CSS (tag gaya akhir), tempel kode JS berikut memastikan untuk membungkus kode di dalam tag skrip yang diperlukan.

jQuery(document).ready(function ($) {
  $diviVideoContainer = $("#divi-video-container");
  $diviVideo = $("#divi-video-container video");
  videoElement = $("#divi-video-container video")[0];
  $play = $("#divi-play");
  $playPause = $("#divi-play-pause");
  $stop = $("#divi-stop");
  $mute = $("#divi-mute");
  $volinc = $("#divi-volinc");
  $voldec = $("#divi-voldec");
  $progress = $("#progress");
  progressElement = $("#progress")[0];
  $progressBar = $("#progress-bar");
  $largeView = $("#divi-large-view");

  videoElement.controls = false;

  $diviVideo.on("loadedmetadata", function () {
    $progress.attr("max", videoElement.duration);
  });

  $diviVideo.on("timeupdate", function (e) {
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
    );
  });

  $diviVideo.on("timeupdate", function () {
    if (!$progress.attr("max")) {
      $progress.attr("max", videoElement.duration);
      progressElement.value = videoElement.currentTime;
      $progressBar.css(
        "width",
        Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
          "%"
      );
    }
  });

  $playPause.on("click", function (e) {
    e.preventDefault();
    if (videoElement.paused || videoElement.ended) {
      videoElement.play();
    } else {
      videoElement.pause();
    }
  });

  $stop.on("click", function (e) {
    e.preventDefault();
    videoElement.pause();
    videoElement.currentTime = 0;
    progressElement.value = 0;
  });

  $mute.on("click", function (e) {
    e.preventDefault();
    videoElement.muted = !videoElement.muted;
    $(e.target).toggleClass("control-button-active");
  });

  $volinc.on("click", function (e) {
    e.preventDefault();
    alterVolume("+");
  });

  $voldec.on("click", function (e) {
    e.preventDefault();
    alterVolume("-");
  });

  alterVolume = function (dir) {
    currentVolume = Math.floor(videoElement.volume * 10) / 10;
    if (dir === "+") {
      if (currentVolume < 1) videoElement.volume += 0.1;
    } else if (dir === "-") {
      if (currentVolume > 0) videoElement.volume -= 0.1;
    }
  };

  $largeView.on("click", function (e) {
    e.preventDefault();
    $(e.target).toggleClass("control-button-active");
    $diviVideoContainer.toggleClass("expand-video");
  });
  //shows default controls when hovering over video
  $diviVideo.hover(function () {
    if (!videoElement.controls) {
      videoElement.controls = true;
    } else {
      videoElement.controls = false;
    }
  });
});

Memecah Kode

Variabel Menunjuk ke elemen HTML dan Tombol Divi

Untuk memulai, kita perlu mendeklarasikan variabel yang menunjuk ke setiap elemen Divi yang memiliki ID CSS yang kita tentukan. Kami juga membutuhkan dua variabel penting yang menunjuk ke elemen HTML yang sebenarnya (bukan objek jQuery). Ini termasuk videoElement (yang menunjuk ke elemen video HTML) dan progressElement (yang menunjuk ke elemen kemajuan HTML).

$diviVideoContainer = $("#divi-video-container");
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$play = $("#divi-play");
$playPause = $("#divi-play-pause");
$stop = $("#divi-stop");
$mute = $("#divi-mute");
$volinc = $("#divi-volinc");
$voldec = $("#divi-voldec");
$progress = $("#progress");
progressElement = $("#progress")[0];
$progressBar = $("#progress-bar");
$largeView = $("#divi-large-view");

Setelah variabel berada di tempatnya, kami menyembunyikan kontrol video HTML default.

videoElement.controls = false;

Selanjutnya, kita perlu membuat bilah kemajuan kita bertambah lebar relatif terhadap waktu dan durasi video saat ini.

Setelah video memuat meta data (menggunakan peristiwa loadmetadata ), pada elemen progres, kami menetapkan atribut maks dengan nilai yang sama dengan durasi video .

$diviVideo.on("loadedmetadata", function () {
  $progress.attr("max", videoElement.duration);
});

Kemudian kami menggunakan acara timeupdate untuk memperbarui nilai dan lebar bilah kemajuan untuk menunjukkan posisi pemutaran saat ini.

$diviVideo.on("timeupdate", function (e) {
  progressElement.value = videoElement.currentTime;
  $progressBar.css(
    "width",
    Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
  );
});

Kami juga menambahkan fallback untuk browser seluler untuk berjaga-jaga jika atribut max elemen kemajuan tidak disetel dengan benar pada saat ini.

$diviVideo.on("timeupdate", function () {
  if (!$progress.attr("max")) {
    $progress.attr("max", videoElement.duration);
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
        "%"
    );
  }
});

Selanjutnya, kita mulai membuat fungsi yang melakukan hal-hal saat mengklik tombol kita.

Untuk tombol play / pause, kita beralih bermain () dan metode jeda () dengan menggunakan Media API atribut berhenti dan berakhir dengan pernyataan jika.

$playPause.on("click", function (e) {
  e.preventDefault();
  if (videoElement.paused || videoElement.ended) {
    videoElement.play();
  } else {
    videoElement.pause();
  }
});

Untuk tombol berhenti, kami menjeda video dan mengembalikan nilai kemajuan dan waktu saat ini ke 0 .

$stop.on("click", function (e) {
  e.preventDefault();
  videoElement.pause();
  videoElement.currentTime = 0;
  progressElement.value = 0;
});

Untuk tombol mute, kami mengaktifkan atribut mute dan juga mengaktifkan kelas yang akan menata tombol dengan latar belakang yang lebih terang saat mute.

$mute.on("click", function (e) {
  e.preventDefault();
  videoElement.muted = !videoElement.muted;
  $(e.target).toggleClass("control-button-active");
});

Untuk tombol Volume, satu didefinisikan untuk meningkatkan volume saat klik ( $volinc ) dan yang lainnya didefinisikan untuk mengurangi volume saat klik ( $voldec ). Ini dilakukan dengan menggunakan fungsi alterVolume() yang memeriksa parameter dir untuk "+" atau "-" dan menambah atau mengurangi volume secara bertahap pada setiap klik.

$volinc.on("click", function (e) {
  e.preventDefault();
  alterVolume("+");
});

$voldec.on("click", function (e) {
  e.preventDefault();
  alterVolume("-");
});

alterVolume = function (dir) {
  currentVolume = Math.floor(videoElement.volume * 10) / 10;
  if (dir === "+") {
    if (currentVolume < 1) videoElement.volume += 0.1;
  } else if (dir === "-") {
    if (currentVolume > 0) videoElement.volume -= 0.1;
  }
};

Tombol Tampilan Besar mengaktifkan kelas CSS yang menyesuaikan lebar maksimum penampung video saat diklik.

$largeView.on("click", function (e) {
  e.preventDefault();
  $(e.target).toggleClass("control-button-active");
  $diviVideoContainer.toggleClass("expand-video");
});

Dan karena contoh ini tidak berisi semua kontrol dan fungsi yang tersedia dalam kontrol video default, berikut adalah fungsi yang menunjukkan atribut kontrol tersebut saat mengarahkan kursor ke video.

$diviVideo.hover(function () {
  if (!videoElement.controls) {
    videoElement.controls = true;
  } else {
    videoElement.controls = false;
  }
});

Hasil Akhir

Berikut adalah hasil akhirnya.

Dan inilah cara tumpukan kontrol di ponsel.

Anda juga dapat melihat codepen ini yang menunjukkan fungsi yang sama.

Jelajahi Lebih Banyak

Jika Anda terbiasa dengan HTML dan Javascript dan tertarik untuk menambahkan lebih banyak kontrol dan fungsionalitas khusus ke Video HTML5 Anda, Anda dapat memeriksa panduan ini tentang cara membuat pemutar video dari awal. Anda mungkin juga ingin memeriksa API HTMLMediaElement untuk melihat kemungkinan di sana.

Saya berharap dapat berbagi cara yang lebih bermanfaat untuk memanipulasi video HTML5 dan Divi dalam waktu dekat.

Pikiran Akhir

Membuat beberapa kontrol khusus eksternal untuk video Anda di Divi dapat membuka pintu untuk desain dan fungsionalitas yang unik. Memang, contoh dari tutorial ini tidak mengeksplorasi semua opsi (atau kontrol) yang tersedia. Dan, fungsinya terbatas pada satu video pada satu halaman, bukan beberapa. Jadi sangat ideal untuk menyesuaikan salah satu video utama yang ingin Anda tampilkan. Tapi mudah-mudahan, ini akan berfungsi sebagai pengantar yang solid untuk apa yang diperlukan untuk membuat beberapa kontrol video HTML5 kustom Anda sendiri untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!