วิธีสร้างการควบคุมวิดีโอ HTML5 ที่กำหนดเองสำหรับวิดีโอใน Divi

วิดีโอ HTML5 เป็นวิธีที่สะดวกและมีประสิทธิภาพในการแสดงวิดีโอบนเว็บไซต์ใดๆ อันที่จริง Divi ใช้รูปแบบวิดีโอ HTML5 เพื่อแสดงวิดีโอใน Divi โดยใช้โมดูลวิดีโอ อย่างไรก็ตาม ตามค่าเริ่มต้น วิดีโอเหล่านี้มีตัวควบคุมในตัว (เช่น เล่น ปิดเสียง ระดับเสียง ฯลฯ) ที่มีการออกแบบมาตรฐานซึ่งขึ้นอยู่กับเบราว์เซอร์ของคุณ แต่ถ้าคุณต้องการปรับปรุงการออกแบบตัวควบคุมเหล่านี้ คุณสามารถสร้างและกำหนดรูปแบบการควบคุมภายนอกของคุณเองสำหรับวิดีโอ HTLM5 ของคุณได้

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างการควบคุมวิดีโอ HTML5 แบบกำหนดเองสำหรับวิดีโอใน Divi ในการทำเช่นนี้ เราจะสร้างและจัดรูปแบบวิดีโอและปุ่มควบคุมที่กำหนดเองโดยใช้ Divi Builder จากนั้นเราจะเพิ่ม Javascript แบบกำหนดเองเพื่อให้ใช้งานได้ทั้งหมด

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

คุณยังสามารถดูโค้ดเพนนี้ที่สาธิตการทำงานแบบเดียวกันในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

ภาพรวมโดยย่อของเป้าหมายของเราสำหรับบทช่วยสอนนี้

ไวยากรณ์พื้นฐานสำหรับวิดีโอ HTML5 จะมีลักษณะดังนี้...

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

สังเกตแอตทริบิวต์ การควบคุม ในองค์ประกอบ วิดีโอ นั่นคือสิ่งที่ใช้เพื่อแสดงการควบคุมมาตรฐานที่เราเห็นในวิดีโอ HTML5 ตามปกติ

โมดูลวิดีโอของ Divi ใช้โครงสร้างองค์ประกอบวิดีโอ HTML5 เดียวกันเพื่อแสดงวิดีโอที่โฮสต์เองซึ่งคุณอัปโหลดภายในโมดูล ดังนั้น เมื่อเราใช้โมดูลวิดีโอ เรากำลังใช้วิดีโอ HTML5

เป้าหมายของเราสำหรับบทช่วยสอนนี้คือการซ่อนการควบคุมเริ่มต้นสำหรับวิดีโอ Divi และสร้างการควบคุมแบบกำหนดเองภายนอกบางส่วนของเราโดยใช้ Divi Builder และโค้ดที่กำหนดเองบางส่วน

ส่วนที่ 1: การสร้างวิดีโอ HTML5 ใน Divi

ในส่วนแรกของบทช่วยสอนนี้ เราจะสร้างวิดีโอ HTML5 โดยใช้ Divi Video Module แต่ก่อนอื่น เราต้องอัปเดตพื้นหลังส่วนของเรา

ภูมิหลังของมาตรา

เริ่มต้นด้วยการอัปเดตการตั้งค่าส่วนสำหรับส่วนเริ่มต้นที่พร้อมใช้งานตามค่าเริ่มต้นดังนี้:

• พื้นหลังไล่ระดับสีซ้าย: rgba(0,0,0,0.8)
• ไล่สีพื้นหลังด้านขวา: #000000
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่
• ภาพพื้นหลัง: [อัปโหลดรูปภาพที่เลือก]

แถววิดีโอ

ต่อไป เราต้องเพิ่มแถวที่จะมีวิดีโอของเรา เพิ่มแถวหนึ่งคอลัมน์ใหม่ในส่วน

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: none
• ช่องว่างภายใน: 0px ด้านล่าง

การสร้างวิดีโอ

ดังที่กล่าวไว้ก่อนหน้านี้ Divi ใช้องค์ประกอบวิดีโอ HTML5 ภายในโมดูลวิดีโอ Divi แล้ว ดังนั้น ในการสร้างวิดีโอ เพียงเพิ่มโมดูลวิดีโอใหม่ในแถว/คอลัมน์

อัปโหลดไฟล์วิดีโอไปยังโมดูลวิดีโอ

เพื่อประสิทธิภาพสูงสุด ให้อัปโหลดทั้งไฟล์วิดีโอ MP4 และ WEBM ของวิดีโอของคุณไปยังแกลเลอรีสื่อ

ถัดไป เพิ่มไฟล์วิดีโอ MP4 และ WEBM ไปยังโมดูลวิดีโอภายใต้แท็บเนื้อหา:

