วิธีเพิ่มวิดีโอภาพเคลื่อนไหวลงใน WordPress: คำแนะนำทีละขั้นตอน

เผยแพร่แล้ว: 2024-12-24

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

ในคู่มือนี้ เราจะแสดงวิธีเพิ่มวิดีโอภาพเคลื่อนไหวลงในเว็บไซต์ WordPress ของคุณทีละขั้นตอน ซึ่งครอบคลุมทุกอย่างตั้งแต่การเลือกรูปแบบวิดีโอที่เหมาะสมไปจนถึงการแก้ไขปัญหาทั่วไป

เหตุใดจึงต้องเพิ่มวิดีโอภาพเคลื่อนไหวลงใน WordPress?

เหตุใดจึงต้องเพิ่มวิดีโอภาพเคลื่อนไหวลงใน WordPress?

วิดีโอภาพเคลื่อนไหวสามารถทำให้เว็บไซต์มีการโต้ตอบและดึงดูดสายตามากขึ้น ช่วยอธิบายแนวคิดได้อย่างรวดเร็ว สาธิตผลิตภัณฑ์ หรือเพียงแค่สร้างความบันเทิง นี่คือข้อดีบางประการของการเพิ่มวิดีโอภาพเคลื่อนไหวลงในไซต์ WordPress ของคุณ:

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

คำแนะนำทีละขั้นตอนในการเพิ่มวิดีโอภาพเคลื่อนไหวลงใน WordPress

ก่อนที่จะเพิ่มวิดีโอแอนิเมชั่นลงใน WordPress จำเป็นอย่างยิ่งที่จะต้องเตรียมวิดีโอของคุณให้พร้อม วิดีโอภาพเคลื่อนไหวอาจมีหลายรูปแบบ เช่น GIF , MP4 หรือ WebM และคุณจะต้องตรวจสอบให้แน่ใจว่าไฟล์นั้นได้รับการปรับให้เหมาะกับเว็บ

1. เลือกรูปแบบวิดีโอที่เหมาะสม

1. เลือกรูปแบบวิดีโอที่เหมาะสม

ขั้นตอนแรกคือการเลือกรูปแบบวิดีโอที่เหมาะสม สำหรับวิดีโอแอนิเมชั่น รูปแบบทั่วไปได้แก่:

  • MP4 : เหมาะสำหรับวิดีโอส่วนใหญ่เนื่องจากมีความเข้ากันได้กว้างและขนาดไฟล์เล็ก
  • GIF : เหมาะสำหรับภาพเคลื่อนไหวสั้นๆ ที่มีการวนซ้ำ
  • WebM : อีกรูปแบบวิดีโอสมัยใหม่ที่ปรับให้เหมาะกับการใช้งานเว็บ

สำหรับผู้ใช้ส่วนใหญ่ ขอแนะนำให้ใช้ MP4 เพื่อการแสดงผลวิดีโอคุณภาพสูง มีประสิทธิภาพ และตอบสนอง

2. ปรับวิดีโอให้เหมาะสมสำหรับการใช้งานเว็บ

ก่อนที่จะอัปโหลดวิดีโอของคุณไปยัง WordPress สิ่งสำคัญคือต้องปรับให้เหมาะสมเพื่อให้โหลดเร็วขึ้น ไฟล์วิดีโอขนาดใหญ่อาจทำให้เว็บไซต์ของคุณช้าลง ส่งผลเสียต่อ SEO และประสบการณ์ผู้ใช้ ใช้เครื่องมือบีบอัดวิดีโอ เช่น HandBrake หรือ Adobe Media Encoder เพื่อลดขนาดไฟล์โดยไม่ทำให้คุณภาพลดลง

  • ขนาดไฟล์ที่แนะนำ : รักษาขนาดไฟล์วิดีโอของคุณให้ต่ำกว่า 10 MB เพื่อให้โหลดเร็วขึ้น
  • ความละเอียด : ตั้งเป้าไปที่ความละเอียด 720p หรือ 1080p เพื่อความสมดุลที่ดีระหว่างคุณภาพและประสิทธิภาพ

3. การอัปโหลดวิดีโอภาพเคลื่อนไหวไปยัง WordPress

3. การอัปโหลดวิดีโอภาพเคลื่อนไหวไปยัง WordPress