อัปเดตการตั้งค่าวิดีโอ

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ความกว้างสูงสุด: 1080px
• การจัดตำแหน่งโมดูล: ศูนย์

ภายใต้แท็บขั้นสูง เพิ่มรหัส CSS ต่อไปนี้:

• CSS ID: divi-video-container

ส่วนที่ 2: การสร้างแถบความคืบหน้า

วิดีโอ HTML มีฟังก์ชันในตัวเพื่อแสดงแถบความคืบหน้า เราสามารถใช้โค้ดที่กำหนดเองเล็กน้อยเพื่อเพิ่มแถบความคืบหน้าสำหรับวิดีโอของเรา

แถวแถบความคืบหน้า

หากต้องการแสดงแถบความคืบหน้าที่กำหนดเองสำหรับวิดีโอ ขั้นแรก ให้สร้างแถวหนึ่งคอลัมน์ใหม่ใต้แถวที่มีวิดีโอ

เปิดการตั้งค่าแถวและอัปเดตการเติมดังนี้:

• ช่องว่างภายใน: 10px บน, 0px ด้านล่าง

การเพิ่มแถบความคืบหน้า HTML

ในการเพิ่มข้อมูลโค้ด HTML ที่กำหนดเองเพื่อแสดงแถบความคืบหน้า เราจำเป็นต้องเพิ่มโมดูลโค้ดใหม่ลงในแถว

ภายในกล่องโค้ด ให้วาง HTML ต่อไปนี้:

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

เราจะเพิ่มฟังก์ชันการทำงานที่เราต้องการในแถบความคืบหน้าด้วย Javascript ที่กำหนดเองในภายหลัง

ส่วนที่ 3: การสร้างปุ่มควบคุมวิดีโอใน Divi

ตอนนี้เราพร้อมที่จะเริ่มเพิ่มปุ่มควบคุมวิดีโอแบบกำหนดเองโดยใช้ชุดโมดูลปุ่ม Divi

การสร้างแถวและคอลัมน์

อันดับแรก เราต้องตั้งค่าแถวและคอลัมน์ซึ่งจะทำหน้าที่เป็นแถบปุ่ม/คอนเทนเนอร์ของเรา

แถว

เพิ่มแถวหนึ่งคอลัมน์ใหม่ใต้แถวที่มีบาร์โค้ดแสดงความคืบหน้า

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ช่องว่างภายใน: บน 10px ด้านล่าง 20px

การเพิ่ม Flex ให้กับคอลัมน์

วิธีง่ายๆ ในการจัดตำแหน่งแนวนอนสำหรับปุ่มของเราคือการใช้ display:flex ในคอลัมน์ที่มีปุ่มของเรา ในการดำเนินการนี้ ให้เปิดการตั้งค่าสำหรับคอลัมน์และเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

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

เมื่อคอลัมน์ของเราพร้อมแล้ว เราก็พร้อมที่จะเพิ่มปุ่มของเราแล้ว

ปุ่มเล่น / หยุดชั่วคราว

เราจะทำให้ปุ่มแรกนี้เป็นปุ่ม "เล่น/หยุดชั่วคราว" ที่จะสลับฟังก์ชันการเล่นและหยุดชั่วคราวสำหรับวิดีโอของเรา หากต้องการสร้างปุ่ม ให้เพิ่มโมดูลปุ่มลงในคอลัมน์

เปิดการตั้งค่าปุ่มและอัปเดตข้อความของปุ่ม:

• ข้อความปุ่ม: เล่น / หยุดชั่วคราว

ใต้แท็บออกแบบ กำหนดลักษณะปุ่มดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 18px (เดสก์ท็อป), 14px (แท็บเล็ตและโทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: rgba(255,255,255,0.15)
• ความกว้างของขอบปุ่ม: 0px
• แสดงไอคอนปุ่ม: NO

อัปเดตระยะขอบสำหรับปุ่มดังนี้:

• ขอบ: ด้านบน 10px, ด้านซ้าย 10px, ด้านขวา 10px

ภายใต้แท็บขั้นสูง เพิ่มรหัส CSS ต่อไปนี้:

• CSS ID: Divi-เล่น-หยุดชั่วคราว

ปุ่มหยุด

ถัดลงมาคือปุ่มหยุด ปุ่มนี้จะหยุดวิดีโอและนำกลับไปที่จุดเริ่มต้น

ในการสร้างปุ่ม ให้ทำซ้ำโมดูลปุ่ม "เล่น/หยุดชั่วคราว"

จากนั้นอัปเดตข้อความปุ่ม:

• ข้อความปุ่ม: หยุด

และให้รหัส CSS ที่กำหนดเองแก่ปุ่ม:

• CSS ID: divi-stop

ปุ่มปิดเสียง

ในการสร้างปุ่มปิดเสียงที่จะปิดเสียงของวิดีโอ ให้ทำซ้ำปุ่ม "หยุด" ที่เราเพิ่งสร้างขึ้น

อัปเดตข้อความปุ่ม:

• ข้อความปุ่ม: ปิดเสียง

จากนั้นให้รหัส CSS ที่กำหนดเอง:

• CSS ID: Divi-ปิดเสียง

ปุ่มเพิ่มระดับเสียง

ปุ่มถัดไปของเราจะเพิ่มระดับเสียงของวิดีโอขึ้นเรื่อยๆ ทุกครั้งที่คุณคลิก เราจะเรียกมันว่าปุ่มเพิ่มระดับเสียง

ในการสร้างปุ่ม ให้ทำซ้ำโมดูลปุ่ม "ปิดเสียง"

จากนั้นอัปเดตข้อความปุ่ม:

• ข้อความปุ่ม: Vol

ใต้แท็บออกแบบ เพิ่มลูกศรขึ้นถัดจากข้อความปุ่มโดยอัปเดตสิ่งต่อไปนี้:

• แสดงไอคอนปุ่ม: ใช่
• ไอคอนปุ่ม: ลูกศรขึ้น (ดูภาพหน้าจอ)
• ปุ่มไอคอนสี: #00a9d8
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

จากนั้นอัปเดต padding ของปุ่มดังนี้:

• ช่องว่างภายใน: 0.5em ซ้าย, 1.5em ขวา

จากนั้นอัปเดต CSS ID:

• CSS ID: divi-volinc

ปุ่มลดระดับเสียง

เราไม่สามารถมีปุ่ม "เพิ่มระดับเสียง" ได้โดยมีปุ่ม "ลดระดับเสียง" ด้วยเช่นกัน เพื่อลดระดับเสียงของวิดีโอทีละน้อย

ในการสร้างปุ่ม "ลดระดับเสียง" ให้ทำซ้ำปุ่ม "เพิ่มระดับเสียง" ที่เราเพิ่งสร้างขึ้น

จากนั้นอัปเดตไอคอนปุ่มเป็นไอคอน "ลูกศรลง"

จากนั้นอัปเดต CSS ID:

• CSS ID: Divi-voldec

ปุ่มมุมมองขนาดใหญ่

สำหรับปุ่มสุดท้ายของเรา เราจะสร้างปุ่ม "มุมมองขนาดใหญ่" ที่จะเพิ่มความกว้างของคอนเทนเนอร์วิดีโอเมื่อคลิก

หากต้องการสร้างปุ่ม ให้ทำซ้ำปุ่ม "ปิดเสียง" จากนั้นลากปุ่มที่ซ้ำกันภายใต้ปุ่ม "ลดระดับเสียง" เพื่อให้อยู่ทางด้านขวาสุดของแถบปุ่ม

เปิดการตั้งค่าสำหรับปุ่มที่ซ้ำกันและอัปเดตข้อความของปุ่ม:

• ข้อความปุ่ม: มุมมองขนาดใหญ่

จากนั้นให้รหัส CSS ที่กำหนดเองแก่ปุ่ม:

• CSS ID: divi-large-view

ส่วนที่ 4: การเพิ่ม Custom CSS และ JS Code

เมื่อองค์ประกอบ Divi ทั้งหมดของเราถูกสร้างขึ้น เราก็พร้อมที่จะนำโค้ดที่กำหนดเองซึ่งจำเป็นมาใช้เพื่อให้ทุกอย่างทำงานได้

ไปข้างหน้าและเพิ่มโมดูลโค้ดอื่นภายใต้โมดูลโค้ดที่มีแถบความคืบหน้า HTML ในแถวที่สองของส่วนของเรา

CSS

ในกล่องโค้ด ให้วาง CSS ต่อไปนี้เพื่อให้แน่ใจว่าได้ใส่ CSS ไว้ในแท็ก รูปแบบที่ จำเป็น

.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

ภายใต้ CSS (แท็กรูปแบบสิ้นสุด) ให้วางโค้ด JS ต่อไปนี้เพื่อให้แน่ใจว่าได้ใส่โค้ดไว้ในแท็ก สคริปต์ที่ จำเป็น

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;
    }
  });
});

ทำลายรหัส

ตัวแปรที่ชี้ไปยังองค์ประกอบ HTML และปุ่ม Divi