เมื่อวิดีโอแอนิเมชั่นของคุณพร้อมแล้ว ให้ทำตามขั้นตอนเหล่านี้เพื่ออัปโหลดไปยังเว็บไซต์ WordPress ของคุณ:

  1. เข้าสู่พื้นที่ผู้ดูแลระบบ WordPress ของคุณ
  2. ในแถบด้านข้างซ้าย คลิก สื่อ > เพิ่มใหม่
  3. ลากและวางไฟล์วิดีโอภาพเคลื่อนไหวของคุณลงในพื้นที่อัปโหลด หรือคลิก เลือกไฟล์ เพื่อเรียกดูคอมพิวเตอร์ของคุณ
  4. หลังจากอัปโหลดแล้ว ให้ไปที่เพจหรือโพสต์ที่คุณต้องการเพิ่มวิดีโอ คลิกที่ปุ่ม + เพื่อเพิ่มบล็อก และเลือกบล็อก วิดีโอ หรือบล็อก ฝัง สำหรับแหล่งภายนอก เช่น YouTube หรือ Vimeo
  5. หากวิดีโออยู่ในไลบรารีสื่อของคุณ ให้เลือกวิดีโอจากรายการ

การเพิ่มวิดีโอภาพเคลื่อนไหวโดยใช้รหัส HTML หรือรหัสย่อ

การเพิ่มวิดีโอภาพเคลื่อนไหวโดยใช้รหัส HTML หรือรหัสย่อ

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

1. การฝังวิดีโอภาพเคลื่อนไหวโดยใช้โค้ด HTML

หากวิดีโอแอนิเมชั่นของคุณโฮสต์บนแพลตฟอร์มอื่น เช่น YouTube หรือ Vimeo หรือหากคุณต้องการใช้ HTML ให้ทำตามขั้นตอนเหล่านี้:

  1. รับโค้ดฝัง : บนหน้า YouTube หรือ Vimeo คลิกปุ่ม แชร์ และเลือก ฝัง คัดลอกโค้ดฝัง HTML
  2. ไปที่ WordPress Post/Page : ในตัวแก้ไข WordPress ให้สลับไปที่แท็บ ข้อความ (แทนแท็บ Visual)
  3. วางโค้ดสำหรับฝัง : วางโค้ดสำหรับฝังในตำแหน่งที่คุณต้องการให้วิดีโอปรากฏ
  4. อัปเดตหรือเผยแพร่ : บันทึกการเปลี่ยนแปลงของคุณและดูโพสต์เพื่อตรวจสอบวิธีการแสดงวิดีโอ

2. การใช้รหัสย่อสำหรับการฝังวิดีโอ

WordPress ยังอนุญาตให้คุณใช้รหัสย่อเพื่อการฝังวิดีโอที่ง่ายดาย ต่อไปนี้เป็นวิธีใช้รหัสย่อ:

  • ใช้ รหัสย่อ : หากคุณอัปโหลดวิดีโอของคุณไปยังไลบรารีสื่อ เพียงเพิ่มรหัสย่อต่อไปนี้ในโพสต์หรือเพจของคุณ:

    video src= “URL ของวิดีโอ”

    แทนที่ “URL ของวิดีโอ” ด้วย URL จริงจากไลบรารีสื่อ
  • ปรับแต่งเครื่องเล่นวิดีโอ : คุณยังสามารถเพิ่มแอตทริบิวต์ เช่น เล่นอัตโนมัติหรือวนซ้ำ ได้:

    video src= “URL ของวิดีโอ” วนซ้ำเล่นอัตโนมัติ

    หมายเหตุ : ตรวจสอบให้แน่ใจว่าได้เพิ่มส่วนเปิด "[” ที่จุดเริ่มต้นและปิด “]” ที่ส่วนท้ายของรหัสย่อเพื่อให้โค้ดสมบูรณ์

วิธีนี้ช่วยให้คุณควบคุมฟีเจอร์ต่างๆ ของวิดีโอได้มากขึ้น โดยไม่ต้องสลับระหว่าง HTML


การปรับแต่งวิดีโอภาพเคลื่อนไหวใน WordPress

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

เปิดใช้งานการเล่นอัตโนมัติและการวนซ้ำ

  • เล่นอัตโนมัติ : ตัวเลือกนี้ช่วยให้วิดีโอของคุณเริ่มโดยอัตโนมัติเมื่อโหลดหน้าเว็บ ใช้เท่าที่จำเป็นเนื่องจากอาจรบกวนผู้เยี่ยมชมบางรายได้
  • วนซ้ำ : หากคุณต้องการให้วิดีโอของคุณเล่นซ้ำอย่างต่อเนื่อง ให้เปิดใช้งานคุณสมบัติวนซ้ำ