ในการเริ่มต้น เราต้องประกาศตัวแปรที่ชี้ไปที่องค์ประกอบ Divi แต่ละองค์ประกอบที่มี CSS ID ที่เราระบุ นอกจากนี้เรายังต้องการตัวแปรสำคัญสองตัวที่ชี้ไปที่องค์ประกอบ HTML จริง (ไม่ใช่วัตถุ jQuery) ซึ่งรวมถึง videoElement (ซึ่งชี้ไปที่องค์ประกอบวิดีโอ HTML) และ ProgressElement (ซึ่งชี้ไปที่องค์ประกอบความคืบหน้า 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");

เมื่อตัวแปรพร้อมแล้ว เราจะซ่อนตัวควบคุมวิดีโอ HTML เริ่มต้น

videoElement.controls = false;

ต่อไป เราต้องทำให้แถบความคืบหน้าของเรากว้างขึ้นเมื่อเทียบกับเวลาปัจจุบันและระยะเวลาของวิดีโอ

เมื่อวิดีโอโหลดข้อมูลเมตา (โดยใช้เหตุการณ์ loadmetadata ที่โหลด ) ในองค์ประกอบความคืบหน้า เราจะตั้งค่าแอตทริบิวต์ max ด้วยค่าเท่ากับระยะเวลาของวิดีโอ

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

จากนั้นเราใช้เหตุการณ์ timeupdate เพื่ออัปเดตค่าและความกว้างของแถบความคืบหน้าเพื่อระบุตำแหน่งการเล่นปัจจุบัน

$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) +
        "%"
    );
  }
});

ต่อไป เราเริ่มสร้างฟังก์ชันที่ทำสิ่งต่างๆ เมื่อคลิกที่ปุ่มของเรา

สำหรับปุ่มเล่น/หยุดชั่วคราว เราสลับเมธอด play() และ pause() โดยใช้แอตทริบิวต์ หยุด และ สิ้นสุด ของ Media API ด้วยคำสั่ง if

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

สำหรับปุ่มหยุด เราหยุดวิดีโอชั่วคราวและนำค่าความคืบหน้าและเวลาปัจจุบันกลับไปเป็น 0

$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 ) และอีกปุ่มหนึ่งถูกกำหนดเพื่อลดระดับเสียงเมื่อคลิก ( $voldec ) ทำได้โดยใช้ ฟังก์ชัน alterVolume() ซึ่งตรวจสอบพารามิเตอร์ dir สำหรับ "+" หรือ "-" และเพิ่มหรือลดระดับเสียงทีละน้อยในแต่ละคลิก

$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;
  }
};

ปุ่มมุมมองขนาดใหญ่สลับคลาส CSS ที่ปรับ ความกว้างสูงสุด ของคอนเทนเนอร์วิดีโอเมื่อคลิก

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

และเนื่องจากตัวอย่างนี้ไม่มีการควบคุมและฟังก์ชันการทำงานทั้งหมดที่มีให้ในการควบคุมวิดีโอเริ่มต้น นี่คือฟังก์ชันที่แสดงแอตทริบิวต์ การควบคุม เหล่านั้นเมื่อวางเมาส์เหนือวิดีโอ

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

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้าย

และนี่คือวิธีการควบคุมสแต็คบนมือถือ

คุณยังสามารถตรวจสอบโค้ดเพนนี้ที่แสดงฟังก์ชันการทำงานเดียวกันได้

สำรวจเพิ่มเติม

หากคุณคุ้นเคยกับ HTML และ Javascript และสนใจที่จะเพิ่มการควบคุมและฟังก์ชันการทำงานที่กำหนดเองให้กับวิดีโอ HTML5 ของคุณ คุณสามารถตรวจสอบคู่มือนี้เกี่ยวกับวิธีสร้างโปรแกรมเล่นวิดีโอตั้งแต่เริ่มต้น คุณอาจต้องการตรวจสอบ HTMLMediaElement API เพื่อดูความเป็นไปได้ที่นั่น

ฉันหวังว่าจะได้แบ่งปันวิธีที่เป็นประโยชน์มากขึ้นในการจัดการวิดีโอ HTML5 และ Divi ในอนาคตอันใกล้

ความคิดสุดท้าย

การสร้างการควบคุมแบบกำหนดเองภายนอกสำหรับวิดีโอของคุณใน Divi สามารถเปิดประตูสู่การออกแบบและการทำงานที่เป็นเอกลักษณ์ จริงอยู่ที่ ตัวอย่างจากบทช่วยสอนนี้ไม่ได้สำรวจตัวเลือก (หรือการควบคุม) ทั้งหมดที่พร้อมใช้งาน และฟังก์ชันนี้จำกัดไว้เพียงวิดีโอเดียวในหน้าเดียว ไม่ใช่หลายรายการ ดังนั้นจึงเหมาะอย่างยิ่งสำหรับการปรับแต่งหนึ่งในวิดีโอหลักที่คุณต้องการนำเสนอ แต่หวังว่าจะเป็นการแนะนำที่ดีเกี่ยวกับสิ่งที่จำเป็นสำหรับการสร้างการควบคุมวิดีโอ HTML5 แบบกำหนดเองของคุณเองสำหรับโครงการต่อไปของคุณ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!