หากต้องการเปิดใช้งานตัวเลือกเหล่านี้ คุณสามารถใช้ปลั๊กอินหรือปรับโค้ดฝังของวิดีโอด้วยตนเองเพื่อรวมแอตทริบิวต์ การเล่นอัตโนมัติ และ ลูป

ควบคุมขนาดและตำแหน่ง

  • การจัดตำแหน่งวิดีโอ : ใช้เครื่องมือการจัดตำแหน่งของ WordPress เพื่อวางตำแหน่งวิดีโอของคุณ (ซ้าย กลาง หรือขวา)
  • ขนาดวิดีโอ : คุณสามารถปรับความกว้างและความสูงของวิดีโอได้ในการตั้งค่าบล็อก

การแก้ไขปัญหาการอัปโหลดและการแสดงผลวิดีโอ

บางครั้งวิดีโอภาพเคลื่อนไหวอาจอัปโหลดหรือแสดงไม่ถูกต้อง ต่อไปนี้เป็นปัญหาทั่วไปบางประการและวิธีแก้ปัญหา:

1. วิดีโอไม่อัปโหลด

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

2. วิดีโอไม่แสดงอย่างถูกต้อง

  • ความขัดแย้งของธีม : ธีม WordPress บางธีมอาจทำให้เกิดปัญหาในการแสดงผลกับวิดีโอ ลองเปลี่ยนไปใช้ธีม WordPress เริ่มต้น (เช่น Twenty Twenty-Three) เพื่อตรวจสอบ
  • ความขัดแย้งของปลั๊กอิน : ปิดใช้งานปลั๊กอินทีละรายการเพื่อดูว่าปลั๊กอินเป็นสาเหตุของปัญหาหรือไม่

3. วิดีโอไม่เล่นอัตโนมัติ

  • การตั้งค่าเบราว์เซอร์ : เบราว์เซอร์บางตัวปิดใช้งานการเล่นอัตโนมัติตามค่าเริ่มต้น ตรวจสอบให้แน่ใจว่าวิดีโอของคุณมีแอตทริบิวต์การเล่นอัตโนมัติที่กำหนดไว้ในโค้ด

เทคนิคขั้นสูงสำหรับวิดีโอภาพเคลื่อนไหวใน WordPress

หากคุณต้องการยกระดับการรวมวิดีโอแอนิเมชั่นของคุณไปอีกระดับ นี่คือตัวเลือกขั้นสูงบางส่วน:

การใช้วิดีโอเป็นพื้นหลัง

คุณสามารถตั้งค่าวิดีโอภาพเคลื่อนไหวเป็นพื้นหลังของหน้าหรือส่วนเพื่อสร้างเอฟเฟกต์ไดนามิกได้ ธีมและเครื่องมือสร้างเพจจำนวนมาก เช่น Elementor หรือ WPBakery มีตัวเลือกในตัวเพื่อเพิ่มวิดีโอพื้นหลัง

การสร้างแกลเลอรี่วิดีโอ

หากคุณมีวิดีโอภาพเคลื่อนไหวหลายรายการ คุณสามารถสร้างแกล เลอรีวิดีโอ ได้ ปลั๊กอินเช่น Envira Gallery หรือ FooGallery ช่วยให้คุณสามารถแสดงวิดีโอหลายรายการในตารางที่สะอาดและตอบสนองได้ดี

บทสรุป:

การเพิ่มวิดีโอภาพเคลื่อนไหวลงในไซต์ WordPress ของคุณสามารถปรับปรุงการมีส่วนร่วมของผู้ใช้ได้อย่างมากและทำให้เนื้อหาของคุณน่าสนใจยิ่งขึ้น ไม่ว่าคุณจะเพิ่ม GIF, MP4 หรือฝังวิดีโอ YouTube กระบวนการนี้ก็ง่ายและยืดหยุ่น เมื่อทำตามขั้นตอนเหล่านี้ คุณจะมั่นใจได้ว่าวิดีโอแอนิเมชั่นของคุณได้รับการปรับให้เหมาะสมเพื่อประสิทธิภาพ เข้าถึงได้ และมอบคุณค่าให้กับผู้ชมของคุณ

คุณพบว่าคู่มือนี้มีประโยชน์หรือไม่ แจ้งให้เราทราบว่าคุณรวมวิดีโอแอนิเมชั่นไว้ในเว็บไซต์ WordPress ของคุณอย่างไร และแบ่งปันเคล็ดลับหรือลูกเล่นในความคิดเห็นด้านล่างได้เลย!